de /servicios empieza en y=41 y la banda acaba en 121). En la landing el heroe va inmediatamente despues y se le meteria 80 px por debajo. */ .kh-land-cab{position:sticky;top:0;z-index:99} .kh-land-nav .elementor-icon-list-text,.kh-land-tel .elementor-icon-list-text{transition:color .16s ease} /* CABECERA LANDING v2.1: area tactil de los enlaces de contacto, copiada de `.kh-topbar .elementor-icon-list-item a` del header global. */ .kh-land-tel .elementor-icon-list-item a{display:flex;align-items:center;min-height:32px} .kh-land-nav .elementor-icon-list-item a:hover .elementor-icon-list-text, .kh-land-tel .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--e-global-color-d49ac81)} /* Subrayado del navbar: mismo patron y mismo alto de caja que `.kh-cab .elementor-nav-menu--main .elementor-item` (padding vertical 25). */ .kh-land-nav .elementor-icon-list-item a{padding-top:25px;padding-bottom:25px;transition:box-shadow .16s ease,color .16s ease} .kh-land-nav .elementor-icon-list-item a:hover, .kh-land-nav .elementor-icon-list-item a:focus-visible{box-shadow:inset 0 -2px 0 var(--e-global-color-khsecbr)} @media (max-width:1024px){.kh-land-cab .kh-land-nav{display:none}} @media (max-width:767px){ /* Telefono como chip circular, identico al de `.kh-topbar` en movil */ .kh-land-cab .kh-land-tel .elementor-icon-list-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .kh-land-cab .kh-land-tel .elementor-icon-list-item{flex-shrink:0} /* CABECERA v2.2 2026-08-26 (orden del operador): el chip pasa de 28 a 34 px para facilitar la llamada sin pulsar "Cotizar" por error. */ .kh-land-cab .kh-land-tel .elementor-icon-list-item a{width:34px;min-width:34px;height:34px;min-height:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:var(--e-global-color-khchipbg);border-radius:50%;padding:0} .kh-land-cab .kh-land-tel .elementor-icon-list-icon{margin:0;display:flex;width:auto;min-width:0;align-items:center;justify-content:center} /* El icono sube a 17 para mantener la proporcion del header global, donde el icono es la mitad del chip (14 sobre 28). */ .kh-land-cab .kh-land-tel .elementor-icon-list-icon svg{margin:0!important;width:17px;height:17px} } /* --- anclas de la pagina --- ANCLAS LANDING v1 2026-08-26 (orden del operador). La cabecera es pegajosa (80/70/60), asi que sin `scroll-margin-top` el navegador alinea el destino con el borde de la ventana y la cabecera se come sus primeros 80 px: el titulo del formulario quedaba cortado. Se le suman 16 px de aire. Vale para los clics Y para las visitas directas con el fragmento en la URL. ALCANCE: escopado a la pagina 53 por exigencia del operador (un cambio no puede alcanzar al resto del sitio). AVISO: si en el paso a produccion esta pagina cambia de ID, hay que actualizar `.elementor-page-53` aqui o la correccion dejara de aplicarse en silencio. Hoy los cuatro `id` existen SOLO en esta pagina (comprobado en /, /servicios, /nosotros, /soporte-remoto-y-en-sitio y /contacto). 2026-09-01 (orden del operador): la pagina pasa a plantilla elementor_canvas y ya NO carga la cabecera global pegajosa. La barra propia de la landing (kh-land-cab, khl0011) NO es pegajosa, asi que no tapa nada: los tres valores bajan de 96/86/76 a 16 px, que era solo el aire. Si algun dia esa barra se hace pegajosa, hay que volver a sumarle su altura. */ .elementor-page-53 #servicios, .elementor-page-53 #proceso, .elementor-page-53 #faq, .elementor-page-53 #form-lead{scroll-margin-top:16px} @media (max-width:1024px){ .elementor-page-53 #servicios, .elementor-page-53 #proceso, .elementor-page-53 #faq, .elementor-page-53 #form-lead{scroll-margin-top:16px} } @media (max-width:767px){ .elementor-page-53 #servicios, .elementor-page-53 #proceso, .elementor-page-53 #faq, .elementor-page-53 #form-lead{scroll-margin-top:16px} } /* --- hero --- */ .kh-grad{background:linear-gradient(90deg,var(--e-global-color-khbrand),var(--e-global-color-d49ac81));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* El tamano del titular secundario del hero (18,5/1,6, como especifica el sistema de diseno en .kh-hero-l) va en los AJUSTES del widget: desde aqui nunca llegaria, porque la regla por elemento de Elementor tiene mas especificidad. Aqui solo la medida de linea, que Elementor no escribe. */ .kh-land-lead .elementor-heading-title{max-width:56ch} .kh-land-seguro .elementor-icon-list-item{align-items:center} /* --- icono de tarjeta: el kh-ico del sitio, con el color por variable --- */ .kh-land-ico{color:var(--e-global-color-d49ac81)} /* --- entradilla del portafolio, al ancho del origen --- */ .kh-land-entradilla .elementor-heading-title{max-width:666px;margin-inline:auto} /* --- separador «o si prefieres…» de la tarjeta de formulario --- */ .kh-land-div .elementor-heading-title{display:flex;align-items:center;gap:12px} .kh-land-div .elementor-heading-title::before,.kh-land-div .elementor-heading-title::after{content:"";flex:1;height:1px;background:var(--e-global-color-khelev)} /* --- ilustracion de marca de «Quienes somos» --- */ .kh-land-ilus .illus-panel{background:linear-gradient(160deg,var(--e-global-color-khsurface) 0%,var(--e-global-color-khchipbg) 100%);border:1px solid var(--e-global-color-khelev);border-radius:26px;padding:26px} .kh-land-ilus svg{display:block;width:100%;height:auto} @media (prefers-reduced-motion:no-preference){ .kh-land-ilus .bob-svg{animation:khbob 6s ease-in-out infinite} .kh-land-ilus .dash-line{stroke-dasharray:5 7;animation:khdash 22s linear infinite} .kh-land-ilus .node-pulse{animation:khnodo 3.2s ease-in-out infinite} .kh-land-ilus .node-pulse.n2{animation-delay:-1.1s} .kh-land-ilus .node-pulse.n3{animation-delay:-2.2s}} @keyframes khbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} @keyframes khdash{to{stroke-dashoffset:-260}} @keyframes khnodo{0%,100%{opacity:1}50%{opacity:.35}} /* --- FORMULARIO REAL (Contact Form 7) DENTRO DE LA TARJETA --- Estiliza la salida estandar de CF7 con los tokens del sitio. Selectores genericos: valen para cualquier plantilla CF7. */ .kh-form .wpcf7,.kh-form .wpcf7-form,.kh-form .wpcf7-form p{margin:0;padding:0} .kh-form .wpcf7-form br{display:none} .kh-form .wpcf7-form label{display:block;font-size:13px;font-weight:600;color:var(--e-global-color-secondary);margin:15px 0 0} .kh-form .wpcf7-form label .req{color:var(--e-global-color-khalerta)} .kh-form .wpcf7-form-control-wrap{display:block;margin-top:6px} .kh-form .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]){ width:100%!important;padding:12px 14px!important;border:1.5px solid var(--e-global-color-khelev)!important;border-radius:11px!important; font:inherit;font-size:15px!important;color:var(--e-global-color-secondary)!important;background:var(--e-global-color-khbg)!important; box-shadow:none;transition:border-color .2s,box-shadow .2s,background .2s} .kh-form .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus{ outline:none!important;border-color:var(--e-global-color-d49ac81)!important;box-shadow:0 0 0 4px var(--e-global-color-khbtnglow)!important} .kh-form .wpcf7-form select.wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]){ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C6C7DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:right 14px center!important;padding-right:40px!important} .kh-form .wpcf7-form textarea.wpcf7-form-control{min-height:96px;resize:vertical} .kh-form .wpcf7-submit{ display:block;width:100%!important;margin-top:20px!important;padding:15px 46px 15px 28px!important; border:0!important;border-radius:8px!important;cursor:pointer;text-align:center; font-family:Inter,sans-serif!important;font-weight:600!important;font-size:16px!important;line-height:1.4!important; color:var(--e-global-color-khbtntx)!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1E42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--e-global-color-khbtnhov),var(--e-global-color-d49ac81))!important; background-repeat:no-repeat,no-repeat!important;background-position:right 22px center,0 0!important; background-size:19px 19px,100% 100%!important; transition:transform .16s ease,box-shadow .16s ease,background-position .3s ease} .kh-form .wpcf7-submit:hover{transform:translateY(-2px);box-shadow:0 7px 20px var(--e-global-color-khbtnglow),0 0 0 3px var(--e-global-color-khbtnglow);background-position:right 18px center,0 0!important} .kh-form .wpcf7-submit:disabled{opacity:.65;cursor:not-allowed;transform:none} .kh-form .wpcf7-spinner{ display:block;margin:12px auto 0!important;width:22px;height:22px; background:transparent!important;opacity:1;visibility:visible; border:3px solid var(--e-global-color-khelev);border-top-color:var(--e-global-color-d49ac81);border-radius:50%; animation:khgira .8s linear infinite} .kh-form .wpcf7-spinner::before{display:none} .kh-form .wpcf7-form:not(.submitting) .wpcf7-spinner{display:none} @keyframes khgira{to{transform:rotate(360deg)}} .kh-form .wpcf7-not-valid{border-color:var(--e-global-color-khalerta)!important} .kh-form .wpcf7-not-valid-tip{display:block;font-size:12px;font-weight:500;color:var(--e-global-color-khalerta);margin:6px 2px 0} .kh-form .wpcf7-response-output{ margin:14px 0 0!important;padding:11px 14px!important;border-radius:11px!important; font-size:14px;line-height:1.5;border:1.5px solid var(--e-global-color-khelev)!important;color:var(--e-global-color-khbody)} .kh-form .wpcf7-response-output:empty{display:none} .kh-form .wpcf7-form.invalid .wpcf7-response-output, .kh-form .wpcf7-form.unaccepted .wpcf7-response-output, .kh-form .wpcf7-form.failed .wpcf7-response-output, .kh-form .wpcf7-form.aborted .wpcf7-response-output{border-color:var(--e-global-color-khalerta)!important;color:var(--e-global-color-khalerta)!important} .kh-form .wpcf7-form.sent .wpcf7-response-output{border-color:var(--e-global-color-d49ac81)!important;color:var(--e-global-color-khchiptx)!important} /* --- WHATSAPP: boton flotante y chat (widget funcional de la pagina) --- */ /* ARREGLO DE APILAMIENTO 2026-08-26: `z-index:0` aqui creaba un contexto que encerraba al minichat (fixed, z-index:320) y lo dejaba por debajo del hero, cuyos hijos van a z-index:1 desde que adopto kh-hero-l. Este contenedor no pinta nada (1440x0), solo aloja chat, flotante y scripts: con z-index:auto no crea contexto y el chat sube a la raiz. NO devolverle un z-index ni darle transform/filter/opacity<1: cualquiera de esos vuelve a crear el contexto y reaparece el defecto. */ .kh-land-func{position:relative;z-index:auto} .wa-float{position:fixed;right:24px;bottom:24px;z-index:300; min-width:60px;height:60px;padding:0 15px;border-radius:999px; background:linear-gradient(180deg,var(--e-global-color-khwa2),var(--e-global-color-khwa));color:#fff!important; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 28px rgba(37,211,102,.42);transition:transform .3s ease} .wa-float:hover{transform:scale(1.09)} .wa-float .ic-fill{width:30px;height:30px;fill:currentColor;stroke:none} .wa-float::before{content:"";position:absolute;inset:0;border-radius:999px;background:rgba(37,211,102,.45);animation:khpulso 2.6s ease-out infinite;z-index:-1} @keyframes khpulso{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.6);opacity:0}} .wa-label{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:15px;transition:max-width .45s ease,opacity .3s ease,margin .45s ease} @media (hover:hover){.wa-float:hover .wa-label{max-width:140px;opacity:1;margin-left:10px}} .wa-float .ic-close{display:none;width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2} body.wa-open .wa-float .ic-wa-main,body.wa-open .wa-float .wa-label{display:none} body.wa-open .wa-float .ic-close{display:block} body.wa-open .wa-float{background:linear-gradient(180deg,var(--e-global-color-khelev),var(--e-global-color-khsurface))} body.wa-open .wa-float::before{animation:none;opacity:0} .wa-widget{position:fixed;right:24px;bottom:98px;z-index:320;width:min(372px,calc(100vw - 32px)); background:var(--e-global-color-khsurface);border:1px solid var(--e-global-color-khelev);border-radius:20px;overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.45); opacity:0;transform:translateY(18px) scale(.95);transform-origin:bottom right;pointer-events:none; transition:opacity .3s ease,transform .35s cubic-bezier(.22,.9,.3,1)} .wa-widget.open{opacity:1;transform:none;pointer-events:auto} .waw-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#1db457,var(--e-global-color-khwa));color:#fff} .waw-avatar{width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden} .waw-avatar img{width:30px!important;height:30px!important;object-fit:contain} .waw-avatar svg{display:none;width:26px;height:26px;color:var(--e-global-color-khwa);fill:currentColor} .waw-avatar img.logo-fail{display:none} .waw-avatar img.logo-fail+svg{display:block} .waw-id{display:flex;flex-direction:column;line-height:1.3;min-width:0} .waw-id strong{font-family:Rajdhani,sans-serif;font-size:16px;letter-spacing:.06em} .waw-status{font-size:12px;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:6px} .waw-status i{width:8px;height:8px;border-radius:50%;background:#d9ffe9;box-shadow:0 0 0 3px rgba(255,255,255,.25)} .elementor-kit-6 button.waw-close{margin-left:auto;width:34px;height:34px;border-radius:10px;border:0; background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer; padding:0;font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;flex:none;transition:background .25s} .elementor-kit-6 button.waw-close:hover{background:rgba(255,255,255,.3)} .waw-close .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none} .waw-body{padding:18px 14px;background:var(--e-global-color-khbg); background-image:radial-gradient(rgba(198,199,221,.06) 1px,transparent 1px);background-size:18px 18px; display:flex;flex-direction:column;gap:10px;max-height:300px;overflow:auto} .waw-msg{background:var(--e-global-color-khelev);border:1px solid var(--e-global-color-khstrong);border-radius:14px 14px 14px 4px; padding:10px 13px;font-size:14px;color:var(--e-global-color-secondary);line-height:1.55;max-width:90%} .wa-widget.open .waw-msg{animation:khmsg .45s ease both} @keyframes khmsg{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .waw-time{display:block;font-size:11px;color:var(--e-global-color-khmuted);margin-top:5px;text-align:right} .waw-input{display:flex;align-items:flex-end;gap:10px;padding:12px;background:var(--e-global-color-khsurface);border-top:1px solid var(--e-global-color-khelev)} .waw-input textarea{flex:1;resize:none;border:1.5px solid var(--e-global-color-khelev);border-radius:12px;padding:10px 12px; font:inherit;font-size:14px;color:var(--e-global-color-secondary);background:var(--e-global-color-khbg); transition:border-color .2s,box-shadow .2s} .waw-input textarea:focus{outline:none;border-color:var(--e-global-color-khwa);box-shadow:0 0 0 4px rgba(37,211,102,.18)} .elementor-kit-6 button.waw-send{width:46px;height:46px;border-radius:50%;border:0;flex:none;padding:0; background:linear-gradient(180deg,var(--e-global-color-khwa2),var(--e-global-color-khwa));color:#fff; display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;letter-spacing:normal;text-transform:none; box-shadow:0 8px 18px rgba(37,211,102,.35);transition:transform .25s ease,box-shadow .25s ease} .elementor-kit-6 button.waw-send:hover{transform:scale(1.08);box-shadow:0 12px 24px rgba(37,211,102,.45)} .waw-send .ic{width:19px;height:19px;margin:1px 2px 0 0;stroke:currentColor;fill:none;stroke-width:2;flex:none} @media (max-width:640px){.wa-widget{right:16px;bottom:92px}} /* --- Escritura simulada del minichat --- Los dos saludos no se vuelcan de golpe: primero se ven los tres puntos de "escribiendo" y luego cae cada burbuja. El JavaScript vive en el snippet de WPCode 1500. Con prefers-reduced-motion no se anima nada. */ .waw-msg[hidden]{display:none} .waw-typing{align-self:flex-start;width:auto;max-width:none;display:inline-flex;align-items:center;gap:5px;padding:13px 15px} .waw-typing i{width:7px;height:7px;border-radius:50%;background:var(--e-global-color-khmuted);animation:khtype 1.25s infinite ease-in-out} .waw-typing i:nth-child(2){animation-delay:.16s} .waw-typing i:nth-child(3){animation-delay:.32s} @keyframes khtype{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} @media (prefers-reduced-motion:reduce){.waw-typing i{animation:none;opacity:.55}.wa-widget.open .waw-msg{animation:none}} /* --- CIERRE: banda de marca --- La piel de la banda azul original de la landing (orden 2026-08-25, con captura): degradado de marca, rejilla enmascarada que se desvanece desde arriba, orbe teal difuminado que deriva y marca de agua de circuito. Radio 30, relleno 80/48 y sombra van como ajustes nativos del contenedor. El foco que sigue al cursor del original NO se aplica: es JavaScript y esos efectos quedaron interpretados pero en espera por orden del operador. */ .elementor-kit-6 .kh-banda-marca{position:relative;overflow:hidden; /* #1330B8: variante de marca usada solo en degradados (no existe como token) */ background:linear-gradient(135deg,var(--e-global-color-khbrand) 0%,#1330B8 45%,var(--e-global-color-khsurface) 100%)} .elementor-kit-6 .kh-banda-marca::before{content:"";position:absolute;inset:0;pointer-events:none; /* neutraliza el brillo del estandar .kh-banda, que comparte este ::before: su regla (0,1,0) aporta width 60%, blur 6px y la animacion khsheen */ width:auto;height:auto;filter:none;animation:none; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image:radial-gradient(640px 420px at 50% 0%,#000 20%,transparent 75%); mask-image:radial-gradient(640px 420px at 50% 0%,#000 20%,transparent 75%)} .elementor-kit-6 .kh-banda-marca::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%; background:rgba(10,236,197,.28);filter:blur(90px);bottom:-190px;right:-110px;pointer-events:none} @media (prefers-reduced-motion:no-preference){ .elementor-kit-6 .kh-banda-marca::after{animation:khderiva 14s ease-in-out infinite alternate}} @keyframes khderiva{from{translate:0 0;scale:1}to{translate:46px 32px;scale:1.08}} /* el contenido por encima de la rejilla y el orbe; la marca de agua y el foco, detras */ .kh-banda-marca>.elementor-element:not(.kh-banda-wm):not(.kh-banda-spot){position:relative;z-index:1} .kh-banda-marca>.kh-banda-wm{position:absolute;left:-28px;bottom:-22px;width:310px;z-index:0; pointer-events:none;color:#fff;opacity:.09} .kh-banda-wm svg{display:block;width:100%;height:auto} /* foco que sigue al cursor (orden 2026-08-25): la capa se enciende al entrar el raton y el JS de la pieza funcional actualiza --mx/--my sobre la banda */ .kh-banda-marca>.kh-banda-spot{position:absolute;inset:0;z-index:0;margin:0; pointer-events:none;opacity:0;transition:opacity .5s ease; background:radial-gradient(340px 340px at var(--mx,50%) var(--my,40%),rgba(10,236,197,.28),transparent 65%)} .kh-banda-marca:hover>.kh-banda-spot{opacity:1} /* --- BOTON DE WHATSAPP: el estandar del kit en su verde y con texto oscuro --- Variante kh-wa del sistema de botones del kit: hereda el hover del archivo (aclara, eleva 2 px, halo doble) y solo cambia sus colores, como kh-btn2 y kh-btnb. El texto y el icono oscuros van en los ajustes de cada widget. Ademas recupera la onda de atencion del original, en su verde. */ .elementor-kit-6 .elementor-widget-button.kh-wa .elementor-button{ --khglow1:var(--e-global-color-khwaglow); --khglow2:var(--e-global-color-khwaglow); } .elementor-kit-6 .elementor-widget-button.kh-wa .elementor-button:active{ background-color:var(--e-global-color-khwa); border-color:var(--e-global-color-khwa); } @keyframes khondaverde{ 0%{box-shadow:0 10px 26px rgba(37,211,102,.30),0 0 0 0 rgba(37,211,102,.42)} 70%{box-shadow:0 10px 26px rgba(37,211,102,.30),0 0 0 15px rgba(37,211,102,0)} 100%{box-shadow:0 10px 26px rgba(37,211,102,.30),0 0 0 0 rgba(37,211,102,0)}} @media (prefers-reduced-motion:no-preference){ .elementor-kit-6 .elementor-widget-button.kh-wa .elementor-button{animation:khondaverde 2.7s ease-out infinite} .elementor-kit-6 .elementor-widget-button.kh-wa .elementor-button:hover, .elementor-kit-6 .elementor-widget-button.kh-wa .elementor-button:focus{animation:none}} /* --- FAQ: el acordeon con la piel de /servicios --- El sitio aplica el radio y la separacion por elemento o por pagina (ver .elementor-element-e33578d y el bloque body.page-id-662...808); la landing necesita su propia linea. El resto del aspecto (titulo h3 de 31 px, relleno 18/22, cuerpo a 1,65) sale de los ajustes del widget. */ .kh-land-faq .elementor-accordion-item{border-radius:12px;overflow:hidden} .kh-land-faq .elementor-accordion-item+.elementor-accordion-item{margin-top:12px} /* --- entrada de la seccion: el zoom suave del original (reveal rv-zoom) --- El ciclo de vida lo lleva Elementor (zoomIn en el contenedor); aqui solo se cambia la curva por la del original: escala 94% -> 100% en 0,7 s. */ @keyframes khzoomsuave{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} .elementor-kit-6 .kh-banda-marca.animated{ animation:khzoomsuave .7s cubic-bezier(.22,.9,.3,1) 1 both} /* fin kh-land */ /* --- El hero de la landing (kh-land-hero) adopta kh-hero-l (2026-08-26) --- La rejilla y las auroras vienen de la clase. Sus topes de ancho a >=1200px (60%, pensados para convivir con el arte lateral kh-hero-artL) NO aplican aqui: la landing no tiene arte lateral, tiene una segunda columna real con el formulario. Se neutralizan y se recupera el tope de 56ch solo para el titular secundario (.kh-land-lead). */ @media (min-width:1200px){ .elementor-kit-6 .kh-land-hero h1.elementor-heading-title, .elementor-kit-6 .kh-land-hero p.elementor-heading-title{max-width:none} } .elementor-kit-6 .kh-land-hero .kh-land-lead .elementor-heading-title{max-width:56ch} /* Los parrafos de la tarjeta del formulario tampoco heredan el 56ch base */ .elementor-kit-6 .kh-land-hero .kh-form .elementor-heading-title{max-width:none} /* ============================================================ DECO LANDING v2 2026-08-26 marcador: deco-landing Adornos por seccion de la landing 53. v2: composicion en zigzag (orden del operador: balancear, casi todo caia a la derecha) y linea de pasos mas presente. Tecnicas del kit: glifo content:"X"/"" (kh-faq-sec), halo blur + khderiva, reticula enmascarada. Sin barras invertidas (wp_unslash). Zigzag de acentos: somos IZQ | alcance halo-izq+glifo-der | pozo luz-IZQ | problema DER (llena el vacio bajo la tarjeta) | referencias IZQ | pasos CENTRO | faq IZQ | cierre DER (orbe). ============================================================ */ /* --- Quienes somos: halo teal a la IZQUIERDA, tras el titular --- (las cifras 2x2 ya cargan el lado derecho: la luz contrapesa) */ .elementor-kit-6 .kh-land-somos{position:relative;overflow:hidden} .elementor-kit-6 .kh-land-somos>.e-con-inner{position:relative;z-index:1} .elementor-kit-6 .kh-land-somos::after{ content:"";position:absolute;width:560px;height:560px;border-radius:50%; top:-170px;left:-160px;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(10,236,197,.13) 0%,transparent 62%); filter:blur(70px)} /* --- El alcance: halo azul izquierda + el "+" de lo que se suma, derecha. Balanceada en si misma; se conserva de la v1 --- */ .elementor-kit-6 .kh-land-incluye{position:relative;overflow:hidden} .elementor-kit-6 .kh-land-incluye>.e-con-inner{position:relative;z-index:1} .elementor-kit-6 .kh-land-incluye::after{ content:"+" / "";position:absolute;top:24px;right:2vw;z-index:0;pointer-events:none; font-family:Rajdhani,sans-serif;font-weight:700;line-height:.75; font-size:clamp(130px,15vw,220px);color:#383B6B;opacity:.5} .elementor-kit-6 .kh-land-incluye::before{ content:"";position:absolute;width:560px;height:560px;border-radius:50%; top:-200px;left:-170px;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(0,50,246,.16) 0%,transparent 62%); filter:blur(80px)} /* --- Portafolio (pozo): nodos centrados; la luz pasa ABAJO-IZQUIERDA --- */ .elementor-kit-6 .kh-land-port{position:relative;overflow:hidden} .elementor-kit-6 .kh-land-port>.e-con-inner{position:relative;z-index:1} .elementor-kit-6 .kh-land-port::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(122,149,255,.14) 1.2px,transparent 1.7px); background-size:28px 28px; -webkit-mask-image:radial-gradient(720px 460px at 50% 0%,#000 15%,transparent 78%); mask-image:radial-gradient(720px 460px at 50% 0%,#000 15%,transparent 78%)} .elementor-kit-6 .kh-land-port::before{ content:"";position:absolute;width:640px;height:640px;border-radius:50%; bottom:-260px;left:-190px;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(10,236,197,.10) 0%,transparent 60%); filter:blur(90px)} /* --- El problema: el "!" baja al vacio que queda bajo la tarjeta-respuesta (el bloque de mini-tarjetas ya pesa a la izquierda: el glifo contrapesa y llena ese hueco) --- */ .elementor-kit-6 .kh-land-dol{position:relative;overflow:hidden;overflow:clip} .elementor-kit-6 .kh-land-dol>.e-con-inner{position:relative;z-index:1} .elementor-kit-6 .kh-land-dol::after{ content:"!" / "";position:absolute;bottom:28px;right:6vw;z-index:0;pointer-events:none; font-family:Rajdhani,sans-serif;font-weight:700;line-height:.75; font-size:clamp(130px,15vw,220px); color:var(--e-global-color-khalerta);opacity:.10} /* --- Referencias: la cita, arriba-izquierda --- */ .elementor-kit-6 .kh-land-testi{position:relative;overflow:hidden} .elementor-kit-6 .kh-land-testi>.e-con-inner{position:relative;z-index:1} .elementor-kit-6 .kh-land-testi::after{ content:"“" / "";position:absolute;top:2px;left:2vw;z-index:0;pointer-events:none; font-family:Rajdhani,sans-serif;font-weight:700;line-height:1; font-size:clamp(150px,17vw,250px); color:var(--e-global-color-d49ac81);opacity:.09} /* --- Como se empieza: el camino 01→04. v2: khsecbr en vez de khstrong, trazos mas largos y de borde a borde de la seccion --- */ /* v3 2026-08-26: el .elementor-kit-6 era `.kh-land-pasos .e-grid`, o sea CUALQUIER rejilla de la seccion. Al pasar la seccion a dos columnas aparecio una segunda rejilla (el reparto contenido|foto) y el camino se dibujaba tambien sobre ella, cruzando la seccion por detras de la foto. Ahora apunta solo a la rejilla de las tarjetas, por su clase. v4 2026-08-26 (orden del operador): las DOS RECTAS pasan a ser UN CIRCULO que gira en el sentido de las agujas del reloj, detras de las tarjetas. Ya no hace falta calcular donde empieza cada fila. - Tamano FIJO de 440 px. Se intento sacar el lado menor de la rejilla con `aspect-ratio:1` + `width:100%` + `max-height:100%` y NO funciona: `aspect-ratio` solo gobierna el lado que esta en `auto`, asi que con el ancho al 100 % deriva el alto, y cuando `max-height` lo recorta el ancho no se recalcula. Salia una elipse de 632x467. El lado menor de la rejilla, medido en toda la banda de escritorio (unica donde existe esta decoracion), va de 467 a 512: 1440 da 632x467, 1200 da 563x512, 1100 da 509x604 y 1025 da 469x650. v5.1 2026-08-26: el operador subio el circulo a 500 de diametro (paso primero por 440 y por 480). El lado menor de la rejilla es 467 a 1440 y 469 a 1025, asi que a 500 el circulo ASOMA unos 16 px por lado en los extremos de la banda, y algo menos en el medio (1100 da 509, 1200 da 512). Asoma sobre el fondo de la seccion, no sobre otro contenido. Los radios de la mascara van con el diametro para conservar el anillo de 3 px: 247 a 250. - Centrado por el CENTRO (`left/top:50%` + `translate(-50%,-50%)`). NO vale `inset:0` + `margin:auto`: `inset:0` fija los cuatro lados, la caja se estira al ancho Y al alto del bloque y `aspect-ratio` se queda sin lado libre que derivar. Salia una ELIPSE de 632x467. - Los trazos son un `repeating-conic-gradient` (3 grados de trazo y 3 de hueco, 60 trazos) recortado a un anillo de 3 px con mascara radial. Con `border:3px dashed` el guion del navegador sale diminuto y no se parece a los 14 px del trazo que habia; a radio 220 estos 3 grados dan ~11,5 px de arco. La mascara lleva la forma EXPLICITA (`circle`) y los radios en PIXELES. Con `radial-gradient(farthest-side, ... calc(100% - 2px))` no salia un anillo: sin forma explicita el gradiente es una ELIPSE, y en una elipse el `%` de la parada de color se mide sobre un radio que cambia con el angulo, asi que el anillo salia de grosor variable y, cruzado con las cunas del conic, parecian RADIOS. Como el circulo mide 440 fijos, los pixeles se pueden escribir: 217 a 220. - `z-index:-1`: se ve por los huecos entre tarjetas y por los bordes, igual que se veian las rectas. */ .elementor-kit-6 .kh-land-pasos .kh-pasos-flujo{position:relative;z-index:0} @media (min-width:1025px){ .elementor-kit-6 .kh-land-pasos .kh-pasos-flujo::before{ content:"";position:absolute;left:50%;top:50%;z-index:-1; transform:translate(-50%,-50%); width:500px;height:500px;pointer-events:none;opacity:0; background:repeating-conic-gradient( var(--e-global-color-khsecbr) 0 3deg,transparent 3deg 6deg); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 247px,#000 247px 250px,transparent 250px); mask:radial-gradient(circle at 50% 50%, transparent 0 247px,#000 247px 250px,transparent 250px)} /* Menos movimiento: el circulo no aparece ni gira, simplemente esta. */ @media (prefers-reduced-motion:reduce){ .elementor-kit-6 .kh-land-pasos .kh-pasos-flujo::before{opacity:1} } } /* --- FAQ: en la landing el "?" pasa a la IZQUIERDA (en el resto del sitio sigue a la derecha) --- */ .elementor-kit-6 .kh-land-faq.kh-faq-sec::after{right:auto;left:2vw} /* Movimiento, solo si el visitante no lo tiene reducido */ @media (prefers-reduced-motion:no-preference){ .elementor-kit-6 .kh-land-somos::after{animation:khderiva 18s ease-in-out infinite alternate} .elementor-kit-6 .kh-land-incluye::before{animation:khderiva 22s ease-in-out infinite alternate-reverse} .elementor-kit-6 .kh-land-port::before{animation:khderiva 26s ease-in-out infinite alternate} @keyframes khpasosgiro{ from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes khpasosentra{to{opacity:1}} /* El circulo entra cuando la CUARTA tarjeta acaba. El retardo de las tarjetas no es CSS (computa 0s): Elementor escalona por JavaScript el momento de anadir `animated`. La ultima lo recibe a los 300 ms y corre 0,75 s, luego acaba a los 1.050 ms. `:has(...:last-child.animated)` es cierto en ese instante inicial, asi que el retardo que falta es 0,75 s. */ .elementor-kit-6 .kh-land-pasos .kh-pasos-flujo:has(> .elementor-element:last-child.animated)::before{ animation:khpasosentra .75s ease .75s forwards, khpasosgiro 30s linear .75s infinite} } /* Los glifos se apagan en movil, como el "?" del FAQ */ @media (max-width:767px){ .elementor-kit-6 .kh-land-incluye::after, .elementor-kit-6 .kh-land-dol::after, .elementor-kit-6 .kh-land-testi::after{display:none} } /* ============================================================ FORMULARIO v2 2026-08-26 marcador: form-v2 Orden del operador: nombre+telefono y empresa+equipos en pareja, mejor espaciado, casilla de politica de datos y el boton igual al verde principal del sitio. Va al final del kit a proposito: las reglas .kh-form de mas arriba usan !important y aqui se las gana por orden. ============================================================ */ /* El formulario reparte el aire; los campos ya no van pegados */ .kh-form .wpcf7-form{display:flex;flex-direction:column;gap:14px} /* Pareja de campos. En movil se apilan */ .kh-form .kh-f-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:600px){.kh-form .kh-f-fila{grid-template-columns:1fr}} /* Envoltorios que no deben ocupar un hueco de la columna */ .kh-form .kh-f-oculto{display:none} /* El captcha solo ocupa sitio si su plugin lo pinta de verdad */ .kh-form .kh-f-turnstile:not(:has(*)){display:none} /* --- Casilla de la politica de tratamiento de datos --- */ /* CF7 pone .wpcf7-form-control en el SPAN que envuelve la casilla, no en el input: sin esto hereda la caja de campo (borde, fondo y relleno). */ .kh-form .wpcf7-form .kh-f-acepta .wpcf7-form-control.wpcf7-acceptance{ width:auto!important;padding:0!important;border:0!important; border-radius:0!important;background:transparent!important} .kh-form .kh-f-acepta .wpcf7-list-item{margin:0} .kh-form .wpcf7-form .kh-f-acepta label{padding:3px 0; display:flex;align-items:flex-start;gap:10px;margin:0;cursor:pointer; font-family:Inter,sans-serif;font-size:13px;font-weight:400;line-height:1.55; color:var(--e-global-color-khmuted)} .kh-form .wpcf7-form .kh-f-acepta input[type="checkbox"]{ flex:none;width:20px;height:20px;margin:1px 0 0;cursor:pointer; accent-color:var(--e-global-color-d49ac81)} .kh-form .kh-f-acepta a{ color:var(--e-global-color-d49ac81);text-decoration:underline; text-underline-offset:2px;transition:color .16s ease} .kh-form .kh-f-acepta a:hover{color:var(--e-global-color-khbtnhov)} .kh-form .kh-f-acepta a:focus-visible{ outline:2px solid var(--e-global-color-d49ac81);outline-offset:2px;border-radius:3px} .kh-form .kh-f-acepta .wpcf7-not-valid-tip{margin-left:30px} /* --- Boton: el mismo verde principal del sitio --- Tipografia, caja y color calcados del .elementor-button teal (Rajdhani 600 14 mayusculas, 12/24, radio 8, filete 1px) y el mismo hover/pulsacion del estandar de botones del kit. */ .kh-form .wpcf7-submit{ margin-top:6px!important; padding:12px 46px 12px 24px!important; border:1px solid var(--e-global-color-d49ac81)!important; border-radius:8px!important; font-family:Rajdhani,sans-serif!important; font-weight:600!important;font-size:14px!important;line-height:1.4!important; text-transform:uppercase!important;letter-spacing:normal!important; color:var(--e-global-color-khbtntx)!important; background-color:var(--e-global-color-d49ac81)!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1E42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 22px center!important; background-size:17px 17px!important; transition:background-color .16s ease,color .16s ease,border-color .16s ease, box-shadow .16s ease,transform .16s ease!important} .kh-form .wpcf7-submit:hover, .kh-form .wpcf7-submit:focus-visible{ background-color:var(--e-global-color-khbtnhov)!important; border-color:var(--e-global-color-khbtnhov)!important; color:var(--e-global-color-khbtntx)!important; transform:translateY(-2px)!important; box-shadow:0 7px 20px var(--e-global-color-khbtnglow), 0 0 0 3px var(--e-global-color-khbtnglow)!important; background-position:right 18px center!important} .kh-form .wpcf7-submit:active{ background-color:var(--e-global-color-khbtnact)!important; border-color:var(--e-global-color-khbtnact)!important; transform:none!important;box-shadow:none!important} /* ============================================================ CARRUSEL v2 2026-08-26 marcador: carrusel-ref Piel del widget `testimonial-carousel` (Elementor Pro) para que sus diapositivas se vean EXACTAMENTE como las tarjetas que tenia la seccion. El fondo, filete, radio y relleno los pone el propio widget sobre `.swiper-slide`; aqui solo va lo que el widget no ofrece: el icono de comilla y el color de flechas y puntos. Sustituye al bloque de la pista scroll-snap de la version anterior, que se retiro junto con su contenedor. ============================================================ */ /* Icono de comilla (marcador: kh-testi-glifo). El widget no lo trae. La CAJA va en ::before y el GLIFO en ::after por mascara: si se pone todo en un solo pseudo, la mascara recorta tambien el fondo y el icono sale del color de la caja y sin caja. Los dos colores, por token. */ .elementor-kit-6 .kh-land-testi-car .elementor-testimonial{ position:relative;padding-top:68px} /* Los puntos respiran con el relleno mayor de la tarjeta */ /* 4 clases a proposito: el css del widget se encola despues del kit y a igual especificidad (3) ganaba su padding-bottom de 40. */ .elementor-kit-6 .elementor-widget.kh-land-testi-car .elementor-main-swiper{padding-bottom:52px} .elementor-kit-6 .kh-land-testi-car .elementor-testimonial::before{ content:"";position:absolute;top:0;left:0;width:48px;height:48px; border-radius:12px;background-color:var(--e-global-color-khchipbg)} .elementor-kit-6 .kh-land-testi-car .elementor-testimonial::after{ content:"";position:absolute;top:13px;left:13px;width:22px;height:22px; background-color:var(--e-global-color-d49ac81); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5.5C6.9 6.2 4 9.4 4 13.5V19h7v-6H7.6c.2-2.3 1.7-4 3.9-4.6L11 5.5Zm9.4 0c-4.1.7-7 3.9-7 8V19h7v-6h-3.4c.2-2.3 1.7-4 3.9-4.6l-.5-2.9Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5.5C6.9 6.2 4 9.4 4 13.5V19h7v-6H7.6c.2-2.3 1.7-4 3.9-4.6L11 5.5Zm9.4 0c-4.1.7-7 3.9-7 8V19h7v-6h-3.4c.2-2.3 1.7-4 3.9-4.6l-.5-2.9Z'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:22px 22px;mask-size:22px 22px} /* Las diapositivas igualan altura: el filete no baila entre tarjetas */ .elementor-kit-6 .kh-land-testi-car .swiper-slide{height:auto} /* Flechas y puntos con el foco visible del sitio */ .elementor-kit-6 .kh-land-testi-car .elementor-swiper-button:focus-visible{ outline:2px solid var(--e-global-color-d49ac81);outline-offset:3px;border-radius:6px} .elementor-kit-6 .kh-land-testi-car .swiper-pagination-bullet{ transition:background-color .16s ease,transform .16s ease} .elementor-kit-6 .kh-land-testi-car .swiper-pagination-bullet-active{transform:scale(1.25)} /* CARRUSEL v2.1 2026-08-26 (orden del operador): SIN FLECHAS EN MOVIL. Las flechas van `position:absolute` a los lados del swiper. Con una sola diapositiva por vista la tarjeta ocupa casi todo el ancho y las flechas caen DENTRO de ella. Medido: a 390 la anterior ocupa x 26-46 sobre una tarjeta que empieza en 25, y la siguiente x 344-364 sobre una que acaba en 365 (las dos, enteras dentro); a 767, 12 px de solape por la izquierda y 11 por la derecha. Se retiran del todo con `display:none`, que las saca tambien del arbol de accesibilidad: en movil la navegacion queda en el gesto de deslizar, los tres puntos (que siguen siendo pulsables) y el autoplay cada 5 s. A 1024 el solape es de 5 px y solo en la flecha izquierda: NO se toca, queda como decision pendiente del operador. */ @media (max-width:767px){ /* CARRUSEL v2.2: cuatro clases. Con tres, `e-swiper.min.css` empataba en especificidad (0,3,0) con `.elementor-element .swiper ~ .elementor-swiper-button` y ganaba por ir despues en la cascada (leccion 68). */ .elementor-kit-6 .elementor-widget.kh-land-testi-car .elementor-swiper-button{display:none} /* CARRUSEL v2.3: sin flechas, el swiper no necesita ceder el 5 % que Elementor le quita para hacerles sitio. Al 95 % el ancho salia FRACCIONARIO y la diapositiva, que Swiper calcula en enteros, lo desbordaba por decimas: el overflow:hidden se comia el filete de 1 px de un lado. Al 100 % el ancho vuelve a ser entero y se recuperan 18-19 px. Cuatro clases por lo mismo que en v2.2: la regla de Elementor va despues. */ .elementor-kit-6 .elementor-widget.kh-land-testi-car .elementor-main-swiper{width:100%} } /* ============================================================ FORMULARIO v3 2026-08-26 marcador: form-v3 Orden del operador: casilla de verificacion personalizada, bordes de campo mas claros y hover con el borde en verde corporativo. Va al final del kit a proposito: las reglas `.kh-form` de mas arriba usan !important y aqui se las gana por orden. ============================================================ */ /* --- Bordes de campo: de khelev a khsecbr --- khelev #2A2C55 sobre el fondo del campo (khbg #121430) da 1,36:1 y no se veia. khsecbr #6C6F9E da 3,77:1 contra el campo y 3,35:1 contra el panel: es el token mas contenido que CUMPLE el minimo 3:1 que WCAG 2.2 (1.4.11) exige al contorno de un control. khstrong seguiria suspendiendo (1,72). */ .kh-form .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]):not(.wpcf7-not-valid){ border-color:var(--e-global-color-khsecbr)!important} /* --- Hover: el borde pasa al verde corporativo --- Se declara ANTES que el foco para que, al usar el teclado, el foco (que ademas trae el halo) mande sobre el hover. */ /* FORMULARIO v3.1: fuera los campos en error. Con `.wpcf7-not-valid` el borde debe seguir siendo el neutro; ponerlo verde al pasar el raton dice "correcto" justo donde hay un fallo. */ .kh-form .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]):not(.wpcf7-not-valid):hover{ border-color:var(--e-global-color-d49ac81)!important} .kh-form .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]):focus{ border-color:var(--e-global-color-d49ac81)!important; box-shadow:0 0 0 4px var(--e-global-color-khbtnglow)!important} /* --- Casilla de verificacion, dibujada por nosotros --- Antes era la casilla nativa del navegador con `accent-color`: sin marcar se pinta como un cuadro BLANCO del sistema, que sobre el panel oscuro cantaba. Con `appearance:none` la caja pasa a ser nuestra y usa los tokens: filete khsecbr sobre khbg, y al marcarla se llena de verde corporativo con el tick en khbtntx. El color del tick va horneado en el data-URI porque dentro de un data-URI no se puede usar `var()`; es la misma convencion que ya siguen la flecha del boton de envio y el chevron del select en este kit. */ .kh-form .wpcf7-form .kh-f-acepta input[type="checkbox"]{ appearance:none;-webkit-appearance:none; flex:none;width:20px;height:20px;margin:1px 0 0;cursor:pointer; border:1.5px solid var(--e-global-color-khsecbr); border-radius:6px; background-color:var(--e-global-color-khbg); background-repeat:no-repeat;background-position:center;background-size:12px 12px; transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease} /* Basta con pasar por la fila entera: la etiqueta ya es el area pulsable */ .kh-form .wpcf7-form .kh-f-acepta label:hover input[type="checkbox"], .kh-form .wpcf7-form .kh-f-acepta input[type="checkbox"]:hover{ border-color:var(--e-global-color-d49ac81)} .kh-form .wpcf7-form .kh-f-acepta input[type="checkbox"]:focus-visible{ outline:none; border-color:var(--e-global-color-d49ac81); box-shadow:0 0 0 4px var(--e-global-color-khbtnglow)} .kh-form .wpcf7-form .kh-f-acepta input[type="checkbox"]:checked{ background-color:var(--e-global-color-d49ac81); border-color:var(--e-global-color-d49ac81); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1E42' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")} /* --- FORMULARIO v3.2 2026-08-26 --- (a) Cursor del boton deshabilitado: BLOQUEADO, no "cargando". El boton esta deshabilitado desde que carga la pagina hasta que se marca la casilla de consentimiento, con `submitting` en falso: no hay nada procesandose. `progress` se reserva para el envio de verdad, aqui debajo. (b) La regla de bordes de v3 se acota con `:not(.wpcf7-not-valid)` para que el hover verde no alcance a un campo en error. OJO: al medirlo se vio que el rojo de `.kh-form .wpcf7-not-valid` NUNCA se aplicaba — esa regla (0,2,0) pierde contra la regla base de campo (0,5,0), las dos con !important —, asi que no fue v3 quien lo rompio. Se remata en v3.3. */ /* (c) ORDEN DEL OPERADOR: deshabilitado = INERTE, sin ningun efecto, para que al usuario le quede claro que no se puede pulsar. Un control deshabilitado SIGUE casando `:hover` en el navegador, asi que sin esto el boton seguia levantandose 2 px, encendiendo el halo, cambiando al verde de hover y moviendo la flecha. Se anulan los cuatro efectos y la transicion, y se fijan color y posicion de la flecha a los de reposo. El atenuado (opacidad) se conserva: ESE es el aviso de inactivo. */ .kh-form .wpcf7-submit:disabled, .kh-form .wpcf7-submit:disabled:hover, .kh-form .wpcf7-submit:disabled:focus, .kh-form .wpcf7-submit:disabled:focus-visible, .kh-form .wpcf7-submit:disabled:active{ cursor:not-allowed!important; transform:none!important; box-shadow:none!important; transition:none!important; background-color:var(--e-global-color-d49ac81)!important; border-color:var(--e-global-color-d49ac81)!important; color:var(--e-global-color-khbtntx)!important; background-position:right 22px center,0 0!important} /* Mientras se envia de verdad si procede el cursor de "procesando" */ .kh-form .wpcf7-form.submitting .wpcf7-submit:disabled{cursor:progress!important} /* --- FORMULARIO v3.3 2026-08-26: el campo en error, en rojo de verdad --- `.kh-form .wpcf7-not-valid{border-color:khalerta!important}` existe en el kit desde el principio pero nunca se aplico: es (0,2,0) y pierde contra la regla base de campo, que es (0,5,0) y tambien lleva !important. El campo en error se venia viendo con el borde normal. Con los bordes aclarados en v3 eso paso de inocuo a al reves: los campos correctos son khsecbr #6C6F9E y el de error se quedaba en khelev #2A2C55, es decir MAS APAGADO que uno correcto. Aqui se le da la especificidad que le faltaba. El color no se inventa: es el que el kit ya declaraba. El aviso en rojo bajo el campo sigue siendo el mensaje real; el borde solo acompana, que el color nunca debe ser el unico indicador (WCAG 1.4.1). */ .kh-form .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type="hidden"]).wpcf7-not-valid{ border-color:var(--e-global-color-khalerta)!important} /* ============================================================ BANDA DE CIERRE DEL SITIO v2 2026-08-26 marcador: banda-sitio Orden del operador: la banda de cierre del resto del sitio pasa a llevar la piel de la de la landing, conservando cada pagina su propio contenido. Afecta a las 9 paginas con `.kh-banda`: inicio, nosotros y las siete lineas de servicio. `:not(.kh-banda-marca)` excluye a la landing, que ya la trae por su clase propia; sin eso le saldria una marca de agua duplicada. Las propiedades de caja (radio, relleno, filete y sombra) NO van aqui: son ajustes nativos de cada contenedor. ============================================================ */ /* Degradado de marca + marca de agua de circuito abajo a la izquierda. La marca de agua va como capa de fondo, no como elemento hijo, para no tener que anadir un widget en cada pagina. El blanco al 9 % va horneado en el data-URI porque dentro de uno no se puede usar `var()`. */ .elementor-kit-6 .kh-banda:not(.kh-banda-marca){ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M10 200h70v-50h60'/%3E%3Cpath d='M10 160h40v-90h70'/%3E%3Cpath d='M60 200v-20'/%3E%3Cpath d='M140 150v-60h50'/%3E%3Cpath d='M120 70h90v40h70'/%3E%3Cpath d='M210 110v60h80'/%3E%3Cpath d='M250 70h50'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.09' stroke='none'%3E%3Ccircle cx='140' cy='150' r='5'/%3E%3Ccircle cx='120' cy='70' r='5'/%3E%3Ccircle cx='190' cy='90' r='5'/%3E%3Ccircle cx='210' cy='110' r='5'/%3E%3Ccircle cx='290' cy='170' r='5'/%3E%3Ccircle cx='300' cy='70' r='5'/%3E%3Ccircle cx='80' cy='200' r='5'/%3E%3Ccircle cx='50' cy='160' r='5'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg,var(--e-global-color-khbrand) 0%,#1330B8 45%,var(--e-global-color-khsurface) 100%); background-repeat:no-repeat,no-repeat; background-position:-28px calc(100% + 22px),0 0; background-size:310px 213px,auto} /* --- BANDA DE CIERRE DEL SITIO v3 2026-08-26: el foco, replicado --- Copia literal del foco de la landing (bloque `kh-banda-marca`), no una version propia: un elemento hijo con `opacity` de 0 a 1, que aparece y desaparece EN EL SITIO. La v2.1 lo montaba como capa de fondo que crecia con `background-size`, y como un fondo se posiciona por su esquina, el foco entraba y salia deslizandose desde arriba a la izquierda. El hijo `.kh-banda-spot` se anade a cada banda por EMCP, con los mismos ajustes que el de la landing. */ .elementor-kit-6 .kh-banda:not(.kh-banda-marca)>.elementor-element:not(.kh-banda-spot){ position:relative;z-index:1} .elementor-kit-6 .kh-banda:not(.kh-banda-marca)>.kh-banda-spot{ position:absolute;inset:0;z-index:0;margin:0; pointer-events:none;opacity:0;transition:opacity .5s ease; background:radial-gradient(340px 340px at var(--mx,50%) var(--my,40%),rgba(10,236,197,.28),transparent 65%)} .elementor-kit-6 .kh-banda:not(.kh-banda-marca):hover>.kh-banda-spot{opacity:1} /* Rejilla enmascarada que se desvanece desde arriba. Sustituye al destello en bucle del estandar `.kh-banda`, que comparte este mismo `::before`: hay que anular su ancho, su desenfoque y su animacion. */ .elementor-kit-6 .kh-banda:not(.kh-banda-marca)::before{ inset:0;width:auto;height:auto;filter:none;animation:none; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image:radial-gradient(640px 420px at 50% 0%,#000 20%,transparent 75%); mask-image:radial-gradient(640px 420px at 50% 0%,#000 20%,transparent 75%)} /* Orbe teal difuminado que deriva despacio, abajo a la derecha */ .elementor-kit-6 .kh-banda:not(.kh-banda-marca)::after{ content:"";position:absolute;width:380px;height:380px;border-radius:50%; background:rgba(10,236,197,.28);filter:blur(90px);bottom:-190px;right:-110px;pointer-events:none} @media (prefers-reduced-motion:no-preference){ .elementor-kit-6 .kh-banda:not(.kh-banda-marca)::after{animation:khderiva 14s ease-in-out infinite alternate}} /* ============================================================ FORMULARIO v4: la lista desplegable «Servicio de interes» (2026-08-27, orden del operador para la pagina de contacto) El bloque CF7 de mas arriba ya daba al select la caja de campo y un chevron. Aqui se completa lo que hacia falta para que la lista sea del sitio y no del sistema operativo: - la LISTA ABIERTA (`option`) heredaba los colores del sistema y sobre el tema oscuro salia blanca; - el estado MARCADOR, mientras no se ha elegido servicio; - el chevron, que ahora acompana al borde en hover y en foco. El color del chevron va horneado en el data-URI porque ahi dentro no funciona `var()`: misma convencion que la flecha del boton y el tick de la casilla de aceptacion. ============================================================ */ .kh-form .wpcf7-form select.wpcf7-form-control{cursor:pointer} /* La lista abierta. Windows, Linux y Android la respetan; el popup nativo de Safari en macOS la ignora y ahi se vera el estilo del sistema. */ .kh-form .wpcf7-form select.wpcf7-form-control option{ background-color:var(--e-global-color-khsurface); color:var(--e-global-color-secondary)} .kh-form .wpcf7-form select.wpcf7-form-control option[value=""]{ color:var(--e-global-color-khmuted)} /* Estado marcador: aun no se ha elegido servicio. CF7 no pone el atributo `required` (solo `aria-required`), asi que `:required:invalid` no vale. */ .kh-form .wpcf7-form select.wpcf7-form-control:has(option[value=""]:checked){ color:var(--e-global-color-khmuted)!important} /* El chevron sigue al borde: verde corporativo en hover y en foco. Los `:not()` NO son decorativos: suben la regla a (0,5,1) para ganarle a la regla base de campo, que puntua (0,5,0) y tambien usa !important. Sin ellos el chevron no se pinta. Ver la cabecera de kit37.php. */ .kh-form .wpcf7-form select.wpcf7-form-control:not(.wpcf7-submit):hover, .kh-form .wpcf7-form select.wpcf7-form-control:not(.wpcf7-submit):focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230AECC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important} /* Envoltorio propio del campo, para tener donde agarrarse mas adelante. */ .kh-form .kh-f-select{display:block} /* ============================================================ BLOQUE VIP-ART 2026-09-01 (orden del operador) marcador: kh-vip-art Arte del Soporte TI VIP en /soporte-ti/ (662): la cola estandar, la via VIP que adelanta, y el tiempo del SLA contra su mitad. Misma receta que los artes de hero (.kh-hero-artL): el SVG vive en un widget html y aqui viven color y movimiento. Diferencia deliberada: aqui NO hay un solo hex literal, todo va por token del kit. El movimiento se declara solo bajo prefers-reduced-motion:no-preference, como el resto del bloque de movimiento del kit. ============================================================ */ .kh-vip-art svg{display:block;width:100%;height:auto;overflow:visible} .kh-vip-art .kh-tz{stroke:var(--e-global-color-khstrong);stroke-width:1.4;fill:none} .kh-vip-art .kh-ac{stroke:var(--e-global-color-d49ac81);stroke-width:1.8;fill:none} .kh-vip-art .kh-rel{fill:var(--e-global-color-khsurface)} .kh-vip-art .kh-pt{fill:var(--e-global-color-d49ac81);stroke:none} .kh-vip-art .kh-guia{stroke-dasharray:3 5;stroke-width:1.2} .kh-vip-art .kh-flujo{stroke-dasharray:7 9} .kh-vip-art text{fill:var(--e-global-color-khmuted);font-family:"IBM Plex Mono","Courier New",monospace;font-size:11px;letter-spacing:.06em} /* La onda de llegada solo existe mientras se anima: en reposo es invisible. */ .kh-vip-art .kh-onda{opacity:0;transform-box:fill-box;transform-origin:center} .kh-vip-art .kh-mitad{transform-box:fill-box;transform-origin:left center} @media (prefers-reduced-motion:no-preference){ /* Un solo reloj de 6 s para las tres piezas: el ticket adelanta, la barra llega a la mitad y la mesa acusa recibo, en ese orden. */ .kh-vip-art .kh-flujo{animation:khlflujo 1.5s linear infinite} .kh-vip-art .kh-adel{animation:khvipadel 6s cubic-bezier(.16,.8,.3,1) infinite} .kh-vip-art .kh-mitad{animation:khvipmitad 6s cubic-bezier(.16,.8,.3,1) infinite} .kh-vip-art .kh-onda{animation:khviponda 6s ease-out infinite} } @keyframes khvipadel{ 0%{transform:translateX(0);opacity:0} 6%{opacity:1} 42%,88%{transform:translateX(216px);opacity:1} 100%{transform:translateX(216px);opacity:0} } @keyframes khvipmitad{ 0%{transform:scaleX(0);opacity:0} 6%{opacity:1} 42%,88%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0} } @keyframes khviponda{ 0%,38%{transform:scale(1);opacity:0} 46%{opacity:.65} 70%,100%{transform:scale(1.45);opacity:0} } /* --- CTA del Soporte TI VIP: efecto constante (2026-09-01, orden del operador) --- Marcador: kh-vip-cta. Misma receta que el boton de WhatsApp (.kh-wa con khondaverde): una onda de atencion en bucle que se DETIENE al pasar el cursor o al enfocar, para no competir con el halo del hover del estandar. Dos diferencias deliberadas con .kh-wa: el color sale del token del propio boton (khbtnglow) en vez de un rgba literal, y el ciclo es algo mas lento. */ @keyframes khvipatencion{ 0% {box-shadow:0 8px 22px var(--e-global-color-khbtnglow),0 0 0 0 var(--e-global-color-khbtnglow)} 70% {box-shadow:0 8px 22px var(--e-global-color-khbtnglow),0 0 0 14px transparent} 100%{box-shadow:0 8px 22px var(--e-global-color-khbtnglow),0 0 0 0 transparent} } @media (prefers-reduced-motion:no-preference){ .elementor-kit-6 .elementor-widget-button.kh-vip-cta .elementor-button{animation:khvipatencion 2.9s ease-out infinite} } .elementor-kit-6 .elementor-widget-button.kh-vip-cta .elementor-button:hover, .elementor-kit-6 .elementor-widget-button.kh-vip-cta .elementor-button:focus{animation:none} /* --- Seccion VIP: marca de agua en movimiento y compactado (2026-09-01, orden del operador) --- Marcador: kh-vip-sec. La marca de agua sigue la receta que ya usan .kh-faq-sec, .kh-land-incluye, .kh-land-dol y .kh-land-testi: un glifo Rajdhani 700 puesto por ::after, con `content: "X" / ""` (el alt vacio lo oculta a los lectores de pantalla). Dos diferencias: el color va por token en vez de hex literal, y aqui la marca AVANZA. El glifo es un chevron doble porque lo que hace el servicio es justamente eso: adelantar en la cola. */ .kh-vip-sec{position:relative} /* El contenido por encima de la marca, misma receta que .kh-hero-l. Sin esto el ::after posicionado pinta por encima del texto. */ .kh-vip-sec>.e-con-inner{position:relative;z-index:1} .kh-vip-sec::after{ content:"»" / ""; position:absolute;right:2vw;bottom:2px;z-index:0;pointer-events:none; font-family:Rajdhani,sans-serif;font-weight:700;line-height:.75;letter-spacing:-.02em; font-size:clamp(120px,13vw,190px); color:var(--e-global-color-khstrong);opacity:.42; } /* Menos aire entre las piezas de la columna de texto. Ojo: el valor efectivo NO sale de --gap sino de --row-gap, que la hoja base de Elementor fija en .e-con como var(--widgets-spacing-row,20px). Aqui se suma cinco veces. */ .kh-vip-col{--row-gap:12px} @media (prefers-reduced-motion:no-preference){ .kh-vip-sec::after{animation:khvipmarca 9s ease-in-out infinite} } /* Entra desvanecida, avanza y se va: sin salto al reiniciar el bucle. */ @keyframes khvipmarca{ 0% {transform:translateX(-18px);opacity:0} 22% {opacity:.42} 70% {opacity:.42} 100%{transform:translateX(30px);opacity:0} } /* ============================================================ LICENCIAMIENTO OFICIAL (pagina 555) — marcador: kh-lic Diagnostico medido el 2026-09-01: el hueco de 794x314 px a la derecha del titular NO lo producia el contenido, sino que 86edcc3 era flex row con flex-wrap:wrap y su segundo hijo (a3ab1aa) estaba en _flex_size:grow SIN width. "grow" implica flex-shrink:0, asi que ese hijo no podia ceder y la fila se partia por construccion. La seccion pasa a columna: no hay linea que repartir, luego no puede quedar lateral muerto. Las dos columnas al 50 % (7bac859 / 2f49836, que ademas llevaban align-items:center y encogian las ocho marcas) se disuelven y las marcas cuelgan directas como celdas. Movil primero. El tramo de escritorio arranca en 1025px porque por debajo manda el propio @media de Elementor (max-1024 y min-768). Ni un hex literal: aqui solo hay maquetacion. ============================================================ */ /* Rejilla de marcas: movil, una columna */ .elementor-555 .elementor-element.kh-lic-rej{display:grid;grid-template-columns:minmax(0,1fr);--gap:16px;--row-gap:16px;--column-gap:16px;gap:16px;align-items:stretch} /* Defensivo: si alguien devuelve el contenedor a "boxed", sus hijos colgarian de .e-con-inner y la rejilla se aplicaria al envoltorio. */ .elementor-555 .elementor-element.kh-lic-rej>.e-con-inner{display:contents} /* Sin esto, el min-content de cada celda vuelve a mandar sobre la rejilla. */ .elementor-555 .elementor-element.kh-lic-rej>.e-con{min-width:0} /* Tablet: dos columnas */ @media (min-width:768px) and (max-width:1024px){ .elementor-555 .elementor-element.kh-lic-rej{grid-template-columns:repeat(2,minmax(0,1fr));--gap:20px 24px;--row-gap:20px;--column-gap:24px;gap:20px 24px} } /* Escritorio: cuatro columnas, dos filas exactas de cuatro marcas */ @media (min-width:1025px){ .elementor-555 .elementor-element.kh-lic-rej{grid-template-columns:repeat(4,minmax(0,1fr));--gap:24px;--row-gap:24px;--column-gap:24px;gap:24px} } /* Cabecera de la seccion: sus dos columnas ya llevan ancho propio, asi que la canaleta horizontal sobra; la vertical es la que separa al apilarse. */ .elementor-555 .elementor-element.kh-lic-cab{--gap:24px 0px;--row-gap:24px;--column-gap:0px} .elementor-555 .elementor-element.kh-lic-cab>.e-con{min-width:0} /* Que el titular no deje una palabra suelta si llega a caer en dos lineas */ .elementor-555 .elementor-element-8bb2283 .elementor-heading-title{text-wrap:balance} /* ========================================================================== BANNER DE CONSENTIMIENTO (Complianz) La paleta la pone el propio plugin desde su configuracion, con los colores del kit. Aqui solo lo que Complianz no sabe expresar. Nota de cascada: la hoja de Complianz se sirve DESPUES de esta (es la hoja 26 de 27; el kit es la 8) y sus reglas de boton son (0,3,0). Empatar no basta: las de aqui suben a (0,4,0) nombrando la clase de cada boton, sin necesidad de !important. ========================================================================== */ /* --- La ventana ---------------------------------------------------------- Se levanta como el panel flotante del sitio (.wa-widget): superficie khsurface, borde de 1 px y sombra larga. El COLOR del borde lo pone el plugin, y es khsecbr: khelev daba 1,21:1 contra el propio banner y 1,36:1 contra la pagina --no se veia--; khstrong, 1,53 y 1,72; khsecbr da 3,35 y 3,77, que es el minimo de 3:1 que WCAG 2.2 (1.4.11) exige a un contorno. La sombra del plugin queda apagada (use_box_shadow = 0) y se define aqui, con el mismo valor del panel del minichat: las dos ventanas flotantes del sitio se despegan del fondo igual. */ .cmplz-cookiebanner.cmplz-show{box-shadow:0 24px 64px rgba(0,0,0,.45)} /* --- Los botones: el estandar unico del sitio ---------------------------- Medido sobre .elementor-button del kit: 14 px, interlineado 14, peso 600, relleno 12/24 y sin alto minimo -> 40 px de alto. Complianz servia 15 px, peso 500, interlineado 20 y relleno 10 -> 45 px. El radio (8 px) y los colores ya venian bien desde la configuracion del plugin. */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{ --khglow1:var(--e-global-color-khsecglow); --khglow2:var(--e-global-color-khsecglow); min-height:0; padding:12px 24px; font-size:14px; line-height:14px; font-weight:600; transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept{ --khglow1:var(--e-global-color-khbtnglow); --khglow2:var(--e-global-color-khbtnglow); } /* Hover del sitio: aclara el fondo, eleva 2 px y enciende el halo doble. */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:focus, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus{ transform:translateY(-2px); box-shadow:0 7px 20px var(--khglow1),0 0 0 3px var(--khglow2); } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus{ background-color:var(--e-global-color-khbtnhov); border-color:var(--e-global-color-khbtnhov); color:var(--e-global-color-khbtntx); } /* Secundario: el borde NO cambia en hover. Medido en .kh-btn2 del sitio, que se queda en khsecbr y solo mueve fondo y texto. */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:focus, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus{ background-color:var(--e-global-color-khsecbg); color:var(--e-global-color-khsectxh); } /* Pulsacion: vuelve al plano y deja solo el anillo, como en el sitio. */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:active, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:active, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:active, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:active{ transform:translateY(0); box-shadow:0 0 0 3px var(--khglow2); } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:active{ background-color:var(--e-global-color-khbtnact); border-color:var(--e-global-color-khbtnact); } /* Movimiento reducido: se anula la elevacion, no el resto del efecto. */ @media (prefers-reduced-motion:reduce){ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{transition:none} .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover{transform:none} } /* --- Foco de teclado ----------------------------------------------------- La hoja generada por Complianz trae un azul fijo para el foco del interruptor de categoria que no es del sistema de diseno. */ .cmplz-cookiebanner .cmplz-consent-checkbox:focus + .cmplz-label:before, .cmplz-cookiebanner .cmplz-consent-checkbox:focus-visible + .cmplz-label:before{ box-shadow:0 0 0 2px var(--e-global-color-secondary)!important; } .cmplz-cookiebanner .cmplz-btn:focus-visible, .cmplz-cookiebanner .cmplz-category-toggle:focus-visible, #cmplz-manage-consent .cmplz-manage-consent:focus-visible{ outline:2px solid var(--e-global-color-secondary); outline-offset:3px; } /* --- Boton flotante de gestion de consentimiento ------------------------- Orden del operador (2026-09-03): reducir la pestana "Gestionar consentimiento", llevarla a la esquina inferior izquierda y sustituir el rotulo por el icono de cookies. En todos los anchos: ni una media query de ancho. Sustituye al bloque anterior ("Pestana permanente de gestion"), que estaba escrito a (1,1,0) --la misma especificidad que Complianz-- y por eso solo llegaba a aplicarse en lo que el plugin no declara. Comprobado con CSS.getMatchedStylesForNode, no leyendo hojas: de aquel bloque unicamente ganaban `font-weight` y la sombra; el fondo y el borde los ponia el plugin. Tres trampas de este control, las tres medidas: 1. Especificidad. La regla del plugin va a (1,1,0) y su hoja se sirve DESPUES del kit, asi que en empate gana el plugin. Aqui se sube a (1,2,1) con `button.cmplz-btn`, dos cosas que el boton ya lleva. No se usa `.manage-consent-1`, que depende del id del banner. 2. La posicion NO la fija `bottom`: la fija una ANIMACION con `forwards` (`animation:mc_slideIn 0s forwards`, cuyo fotograma final es `bottom:0`), y una animacion gana a una declaracion normal. Sin `animation:none` el `bottom` de aqui no se aplicaria. En :hover y :focus el plugin la reactiva con `mc_slideIn 0.5s`, por eso se anula tambien alli. 3. El rotulo ES el nombre accesible del boton, y es un nodo de texto suelto: no hay envoltorio que ocultar. Con `display:none` o `visibility:hidden` el boton se quedaria mudo para un lector de pantalla. Se desplaza con `text-indent` y se recorta con `overflow`, que lo deja fuera de la vista pero dentro del arbol de accesibilidad: se sigue anunciando como "Gestionar consentimiento". Se le pone `text-transform:none` porque la tipografia `accent` del kit lo pasaba a mayusculas y ese rotulo ya no se ve: la unica consecuencia era que las ayudas tecnicas lo leian gritado. El icono es `fas fa-cookie-bite`, del mismo mapa de SVG en linea que Elementor usa para el resto de iconos del sitio. Va como MASCARA y no como imagen de fondo, para que tome el color con `currentColor` y no quede ningun hex suelto (regla 9). El data URI no lleva ni una barra invertida, que el custom_css del kit se las come. Dos salvaguardas, ambas anadidas tras medir que hacian falta: - `@supports`: sin mascaras, el `::before` se pintaria como un DISCO MACIZO del color del texto, tapando el boton entero. Envuelto, donde no haya mascaras simplemente no se pinta. - `@media (forced-colors: active)`: en alto contraste el navegador fuerza `background-color` e ignora `currentColor`, con lo que icono y fondo salian del MISMO color y el boton quedaba como un circulo vacio, sin icono y sin rotulo. `forced-color-adjust:none` + `CanvasText` devuelven el icono. Se usan palabras clave del sistema, no hex. Geometria: simetrica al flotante de WhatsApp, que esta a right/bottom 24px y mide 60 px. Este mide 44 px: mas discreto que el CTA, y muy por encima del minimo de 24x24 px que pide la WCAG 2.5.8. Contrastes medidos: icono 9,42:1 en reposo y 12,44:1 en hover; borde 3,29:1 sobre khsurface y 3,77:1 sobre el fondo de pagina, los dos unicos fondos que hay detras. El anillo de foco NO se define aqui: lo pone la regla global del kit `.elementor-kit-6 button:focus-visible`, que lleva `!important` y pinta khsectx (#7A95FF) con 3 px de separacion. Ojo: la regla `#cmplz-manage-consent .cmplz-manage-consent:focus-visible` que hay mas arriba en este mismo fichero NUNCA gana por culpa de ese `!important` --esta muerta, y no solo para este boton--. `overflow:hidden` no recorta un outline, asi que el anillo se ve entero. */ #cmplz-manage-consent button.cmplz-btn.cmplz-manage-consent{ left:24px; right:auto; bottom:24px; width:44px; min-width:0; height:44px; padding:0; border-radius:999px; border:1px solid var(--e-global-color-khsecbr); background-color:var(--e-global-color-khsurface); color:var(--e-global-color-khbody); box-shadow:0 10px 24px rgba(0,0,0,.45); animation:none; text-indent:-9999px; text-transform:none; overflow:hidden; white-space:nowrap; transition:background-color .2s ease,color .2s ease; } @supports ((-webkit-mask-image:url(a.svg)) or (mask-image:url(a.svg))){ #cmplz-manage-consent button.cmplz-btn.cmplz-manage-consent::before{ content:""; position:absolute; inset:0; text-indent:0; background-color:currentColor; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M510.52%20255.82c-69.97-.85-126.47-57.69-126.47-127.86-70.17%200-127-56.49-127.86-126.45-27.26-4.14-55.13.3-79.72%2012.82l-69.13%2035.22a132.221%20132.221%200%200%200-57.79%2057.81l-35.1%2068.88a132.645%20132.645%200%200%200-12.82%2080.95l12.08%2076.27a132.521%20132.521%200%200%200%2037.16%2072.96l54.77%2054.76a132.036%20132.036%200%200%200%2072.71%2037.06l76.71%2012.15c27.51%204.36%2055.7-.11%2080.53-12.76l69.13-35.21a132.273%20132.273%200%200%200%2057.79-57.81l35.1-68.88c12.56-24.64%2017.01-52.58%2012.91-79.91zM176%20368c-17.67%200-32-14.33-32-32s14.33-32%2032-32%2032%2014.33%2032%2032-14.33%2032-32%2032zm32-160c-17.67%200-32-14.33-32-32s14.33-32%2032-32%2032%2014.33%2032%2032-14.33%2032-32%2032zm160%20128c-17.67%200-32-14.33-32-32s14.33-32%2032-32%2032%2014.33%2032%2032-14.33%2032-32%2032z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M510.52%20255.82c-69.97-.85-126.47-57.69-126.47-127.86-70.17%200-127-56.49-127.86-126.45-27.26-4.14-55.13.3-79.72%2012.82l-69.13%2035.22a132.221%20132.221%200%200%200-57.79%2057.81l-35.1%2068.88a132.645%20132.645%200%200%200-12.82%2080.95l12.08%2076.27a132.521%20132.521%200%200%200%2037.16%2072.96l54.77%2054.76a132.036%20132.036%200%200%200%2072.71%2037.06l76.71%2012.15c27.51%204.36%2055.7-.11%2080.53-12.76l69.13-35.21a132.273%20132.273%200%200%200%2057.79-57.81l35.1-68.88c12.56-24.64%2017.01-52.58%2012.91-79.91zM176%20368c-17.67%200-32-14.33-32-32s14.33-32%2032-32%2032%2014.33%2032%2032-14.33%2032-32%2032zm32-160c-17.67%200-32-14.33-32-32s14.33-32%2032-32%2032%2014.33%2032%2032-14.33%2032-32%2032zm160%20128c-17.67%200-32-14.33-32-32s14.33-32%2032-32%2032%2014.33%2032%2032-14.33%2032-32%2032z%22/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:22px 22px; mask-size:22px 22px; } } @media (forced-colors: active){ #cmplz-manage-consent button.cmplz-btn.cmplz-manage-consent::before{ forced-color-adjust:none; background-color:CanvasText; } } #cmplz-manage-consent button.cmplz-btn.cmplz-manage-consent:hover, #cmplz-manage-consent button.cmplz-btn.cmplz-manage-consent:focus{ animation:none; background-color:var(--e-global-color-khelev); color:var(--e-global-color-secondary); } /* --- Las categorias de la vista de preferencias -------------------------- Complianz las pinta con `rgba(239,239,239,0.5)`, un lavado gris claro hecho para temas claros: sobre este banner compone un #868698 en el que el titulo y la descripcion quedan en 2,15:1 y el "Siempre activo" en 1,44:1. No es solo feo: no cumple. Aqui pasan a ser tarjetas del sitio, un escalon por encima de la superficie del banner, igual que `.kh-card` lo esta sobre la pagina: relleno khelev, borde khstrong de 1 px y radio de 12 px. Sobre khelev el titulo sube a 7,93:1 y la descripcion a 5,01:1. La regla de Complianz es (0,3,0) y su hoja va despues, asi que estas suben a (0,4,0) apoyandose en `.cmplz-body`, que es el contenedor real. */ .cmplz-cookiebanner .cmplz-body .cmplz-categories .cmplz-category{ background-color:var(--e-global-color-khelev); border:1px solid var(--e-global-color-khstrong); border-radius:12px; } .cmplz-cookiebanner .cmplz-body .cmplz-categories .cmplz-category .cmplz-category-header{ padding:12px 14px; } /* Texto de apoyo: khmuted, como en el resto del sitio. */ .cmplz-cookiebanner .cmplz-body .cmplz-categories .cmplz-category .cmplz-description{ color:var(--e-global-color-khmuted); padding:0 14px 14px; } /* "Siempre activo" venia en la palabra clave `green` (#008000), que no es del sistema. Se le da el teal del kit, que es el mismo color del interruptor encendido: en este banner, teal significa activo. Se hace sobre la propia variable de Complianz, en el banner, para que gane a su :root. */ .cmplz-cookiebanner{ --cmplz_category_header_always_active_color:var(--e-global-color-d49ac81); } /* La flecha de desplegar es un SVG SIN atributo `fill`: sale negra siempre, aunque su boton declare `color:inherit`. Con currentColor toma el color del texto del banner. */ .cmplz-cookiebanner .cmplz-icon.cmplz-open svg, .cmplz-cookiebanner .cmplz-icon.cmplz-open svg path{fill:currentColor}/* End custom CSS */