/* =====================================================================
   UKABI · Páginas inmersivas — estilos (child theme)
   Se carga SOLO en las páginas marcadas (ukabi_is_immersive()).
   ===================================================================== */

:root{
  --uk-bg:#05091f;
  --uk-red:#FD495C;
  --uk-blue:#0F206C;
  --uk-card:rgba(15,25,72,.5);
}

/* ---------- Overrides de Avada (solo en .ukabi-immersive-page) ---------- */
/* El color oscuro va SOLO en el body. Los wrappers de Avada deben ser
   TRANSPARENTES, si no tapan el degradado y los orbes (que van en z-index:0). */
body.ukabi-immersive-page{ background:var(--uk-bg) !important; overflow-x:hidden; font-family:'Montserrat',sans-serif; color:#fff; }
body.ukabi-immersive-page #boxed,
body.ukabi-immersive-page #wrapper,
body.ukabi-immersive-page #main,
body.ukabi-immersive-page #content{ background:transparent !important; }
body.ukabi-immersive-page #main{ padding:0 !important; border:0 !important; }
body.ukabi-immersive-page #content{ padding:0 !important; width:100% !important; }
/* OJO: no forzamos el ancho de .fusion-row. Con secciones Fusion Builder
   nativas queremos que las filas mantengan su ancho de contenido centrado
   (el max-width:1248px del propio Avada). El fondo a sangre completa lo da
   el Container al estar en "100% Width". */
body.ukabi-immersive-page ::selection{ background:var(--uk-red); color:#fff; }
html{ scroll-behavior:smooth; }

/* Las secciones de contenido (containers de Fusion) deben quedar SOBRE el fondo.
   Excluimos .mm-card para no borrar el fondo de los paneles del mega-menú. */
/* Los containers van por encima del fondo inmersivo. NO forzamos transparente
   (son transparentes por defecto), así el footer puede llevar su fondo nativo. */
body.ukabi-immersive-page .fusion-fullwidth:not(.mm-card){ position:relative; z-index:2; }

/* ---------- Fondo vivo ---------- */
.uk-backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 90% at 50% -10%,#1b2a72 0%,#0d1648 32%,#070d2c 64%,#04081c 100%); }
.uk-orb{ position:fixed; z-index:0; border-radius:50%; pointer-events:none; }
.uk-orb1{ left:-12%; top:8%; width:560px; height:560px;
  background:radial-gradient(circle,rgba(92,103,178,.42),transparent 68%); filter:blur(20px); }
.uk-orb2{ right:-14%; top:46%; width:620px; height:620px;
  background:radial-gradient(circle,rgba(253,73,92,.28),transparent 66%); filter:blur(24px); }
.uk-deepfield{ position:fixed; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.uk-vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,31,0) 60%,rgba(5,9,31,.55) 100%); }

/* ---------- Rail de profundidad ---------- */
.uk-rail{ position:fixed; left:30px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; align-items:flex-start; }
.uk-rail-label{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.18em;
  color:rgba(255,255,255,.45); margin-bottom:14px; writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  transition:opacity .16s ease; white-space:nowrap; }
.uk-rail-items{ display:flex; flex-direction:column; gap:18px; }
.uk-rail-item{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.uk-rail-item .rdot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); transition:all .3s ease; }
.uk-rail-item .rtxt{ font-family:'Space Mono',monospace; font-size:11px; color:rgba(255,255,255,.4); transition:all .3s ease; }
.uk-rail-item .rdot.is-on{ background:var(--uk-red); box-shadow:0 0 12px rgba(253,73,92,.8); }
.uk-rail-item .rtxt.is-on{ color:#fff; }

/* ---------- Nav ---------- */
.uk-nav{ position:fixed; top:0; left:0; right:0; z-index:45; display:flex; align-items:center;
  justify-content:space-between; padding:22px 48px; transition:background .35s ease,padding .35s ease,box-shadow .35s ease; }
.uk-nav.is-stuck{ background:rgba(5,9,31,.82); padding:14px 48px; box-shadow:0 8px 30px -14px rgba(0,0,0,.7); }
.uk-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.uk-logo span{ font-family:'Montserrat Alternates'; font-weight:600; font-size:25px; letter-spacing:-.02em; color:#fff; }
.uk-menu{ display:flex; align-items:center; gap:15px; flex-wrap:nowrap; }

.mm-group{ position:relative; flex:none; }
.mm-trigger{ display:flex; align-items:center; gap:5px; white-space:nowrap; color:rgba(255,255,255,.8);
  font-weight:500; font-size:12.5px; text-decoration:none; transition:color .2s ease; }
.mm-caret{ transition:transform .25s ease; }
.mm-group:hover .mm-trigger{ color:#fff; }
.mm-group:hover .mm-caret{ transform:rotate(180deg); }

.mm-panel{ position:absolute; top:100%; left:0; padding-top:16px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:opacity .22s ease,transform .22s ease,visibility .22s; }
.mm-panel-r{ left:auto; right:0; }
.mm-group:hover .mm-panel{ opacity:1; visibility:visible; transform:translateY(0); }

.mm-card{ background:#0a1336; border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:22px 24px; box-shadow:0 30px 70px -28px rgba(0,0,0,.75); }
.mm-card-1{ width:260px !important; max-width:92vw !important; }
.mm-card-3{ display:grid; grid-template-columns:1fr 1fr 200px; gap:30px; padding:26px 28px; }
.mm-card-vexia{ background:var(--uk-blue); border-color:rgba(253,73,92,.3); width:720px !important; max-width:92vw !important; }

.mm-eyebrow{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.16em; color:var(--uk-red);
  text-transform:uppercase; margin:0 0 12px; white-space:nowrap; }
.mm-link{ display:block; color:rgba(255,255,255,.72); font-weight:500; font-size:13.5px; text-decoration:none;
  padding:6px 0; white-space:nowrap; transition:color .2s ease; }
.mm-link:hover{ color:#fff; }
.mm-link-hl{ color:#fff; font-weight:600; }
.mm-link-hl:hover{ color:var(--uk-red); }
.mm-soon{ color:rgba(255,255,255,.45); font-weight:500; font-size:12.5px; padding:6px 0; font-style:italic; }

.mm-promo{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px;
  padding:18px; display:flex; flex-direction:column; justify-content:space-between; }
.mm-card-vexia .mm-promo{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); }
.mm-tag{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.08); border-radius:7px;
  padding:6px 10px; margin-bottom:12px; font-weight:700; font-size:11.5px; color:#fff; }
.mm-promo-txt{ font-weight:600; font-size:13px; line-height:1.5; color:rgba(255,255,255,.8); }
.mm-cta{ display:inline-block; margin-top:14px; background:var(--uk-red); color:#fff; font-weight:600;
  font-size:12.5px; padding:9px 14px; border-radius:8px; text-decoration:none; text-align:center; transition:transform .2s ease; }
.mm-cta:hover{ transform:translateY(-1px); }

/* --- Panel "Software de Gestión" (rejilla de iconos a 2 columnas + tarjetas) --- */
.mm-card-sg{ width:640px !important; max-width:92vw !important; }
.fusion-megamenu .mm-card-sg{ width:640px !important; max-width:92vw !important; }
/* Ancho del panel IA y Productividad (mm-card-vexia) */
.fusion-megamenu .mm-card-vexia{ width:720px !important; max-width:92vw !important; }
/* Ancho del panel "Infraestructura y Servicios" (rejilla de iconos 2 col) */
.mm-card-infra{ width:560px !important; max-width:92vw !important; }
.fusion-megamenu .mm-card-infra{ width:560px !important; max-width:92vw !important; }

/* === Posición de los mega-menús (data-width="site_width") ===
   OJO: de momento solo tocamos el ANCHO (evita que el wrap se quede al
   ancho completo del sitio y se salga de pantallas más estrechas).
   NO tocamos left/right todavía: forzarlos rompió el posicionamiento
   (el panel de "Infraestructura y Servicios" apareció junto al logo, lejos
   de su disparador) — el contenedor "positioned" real todavía no está
   confirmado. Pendiente: revisar la pestaña "Calculado" del inspector con
   el panel abierto antes de tocar left/right de nuevo. */
.awb-menu__mega-wrap{
  width:auto !important; max-width:none !important; min-width:0 !important; }
.mm-igrid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:4px; }
.mm-iitem{ display:flex; align-items:flex-start; gap:12px; padding:11px 12px; border-radius:10px; text-decoration:none; transition:background .2s ease; }
.mm-iitem:hover{ background:rgba(255,255,255,.06); }
.mm-ibox{ width:38px; height:38px; flex:none; border-radius:9px; background:rgba(253,73,92,.13); border:1px solid rgba(253,73,92,.22); display:flex; align-items:center; justify-content:center; }
.mm-ititle{ display:block; font-weight:700; font-size:13px; color:#fff; white-space:nowrap; }
.mm-isub{ display:block; font-weight:400; font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.55); margin-top:2px; }
.mm-div{ height:1px; background:rgba(255,255,255,.1); margin:18px 0 16px; }
.mm-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mm-feat{ display:block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px; text-decoration:none; transition:background .2s ease,border-color .2s ease; }
.mm-feat:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.mm-feat-vexia{ background:rgba(253,73,92,.1); border-color:rgba(253,73,92,.35); }
.mm-feat-vexia:hover{ background:rgba(253,73,92,.16); border-color:rgba(253,73,92,.55); }
.mm-feat-head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.mm-feat-title{ font-weight:700; font-size:13px; color:#fff; line-height:1.25; }
.mm-feat-desc{ display:block; font-weight:400; font-size:12px; line-height:1.5; color:rgba(255,255,255,.6); }
.mm-feat-vexia .mm-feat-desc{ color:rgba(255,255,255,.72); }

/* --- Tarjetas de servicio del panel Software de Gestión (rediseño v3) --- */
.mm-svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.mm-svc{ display:block; border-radius:12px; padding:15px 16px; text-decoration:none; }
.mm-svc-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.mm-svc-ico{ width:32px; height:32px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.mm-svc-eyebrow{ display:block; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:2px; }
.mm-svc-title{ display:block; font-weight:700; font-size:13px; color:#fff; line-height:1.15; }
.mm-svc-desc{ display:block; font-size:12px; line-height:1.5; }
/* Variante violeta · Consultoría */
.mm-svc--violet{ background:linear-gradient(135deg,rgba(92,103,178,.22),rgba(92,103,178,.05)); border:1px solid rgba(130,142,214,.4); transition:border-color .2s ease; }
.mm-svc--violet:hover{ border-color:rgba(130,142,214,.65); }
.mm-svc--violet .mm-svc-ico{ background:rgba(130,142,214,.22); }
.mm-svc--violet .mm-svc-eyebrow{ color:#AEB7EC; }
.mm-svc--violet .mm-svc-desc{ color:rgba(255,255,255,.58); font-weight:400; }
/* Variante roja · Vexia / IA */
.mm-svc--red{ background:linear-gradient(135deg,#FD495C,#D62A45); border:1px solid rgba(253,73,92,.6); box-shadow:0 12px 28px -12px rgba(253,73,92,.75); transition:transform .2s ease,box-shadow .2s ease; }
.mm-svc--red:hover{ transform:translateY(-1px); box-shadow:0 16px 34px -12px rgba(253,73,92,.9); }
.mm-svc--red .mm-svc-ico{ background:rgba(255,255,255,.2); }
.mm-svc--red .mm-svc-eyebrow{ color:rgba(255,255,255,.9); }
.mm-svc--red .mm-svc-desc{ color:rgba(255,255,255,.92); font-weight:500; }

/* --- Ajustes para el Content Boxes nativo del panel Software de Gestión ---
   Pon la clase uk-sg-boxes en el elemento "Content Boxes". El resto (icono,
   color, fondo del icono, columnas=2, "icon on side") se configura en el elemento. */
.uk-sg-boxes .fusion-column,
.uk-sg-boxes .content-box-column{ margin:0 !important; }
.uk-sg-boxes .content-box-column .col{ padding:11px 12px !important; border-radius:10px !important; transition:background .2s ease; }
.uk-sg-boxes .content-box-column .col:hover{ background:rgba(255,255,255,.06) !important; }
/* Caja del icono: 38px, esquinas redondeadas y borde rojo tenue */
.uk-sg-boxes .heading-with-icon .icon,
.uk-sg-boxes .fontawesome-icon,
.uk-sg-boxes .icon .circle-yes{ width:38px !important; height:38px !important; line-height:38px !important;
  border-radius:9px !important; background:rgba(253,73,92,.13) !important; border:1px solid rgba(253,73,92,.22) !important;
  color:#FD495C !important; font-size:18px !important; }
/* Título y subtítulo */
.uk-sg-boxes .content-box-heading,
.uk-sg-boxes .heading h2,
.uk-sg-boxes .heading h3{ font-size:13px !important; font-weight:700 !important; color:#fff !important; margin:0 !important; }
.uk-sg-boxes .content-container,
.uk-sg-boxes .content-container p{ font-size:11.5px !important; line-height:1.4 !important; color:rgba(255,255,255,.55) !important; margin:2px 0 0 !important; }

/* --- ALTERNATIVA: panel Software de Gestión con el ELEMENTO MENÚ ---
   Clase uk-sg-menu en el elemento Menú. Apunta al marcado NUEVO de Avada (awb-menu__*).
   Cada ítem de WP: icono (Avada Menu Options) + título + Descripción.
   IMPORTANTE: en el shortcode [fusion_menu], los iconos SOLO se pintan si el
   propio elemento lleva icons_position="left" e icons_size="16" (y el resto
   de atributos del elemento Menú de Avada). Omitirlos deja el menú sin
   iconos y con el estilo por defecto, aunque el CSS de abajo esté bien. */
/* Rejilla de 2 columnas */
.uk-sg-menu .awb-menu__main-ul{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:4px !important; }
.uk-sg-menu .awb-menu__main-li{ width:auto !important; margin:0 !important; }
/* Enlace alineado a la IZQUIERDA, icono + texto en fila */
.uk-sg-menu .awb-menu__main-a{
  justify-content:flex-start !important; align-items:flex-start !important; text-align:left !important;
  flex-direction:row !important; gap:12px !important; width:100% !important;
  padding:11px 12px !important; border-radius:10px !important; line-height:1.3 !important; }
/* Quitar los fondos por defecto del menú y usar el nuestro al hover */
.uk-sg-menu .awb-menu__main-background-default,
.uk-sg-menu .awb-menu__main-background-active{ display:none !important; }
.uk-sg-menu .awb-menu__main-a:hover{ background:rgba(255,255,255,.06) !important; }
/* Caja del icono: UNA sola (38px, borde rojo tenue). Evita doble borde. */
.uk-sg-menu .awb-menu__main-a .awb-menu__main-icon,
.uk-sg-menu .awb-menu__main-a i[class*="icon"]{
  width:38px !important; height:38px !important; min-width:38px !important; line-height:36px !important; text-align:center !important;
  flex:none !important; border-radius:9px !important; background:rgba(253,73,92,.13) !important;
  border:1px solid rgba(253,73,92,.22) !important; box-shadow:none !important; color:#FD495C !important;
  font-size:18px !important; margin:0 !important; padding:0 !important; display:inline-flex !important;
  align-items:center !important; justify-content:center !important; }
/* Título + descripción: contenedor real .menu-text, alineado a la IZQUIERDA */
.uk-sg-menu .menu-text{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left !important;
  font-weight:700 !important; font-size:13px !important; line-height:1.25 !important; color:#fff !important; }
/* La descripción (subtexto dentro de .menu-text) en gris y más pequeña.
   Clase real en este Avada: .awb-menu__description */
.uk-sg-menu .awb-menu__description,
.uk-sg-menu .menu-text .awb-menu__description{
  display:block !important; text-align:left !important; font-weight:400 !important; font-size:11.5px !important;
  line-height:1.4 !important; color:rgba(255,255,255,.55) !important; margin-top:2px !important;
  white-space:normal !important; text-transform:none !important; opacity:1 !important; }

.uk-nav-plain{ white-space:nowrap; color:rgba(255,255,255,.8); font-weight:500; font-size:12.5px; text-decoration:none; transition:color .2s ease; }
.uk-nav-plain:hover{ color:#fff; }
.uk-nav-btn{ background:var(--uk-red); color:#fff; font-weight:600; font-size:12.5px; padding:9px 15px;
  border-radius:9px; text-decoration:none; white-space:nowrap; transition:transform .2s ease,box-shadow .2s ease; }
.uk-nav-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(253,73,92,.7); }

.uk-burger{ display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:6px; }
.uk-burger span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.25s; }

/* ---------- Animaciones ---------- */
@keyframes ukabi-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes ukabi-cue{0%{transform:translateY(0);opacity:.7}50%{transform:translateY(9px);opacity:.25}100%{transform:translateY(0);opacity:.7}}
.uk-pulse{ animation:ukabi-pulse 2.2s ease-in-out infinite; }
.uk-cue{ animation:ukabi-cue 1.9s ease-in-out infinite; }

/* =====================================================================
   CLASES DE AYUDA para las secciones nativas de Fusion Builder.
   Añádelas en el campo "CSS Class" de cada Container/Column/Elemento.
   ===================================================================== */

/* Etiqueta tipo "01 · QUÉ HACEMOS" (Title o Text con esta clase) */
.uk-eyebrow{ font-family:'Space Mono',monospace !important; font-size:12px !important; letter-spacing:.2em !important;
  color:var(--uk-red) !important; margin-bottom:14px !important; }

/* Tarjeta "glass" oscura (clase uk-glass en la COLUMNA de Fusion).
   La caja se pinta en el wrapper interno y el margen (11px) crea el hueco de
   ~22px entre columnas, sin que el fondo tape la separación. */
.uk-glass,
.uk-glass-soft{ background:transparent !important; border:0 !important; padding:0 !important; }
.uk-glass > .fusion-column-wrapper{
  background:rgba(15,25,72,.5) !important; border:1px solid rgba(255,255,255,.1) !important;
  border-radius:16px !important; padding:34px 32px !important; margin:11px !important;
  height:calc(100% - 22px) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.uk-glass-soft > .fusion-column-wrapper{
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:18px !important; padding:34px 32px !important; margin:11px !important;
  height:calc(100% - 22px) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

/* Texto blanco / atenuado para Title y Text dentro del fondo oscuro */
.uk-immersive-page h1,.uk-immersive-page h2,.uk-immersive-page h3{ color:#fff; }
.uk-white .fusion-title-heading,.uk-white h1,.uk-white h2,.uk-white h3{ color:#fff !important; }
.uk-muted, .uk-muted p{ color:rgba(255,255,255,.72) !important; }

/* Botón rojo de marca (clase para el Button de Fusion) */
.uk-btn .fusion-button{ background:var(--uk-red) !important; border-color:var(--uk-red) !important;
  box-shadow:0 16px 36px -12px rgba(253,73,92,.7); }

/* Caja del CTA final (columna con esta clase) */
.uk-cta-box{ max-width:1080px; margin:0 auto !important;
  background:radial-gradient(120% 140% at 50% 0%,#1a2a7a 0%,#0F206C 55%,#0a1340 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important; border-radius:24px !important;
  padding:64px 48px !important; overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); }

/* =====================================================================
   FOOTER inmersivo
   ===================================================================== */
.uk-footer{ position:relative; z-index:2; background:rgba(3,6,18,.7); border-top:1px solid rgba(255,255,255,.1);
  padding:72px 56px 0; backdrop-filter:blur(10px); }
.uk-footer-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1.1fr 1fr 1.1fr;
  gap:40px; padding-bottom:48px; }
.uk-footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.uk-footer-brand span{ font-family:'Montserrat Alternates'; font-weight:600; font-size:30px; letter-spacing:-.02em; color:#fff; }
.uk-footer-tag{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6); margin-bottom:18px; max-width:260px; }
.uk-footer-social{ display:flex; flex-direction:column; gap:12px; }
.uk-li{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:13px; text-decoration:none; width:fit-content; }
.uk-li:hover{ color:#fff; }
.uk-wk{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border-radius:8px; padding:8px 14px; width:fit-content; }
.uk-wk span{ font-weight:700; font-size:13px; color:rgba(255,255,255,.85); }
.uk-wk em{ font-style:normal; font-size:11px; color:rgba(255,255,255,.5); }
.uk-footer-h{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--uk-red);
  text-transform:uppercase; margin-bottom:18px; }
.uk-footer-link{ display:block; color:rgba(255,255,255,.62); font-size:13px; text-decoration:none; padding:6px 0; transition:color .2s ease; }
.uk-footer-link:hover{ color:#fff; }
.uk-footer-contact{ margin-top:14px; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.55); }
.uk-footer-contact a{ color:#fff; font-weight:600; text-decoration:none; }
.uk-footer-bottom{ max-width:1180px; margin:0 auto; border-top:1px solid rgba(255,255,255,.1); padding:24px 0 16px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.uk-footer-legal{ display:flex; flex-wrap:wrap; gap:24px; }
.uk-footer-legal a{ font-size:12.5px; color:rgba(255,255,255,.5); text-decoration:none; }
.uk-footer-legal a:hover{ color:#fff; }
.uk-footer-copy{ font-size:12.5px; color:rgba(255,255,255,.35); }
.uk-footer-disclaimer{ max-width:1180px; margin:0 auto; padding:0 0 28px; font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.3); }

/* === FOOTER nativo (Layout Section) con elementos Menú === */
/* El footer es el MISMO en todas las páginas, así que estas reglas van SIN
   candado de body: aplican en la home inmersiva y en todas las interiores.
   El color de fondo del footer se define en el Container (nativo en Avada). */
.uk-footer-native{ position:relative; z-index:2; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
/* Línea superior solo en el contenedor con esta clase extra */
.uk-footer-topline{ border-top:1px solid rgba(255,255,255,.1) !important; }
/* Listas de enlaces del footer (clase uk-footer-menu en el elemento Menú, vertical) */
.uk-footer-menu .awb-menu__main-ul{ display:block !important; list-style:none !important; margin:0 !important; padding:0 !important; }
.uk-footer-menu .awb-menu__main-li{ width:auto !important; margin:0 !important; padding:0 !important; }
.uk-footer-menu .awb-menu__main-background-default,
.uk-footer-menu .awb-menu__main-background-active{ display:none !important; }
.uk-footer-menu .awb-menu__main-a{ display:block !important; justify-content:flex-start !important;
  text-align:left !important; padding:6px 0 !important; background:transparent !important; }
.uk-footer-menu .menu-text{ display:block !important; text-align:left !important;
  color:rgba(255,255,255,.62) !important; font-weight:400 !important; font-size:13px !important; }
.uk-footer-menu .awb-menu__main-a:hover .menu-text{ color:#fff !important; }
/* Barra legal horizontal (clase uk-footer-legal-menu en el elemento Menú) */
.uk-footer-legal-menu .awb-menu__main-ul{ display:flex !important; flex-wrap:wrap !important; gap:24px !important; margin:0 !important; padding:0 !important; list-style:none !important; }
.uk-footer-legal-menu .awb-menu__main-li{ width:auto !important; margin:0 !important; }
.uk-footer-legal-menu .awb-menu__main-a{ padding:0 !important; background:transparent !important; }
.uk-footer-legal-menu .menu-text{ color:rgba(255,255,255,.5) !important; font-size:12.5px !important; font-weight:400 !important; }
.uk-footer-legal-menu .awb-menu__main-a:hover .menu-text{ color:#fff !important; }

/* =====================================================================
   HEADER NATIVO DE AVADA (Layout Section) — look inmersivo
   Muchos de estos valores también se pueden poner en las opciones del
   Header Layout / del elemento Menú; este CSS es la red de seguridad.
   ===================================================================== */
/* Header transparente sobre el fondo y por encima del canvas */
.fusion-header-wrapper,
.fusion-header,
.fusion-is-sticky .fusion-header{ background:transparent !important; box-shadow:none !important; }
/* El header (y su mega-menú) SIEMPRE por encima del contenido (que va en z-index:2).
   En Avada Layouts el wrapper del header es .fusion-tb-header. */
.fusion-tb-header,
.fusion-header-wrapper,
.fusion-header{ position:relative !important; z-index:100 !important; }
/* El panel del mega-menú, aún más alto */
.fusion-megamenu-wrapper,
.fusion-megamenu-holder,
.fusion-main-menu .fusion-megamenu-menu{ z-index:9999 !important; }
/* La fila/columna del header que contiene el menú no debe limitar el z-index */
.fusion-tb-header .fusion-fullwidth,
.fusion-tb-header .fusion-builder-row,
.fusion-tb-header .fusion-layout-column{ z-index:auto !important; }

/* Al hacer sticky, fondo oscuro translúcido (como el diseño) */
.fusion-is-sticky .fusion-header{
  background:rgba(5,9,31,.82) !important; box-shadow:0 8px 30px -14px rgba(0,0,0,.7) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* Enlaces del menú en blanco */
.fusion-main-menu > ul > li > a,
.fusion-main-menu .fusion-menu > li > a{ color:rgba(255,255,255,.8) !important; font-weight:500 !important; }
.fusion-main-menu > ul > li > a:hover{ color:#fff !important; }

/* Dropdown simple (fallback) oscuro */
.fusion-main-menu .sub-menu{
  background:#0a1336 !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:14px !important; }
.fusion-main-menu .sub-menu li a{ color:rgba(255,255,255,.72) !important; }
.fusion-main-menu .sub-menu li a:hover{ color:#fff !important; }

/* Mega menú construido en Avada Library: hacemos TRANSPARENTE el contenedor
   de Avada para que la tarjeta .mm-card (nuestro HTML) actúe como panel. */
.fusion-main-menu .fusion-megamenu-wrapper,
.fusion-main-menu .fusion-megamenu-holder,
.fusion-megamenu-menu .fusion-megamenu-wrapper,
.fusion-megamenu-holder .fusion-builder-row,
.fusion-megamenu .fusion-fullwidth:not(.mm-card){
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }
/* Si pones mm-card en el propio Container nativo, conserva su caja y su fondo */
.fusion-megamenu .fusion-fullwidth.mm-card{
  background:#0a1336 !important; box-shadow:0 30px 70px -28px rgba(0,0,0,.75) !important; }
.fusion-megamenu .fusion-fullwidth.mm-card.mm-card-vexia{ background:#0F206C !important; }

/* (El ancho del mega-menú se controla con la opción nativa de Avada.) */
/* El Code Block dentro del mega menú sin márgenes raros */
.fusion-megamenu .fusion-text{ margin:0 !important; }

/* Forzar que nuestras clases mm-* ganen al CSS del menú de Avada */
.fusion-megamenu .mm-link{ color:rgba(255,255,255,.72) !important; }
.fusion-megamenu .mm-link:hover{ color:#fff !important; }
.fusion-megamenu .mm-link-hl{ color:#fff !important; }
.fusion-megamenu .mm-link-hl:hover{ color:#FD495C !important; }
.fusion-megamenu .mm-cta{ color:#fff !important; }
.fusion-megamenu .mm-cta:hover{ color:#fff !important; }
/* Panel "Software de Gestión": asegurar colores de títulos/subtítulos */
.fusion-megamenu .mm-ititle,
.fusion-megamenu .mm-feat-title{ color:#fff !important; }
.fusion-megamenu .mm-isub{ color:rgba(255,255,255,.55) !important; }
.fusion-megamenu .mm-feat-desc{ color:rgba(255,255,255,.6) !important; }
.fusion-megamenu .mm-feat-vexia .mm-feat-desc{ color:rgba(255,255,255,.72) !important; }

/* --- Lista de enlaces simple con el ELEMENTO MENÚ (marcado awb-menu__*) ---
   Clase uk-mm-menu en el elemento Menú. Lista vertical, 1 columna, sin iconos. */
.uk-mm-menu .awb-menu__main-ul{ display:block !important; list-style:none !important; margin:0 !important; padding:0 !important; }
.uk-mm-menu .awb-menu__main-li{ border:0 !important; margin:0 !important; padding:0 !important; width:auto !important; }
.uk-mm-menu .awb-menu__main-background-default,
.uk-mm-menu .awb-menu__main-background-active{ display:none !important; }
.uk-mm-menu .awb-menu__main-a{ display:block !important; justify-content:flex-start !important;
  align-items:flex-start !important; text-align:left !important; padding:6px 0 !important; line-height:1.3 !important;
  background:transparent !important; }
.uk-mm-menu .menu-text{ display:block !important; text-align:left !important;
  color:rgba(255,255,255,.72) !important; font-weight:500 !important; font-size:13.5px !important; }
.uk-mm-menu .awb-menu__main-a:hover .menu-text{ color:#fff !important; }
/* Enlace destacado: añade la clase CSS "uk-hl" al ítem en Apariencia → Menús */
.uk-mm-menu .menu-item.uk-hl .menu-text{ color:#fff !important; font-weight:600 !important; }
.uk-mm-menu .menu-item.uk-hl .awb-menu__main-a:hover .menu-text{ color:#FD495C !important; }
/* Eyebrow reutilizable en Title/Text nativo */
body.ukabi-immersive-page .uk-eyebrow,
body.ukabi-immersive-page .uk-eyebrow *{ font-family:'Space Mono',monospace !important; font-size:10px !important;
  letter-spacing:.16em !important; color:#FD495C !important; text-transform:uppercase !important; margin:0 0 12px !important; }

/* Botón CTA del header (si usas un elemento Botón con clase uk-btn) */
.fusion-header .uk-btn .fusion-button{ background:#FD495C !important; border-color:#FD495C !important; }

/* =====================================================================
   FOOTER NATIVO DE AVADA (Layout Section)
   El fondo, borde y padding se definen en el Container del footer (nativo).
   No forzamos nada sobre .fusion-footer / .fusion-footer-widget-area.
   ===================================================================== */

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1100px){
  .uk-footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:900px){
  .uk-rail{ display:none; }                 /* el rail se oculta en tablet/móvil */
  .uk-burger{ display:flex; }
  .uk-menu{ position:fixed; top:0; right:0; height:100vh; width:min(86vw,360px);
    flex-direction:column; align-items:flex-start; gap:6px; padding:90px 26px 40px;
    background:#0a1336; box-shadow:-20px 0 60px -20px rgba(0,0,0,.8);
    transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; }
  .uk-nav.is-open .uk-menu{ transform:translateX(0); }
  .mm-panel{ position:static; opacity:1; visibility:visible; transform:none; padding-top:8px; display:none; }
  .mm-group.is-open .mm-panel{ display:block; }
  .mm-card-3{ grid-template-columns:1fr; gap:18px; }
  .mm-card{ box-shadow:none; }
  .uk-nav-btn{ margin-top:10px; }
}
@media (max-width:680px){
  .uk-footer{ padding:54px 24px 0; }
  .uk-footer-grid{ grid-template-columns:1fr; gap:26px; }
  .uk-nav{ padding:16px 22px; }
}

/* =====================================================================
   PÁGINAS DE PRODUCTO (construidas con ELEMENTOS NATIVOS de Avada)
   Se cargan en páginas interiores (ukabi_is_interior()) y en inmersivas.
   Aquí SOLO van los detalles que un elemento nativo no cubre:
     · marco a medida de tarjetas (apunta a .fusion-column-wrapper)
     · etiquetas tipo "badge"/"eyebrow"/"pill"
     · el mockup glass del hero (único bloque HTML)
   El resto (títulos, botones, cajas de contenido, checklists, contadores,
   acordeón, imágenes) lo dan los elementos nativos y se estilan en el editor.
   ===================================================================== */

/* Eyebrow (Texto con clase uk-eyebrow) — en mayúsculas también en interiores */
.uk-eyebrow{ text-transform:uppercase !important; }

/* ——— Hero interior: degradado base + resplandor coral + canvas ———
   Dos capas de fondo: el resplandor coral (rojo) a la derecha sobre el
   degradado azul. Sin overflow:hidden para no recortar el mockup. */
.uk-nom-hero{
  background:
    radial-gradient(50% 70% at 82% 46%, rgba(253,73,92,.18), transparent 70%),
    radial-gradient(125% 125% at 82% 6%, #1d2f88 0%, #0F206C 50%, #0a1240 100%) !important;
  position:relative; }
#net-hero{
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.9; }

/* ——— Mockup "glass" de nómina del hero (único bloque HTML) ——— */
.uk-payroll-card{
  background:rgba(15,25,72,.55); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:28px; -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px); box-shadow:0 34px 80px -34px rgba(0,0,0,.6); }

/* Las tarjetas de "5 Frentes" y "Tres Soluciones" se estilan NATIVAMENTE
   en la propia columna (fondo/borde/radio/padding como atributos de Avada),
   por eso aquí ya no hace falta CSS de marco. */

/* Badge (Texto con clase uk-badge) dentro de cada solución */
.uk-badge{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; padding:7px 14px;
  border-radius:30px; margin-bottom:14px; }
.uk-badge--blue{ background:#EAF0FB; color:#0F206C; }
.uk-badge--red{ background:rgba(253,73,92,.1); color:#FD495C; }
.uk-badge i{ font-size:14px; }

/* Caja "Para quién" (Texto) dentro de cada solución */
.uk-for-quien{ background:#F7F7FB; border-radius:11px; padding:14px 16px; margin-bottom:20px; }

/* ——— Group pills (cabeceras de grupo en "Tres Soluciones") ——— */
.uk-group-row{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.uk-group-pill{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:30px; white-space:nowrap; text-decoration:none; color:#fff;
  order:1; }
.uk-group-pill--blue{ background:#0F206C; }
.uk-group-pill--red{ background:#FD495C; }
.uk-group-note{ font-size:13.5px; font-weight:500; color:#6b7280; white-space:nowrap; order:3; }

/* La LÍNEA entre la píldora y la nota.
   Avada borra el <span> vacío que la formaba, así que la dibujamos con un
   pseudo-elemento: no necesita ningún elemento en el HTML.
   El "order" la coloca entre la píldora (1) y la nota (3). */
.uk-group-row::after{ content:""; order:2; flex:1 1 auto; height:1px; background:#dcdcef; }
.uk-group-row:has(.uk-group-pill--red)::after{ background:#f3d4d9; }

/* Si en algún sitio SÍ existe el <span> de la línea (p. ej. en Code Block),
   lo respetamos y evitamos la línea doble. */
.uk-group-hr{ order:2; flex:1; height:1px; }
.uk-group-hr--blue{ background:#dcdcef; }
.uk-group-hr--red{ background:#f3d4d9; }
.uk-group-row:has(.uk-group-hr)::after{ display:none; }

/* ——— Responsive páginas de producto ——— */
@media(max-width:900px){
  .uk-group-hr,.uk-group-note{ display:none; }
}

/* =====================================================================
   TABLA COMPARATIVA (Control de Presencia y similares)
   ===================================================================== */
.contentboxhorario .fusion-content-boxes .content-wrapper-background{
	padding: 15px !important;
}
.s7-wrap { overflow-x:auto; border-radius:10px; border:1px solid #dde3f0; }
.s7-table { width:100%; border-collapse:collapse; min-width:580px; }
.s7-table thead tr { background:#0f206c; }
.s7-table thead th { padding:16px 18px; color:#fff; font-size:15px; font-weight:700; text-align:center; }
.s7-table thead th:first-child { text-align:left; min-width:180px; }
.s7-table tbody tr:nth-child(odd) { background:#f9fafc; }
.s7-table tbody tr:nth-child(even) { background:#fff; }
.s7-table tbody td { padding:13px 18px; font-size:14px; color:#444; text-align:center; border-bottom:1px solid #eef0f5; }
.s7-table tbody td:first-child { text-align:left; font-weight:600; color:#0f206c; }
.s7-table tbody tr:last-child td { border-bottom:none; }
.s7-check { color:#1a8c4e; font-weight:700; }
.s7-cross { color:#bbb; }
.s7-basic { color:#888; font-size:13px; }
.s7-price { font-weight:700; color:#0f206c; }
.s7-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.s7-badge-basic { background:#f2ffde; color:#74a92d; }
.s7-badge-mid { background:#ffe8ca; color:#e7a23a; }
.s7-badge-adv { background:#c5e3ff; color:#127aeb; }
.s7-cta { text-align:center; margin-top:28px; }
.s7-cta p { font-size:15px; color:#555; margin-bottom:16px; }
.s7-cta a { display:inline-block; background:#0f206c; color:#fff; padding:13px 28px; border-radius:6px; font-size:14px; font-weight:700; text-decoration:none; }

/* =====================================================================
   WIDGET "RELOJ DE FICHAJE" (hero de Control de Presencia)
   Esfera de reloj animada: marcas de hora, 3 avatares pulsantes, agujas
   en vivo (hora/minuto/segundo), lector de tarjeta y chips flotantes.
   El reloj digital (#ch-live-clock) y las agujas (#ch-hand-*) los
   actualiza ukabi-hero.js en tiempo real.
   ===================================================================== */
@keyframes chBadgeTap{0%,100%{transform:translateY(-13px);}42%,58%{transform:translateY(6px);}}
@keyframes chReaderRing{0%,44%{box-shadow:0 0 0 0 rgba(253,73,92,.55);opacity:0;}50%{opacity:1;}72%{box-shadow:0 0 0 16px rgba(253,73,92,0);opacity:0;}100%{opacity:0;}}
@keyframes chCheckFlash{0%,46%{opacity:0;transform:scale(.5);}54%{opacity:1;transform:scale(1.25);}64%{opacity:1;transform:scale(1);}84%,100%{opacity:0;transform:scale(1);}}
@keyframes chRowIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes chBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes chDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes chChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* =====================================================================
   WIDGETS "TICKET" Y "TPV" (hero y sección TPV Cloud de Facturación y TPV)
   Ticket flotando, terminal de pago con anillo de tap, líneas de ticket
   apareciendo, chips flotantes e icono de sincronización girando.
   ===================================================================== */
@keyframes ftLineIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes ftTicketFloat{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-10px) rotate(-3deg);}}
@keyframes ftTapRing{0%,40%{box-shadow:0 0 0 0 rgba(253,73,92,.5);opacity:0;}48%{opacity:1;}68%{box-shadow:0 0 0 14px rgba(253,73,92,0);opacity:0;}100%{opacity:0;}}
@keyframes ftCheckPop{0%,44%{opacity:0;transform:scale(.5);}52%{opacity:1;transform:scale(1.2);}62%{opacity:1;transform:scale(1);}86%,100%{opacity:0;transform:scale(1);}}
@keyframes ftChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes ftDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes ftSyncSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* =====================================================================
   WIDGETS "TABLET POS", "CHAT" Y "FLUJO" (página TPV Cloud)
   Tablet TPV con carrito dinámico, roles con punto pulsante, burbujas de
   chat de WhatsApp apareciendo y puntos fluyendo por el diagrama.
   ===================================================================== */
@keyframes tcTileGlow{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,0);}50%{box-shadow:0 0 0 6px rgba(253,73,92,.18);}}
@keyframes tcCartLine{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes tcTapRing{0%,40%{box-shadow:0 0 0 0 rgba(253,73,92,.5);opacity:0;}48%{opacity:1;}68%{box-shadow:0 0 0 14px rgba(253,73,92,0);opacity:0;}100%{opacity:0;}}
@keyframes tcCheckPop{0%,44%{opacity:0;transform:scale(.5);}52%{opacity:1;transform:scale(1.2);}62%{opacity:1;transform:scale(1);}86%,100%{opacity:0;transform:scale(1);}}
@keyframes tcChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes tcDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes tcBubbleIn{from{opacity:0;transform:translateY(8px) scale(.94);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes tcFlowDot{0%{offset-distance:0%;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{offset-distance:100%;opacity:0;}}

/* =====================================================================
   WIDGET "NAVEGADOR" (hero de Desarrollo Web)
   Animaciones del mockup de web: texto escribiéndose, tarjetas apareciendo,
   cursor moviéndose y teléfono flotando.
   ===================================================================== */
@keyframes dwTypeIn{from{width:0;}to{width:100%;}}
@keyframes dwCardPop{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes dwCursorMove{0%{transform:translate(26px,36px);}20%{transform:translate(230px,26px);}40%{transform:translate(230px,150px);}60%{transform:translate(60px,196px);}80%{transform:translate(190px,236px);}100%{transform:translate(26px,36px);}}
@keyframes dwFloatPhone{0%,100%{transform:translateY(0) rotate(-7deg);}50%{transform:translateY(-12px) rotate(-7deg);}}
@keyframes dwPulseBadge{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}

/* =====================================================================
   WIDGET "CENTRO DE SEGURIDAD" (hero de Microsoft 365)
   Anillo de Secure Score llenándose, shield pulsante en el centro,
   4 apps orbitando con escaneo secuencial y chips flotantes de MFA/copias.
   ===================================================================== */
@keyframes m365Spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes m365RingFill{from{stroke-dashoffset:1118.5;}to{stroke-dashoffset:246;}}
@keyframes m365ShieldGlow{0%,100%{box-shadow:0 0 50px rgba(253,73,92,.28);}50%{box-shadow:0 0 78px rgba(253,73,92,.48);}}
@keyframes m365ScanCycle{0%,15%{box-shadow:0 0 0 0 rgba(253,73,92,0);border-color:rgba(255,255,255,.18);}5%,10%{box-shadow:0 0 0 9px rgba(253,73,92,.22);border-color:#FD495C;}100%{box-shadow:0 0 0 0 rgba(253,73,92,0);border-color:rgba(255,255,255,.18);}}
@keyframes m365ChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Ciberseguridad)
   Radar de auditoría girando, nodos que destellan al ser escaneados,
   terminal de log cicla líneas, informe y bandeja de phishing simulados,
   chips flotantes, punto de "en vivo" parpadeando, icono de escudo
   pulsante y puntos fluyendo por el diagrama del proceso.
   ===================================================================== */
@keyframes csChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes csDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes csLiveBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes csSweepSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes csNodeFlash{0%,92%,100%{border-color:#e7e8f2;box-shadow:none;transform:scale(1);}3%{border-color:#4ade80;box-shadow:0 0 0 7px rgba(74,222,128,.28);transform:scale(1.2);}8%{border-color:#4ade80;box-shadow:none;transform:scale(1);}}
@keyframes csTermLine{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
@keyframes csRowIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes csBubbleIn{from{opacity:0;transform:translateY(8px) scale(.94);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes csFlowDot{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}94%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes csShieldPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.3);}50%{box-shadow:0 0 0 10px rgba(253,73,92,0);}}

/* =====================================================================
   WIDGETS DEL HERO (página Antivirus y TI)
   Consola de seguridad con rejilla de equipos que cicla estados
   (seguro → escaneando → amenaza detectada → seguro), log de actividad
   que cicla líneas, chip flotante, punto "en vivo" parpadeando y el
   icono de escudo pulsante reutilizado en "Por qué Ukabi".
   ===================================================================== */
@keyframes avChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes avDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes avLiveBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes avTermLine{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
@keyframes avShieldPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.3);}50%{box-shadow:0 0 0 10px rgba(253,73,92,0);}}
@keyframes avNodeCycle{
  0%,84%,100%{border-color:#e7e8f2;background:#fff;box-shadow:none;}
  2%{border-color:#FD495C;background:rgba(253,73,92,.14);box-shadow:0 0 0 6px rgba(253,73,92,.18);}
  8%,40%{border-color:#9aa0b8;background:#f1f1f6;box-shadow:none;}
  46%{border-color:#4ade80;background:rgba(74,222,128,.14);box-shadow:0 0 0 6px rgba(74,222,128,.16);}
  52%{border-color:#e7e8f2;background:#fff;box-shadow:none;}
}
.av-node{position:relative;width:100%;aspect-ratio:1;border-radius:10px;background:#fff;border:1.5px solid #e7e8f2;display:flex;align-items:center;justify-content:center;animation:avNodeCycle 9s ease-in-out infinite;}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Ordutick)
   Dashboard de fichajes en vivo: lector de tarjeta con anillo y tarjeta
   "tap", fila de fichajes cicladas, contador, chips flotantes; iconos
   animados de las 4 formas de fichar; puntos fluyendo en la integración
   con TPVCloud; reloj con agujas girando y ticket deslizándose.
   ===================================================================== */
@keyframes otChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes otDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes otLiveBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes otRowIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes otBadgeTap{0%,100%{transform:translateY(-11px);}42%,58%{transform:translateY(5px);}}
@keyframes otRing{0%,44%{box-shadow:0 0 0 0 rgba(253,73,92,.55);opacity:0;}50%{opacity:1;}72%{box-shadow:0 0 0 14px rgba(253,73,92,0);opacity:0;}100%{opacity:0;}}
@keyframes otCheckFlash{0%,46%{opacity:0;transform:scale(.5);}54%{opacity:1;transform:scale(1.2);}64%{opacity:1;transform:scale(1);}84%,100%{opacity:0;transform:scale(1);}}
@keyframes otFlowDot{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}94%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes otLinkPulse{0%,100%{opacity:.35;}50%{opacity:1;}}
@keyframes otTapMove{0%,100%{transform:translateY(0);}45%,55%{transform:translateY(6px);}}
@keyframes otSyncSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes otStamp{0%,100%{transform:translateY(-8px) rotate(-6deg);}45%,55%{transform:translateY(4px) rotate(-6deg);}}
@keyframes otTicketSlide{0%,40%{transform:translateY(0);opacity:0;}50%{opacity:1;}100%{transform:translateY(16px);opacity:0;}}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Fabricación Integral)
   Dashboard de coste en vivo con filas cicladas + contador acumulado +
   badge de desviación; puntos fluyendo en los diagramas de flujo;
   engranaje girando; barras del gráfico creciendo; iconos con pulso o
   barrido en las tarjetas de hojas de ruta.
   ===================================================================== */
@keyframes fiRowIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
@keyframes fiChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes fiDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes fiLiveBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes fiCheckPop{0%,100%{opacity:0;transform:scale(.6);}18%,82%{opacity:1;transform:scale(1);}}
@keyframes fiFlowDot{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}94%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes fiGearSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes fiBarGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes fiIconPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes fiSweep{0%,100%{transform:translateX(-6px);}50%{transform:translateX(6px);}}
.fi-card{transition:transform .3s ease,box-shadow .3s ease;}
.fi-card:hover{transform:translateY(-4px);}
.fi-bar{transform-origin:bottom;animation:fiBarGrow 1s cubic-bezier(.16,1,.3,1) both;}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Desarrollo a Medida)
   Mockup "app montándose" del hero (ventana con sidebar, bloques que
   aparecen y estado MONTANDO/LISTO, gestionado por ukabi-hero.js);
   línea de proceso y diagrama de encaje con puntos fluyendo por SVG.
   ===================================================================== */
@keyframes daInRight{from{opacity:0;transform:translateY(24px) scale(.985);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes daFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes daFloat2{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
@keyframes daDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes daBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes daNavIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes daBlockIn{from{opacity:0;transform:translateY(16px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes daBar{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes daFlowDot{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}94%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
.da-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;}
@media (max-width:767px){
  .da-steps{grid-template-columns:1fr!important;gap:36px!important;}
  .da-steps-line{display:none!important;}
}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Infraestructura TIC)
   Sala de servidores con LEDs parpadeantes y barras de CPU; sincronización
   cloud con icono girando; paquetes de datos fluyendo oficina↔cloud;
   filas del antivirus y de la cola de soporte apareciendo; icono de
   escudo pulsante; chips flotantes.
   ===================================================================== */
@keyframes itChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes itDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.45);}50%{box-shadow:0 0 0 9px rgba(74,222,128,0);}}
@keyframes itSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes itBarPulse{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.55);}}
@keyframes itPacket{0%{left:0%;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{left:100%;opacity:0;}}
@keyframes itRowIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes itShieldPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.3);}50%{box-shadow:0 0 0 10px rgba(253,73,92,0);}}
@keyframes itTicketIn{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes itLed{0%,100%{opacity:1;}50%{opacity:.3;}}
.it-bar{transform-origin:bottom;animation:itBarPulse 1.8s ease-in-out infinite;}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Oficina Virtual e Impresión)
   Documento que "sube" y aparece indexado (DocuWare), barra de liberación
   de impresión con pulso en el badge (PaperCut), puntos fluyendo en los
   diagramas de flujo, filas de cola de impresión apareciendo, barra de
   consumibles oscilando y camión de reparto animado.
   ===================================================================== */
@keyframes ovChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes ovDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.45);}50%{box-shadow:0 0 0 9px rgba(74,222,128,0);}}
@keyframes ovSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes ovPacket{0%{left:0%;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{left:100%;opacity:0;}}
@keyframes ovRowIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes ovBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.35);}50%{box-shadow:0 0 0 10px rgba(253,73,92,0);}}
@keyframes ovDocRise{0%{opacity:0;transform:translateY(14px) scale(.9);}30%{opacity:1;transform:translateY(0) scale(1);}80%{opacity:1;}100%{opacity:0;transform:translateY(-14px) scale(.92);}}
@keyframes ovTruck{0%{transform:translateX(-6px);}50%{transform:translateX(6px);}100%{transform:translateX(-6px);}}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Contabilidad y Fiscal · v2)
   Diagrama Factura→Contabilidad→Modelo con puntos viajando por la línea,
   tags que aparecen y se van, sello de "presentado"; iconos de tarjetas
   con respiración/inclinación suave; línea punteada animada.
   ===================================================================== */
@keyframes cfBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes cfDot1{0%,6%{opacity:0;transform:translate(0,0);}14%{opacity:1;}46%{opacity:1;transform:translate(74px,-4px);}52%{opacity:0;transform:translate(74px,-4px);}100%{opacity:0;}}
@keyframes cfDot2{0%,56%{opacity:0;transform:translate(0,0);}64%{opacity:1;}96%{opacity:1;transform:translate(74px,4px);}100%{opacity:0;transform:translate(74px,4px);}}
@keyframes cfStamp{0%,58%{transform:scale(0) rotate(-14deg);opacity:0;}68%{transform:scale(1.18) rotate(-14deg);opacity:1;}76%{transform:scale(1) rotate(-14deg);opacity:1;}96%{transform:scale(1) rotate(-14deg);opacity:1;}100%{transform:scale(0) rotate(-14deg);opacity:0;}}
@keyframes cfTagFade{0%,60%{opacity:0;transform:translateY(4px);}72%{opacity:1;transform:translateY(0);}92%{opacity:1;}100%{opacity:0;transform:translateY(-4px);}}
@keyframes cfDashFlow{from{stroke-dashoffset:0;}to{stroke-dashoffset:-28;}}
@keyframes iconBreathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-3px) scale(1.04);}}
@keyframes iconTilt{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-6deg);}}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Empresa / Nosotros)
   Diagrama "hub" con ukabi en el centro y 4 líneas de negocio orbitando,
   puntos viajando hacia el hub, nodos flotando, icono Vexia con destello
   giratorio, conector "puzzle" entre misión y visión, punto del stepper
   del método Ukabi.
   ===================================================================== */
@keyframes hubPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.35);}50%{box-shadow:0 0 0 10px rgba(253,73,92,0);}}
@keyframes nodeFloat{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-6px);}}
@keyframes flowToHub{0%{offset-distance:0%;opacity:0;}10%{opacity:1;}92%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes sparkleSpin{from{transform:rotate(0deg) scale(1);}50%{transform:rotate(180deg) scale(1.15);}to{transform:rotate(360deg) scale(1);}}
@keyframes puzzleJoin{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
@keyframes stepPulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.partner-pill{filter:grayscale(1) opacity(.55);transition:filter .3s ease,transform .3s ease;}
.partner-pill:hover{filter:grayscale(0) opacity(1);transform:translateY(-2px);}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Vexia Work)
   Mockup de chat A3ERP con ciclo escribiendo→filas→gráfico→resumen,
   chips flotantes, diagrama Excel→Vexia Work→ERP con puntos viajando,
   barras de estadísticas, engranaje de "bloques a medida", anillo de
   pulso del icono "qué podrías automatizar".
   ===================================================================== */
@keyframes vwChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes vwDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes vwTypeDot{0%,100%{opacity:.25;transform:translateY(0);}50%{opacity:1;transform:translateY(-2px);}}
@keyframes vwRowIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes vwBarGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes vwFlowDot{0%{offset-distance:0%;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes vwUpPulse{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(-5px);opacity:1;}}
@keyframes vwGearSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vwBlockPop{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.vw-module-card{transition:transform .3s ease,box-shadow .3s ease;}
.vw-module-card:hover{transform:translateY(-4px);}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Contacto)
   Mockup de "Formulario de contacto" con ciclo escribiendo → enviado →
   respuesta, chips flotantes de sedes con pin que rebota, check de envío
   con anillo expansivo, icono de email con vaivén.
   ===================================================================== */
@keyframes cChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes cTypeDot{0%,100%{opacity:.25;transform:translateY(0);}50%{opacity:1;transform:translateY(-2px);}}
@keyframes cPinBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes cCheckPop{0%{opacity:0;transform:scale(.4);}60%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
@keyframes cRing{0%{opacity:.55;transform:scale(.9);}100%{opacity:0;transform:scale(1.7);}}
@keyframes cMailFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-7px) rotate(-3deg);}}
.sede-card{transition:transform .3s ease,box-shadow .3s ease;}
.sede-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(15,32,108,.4);}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Consultoría Tecnológica)
   Anillo de diagnóstico con cuenta ascendente, hoja de ruta con checks
   apareciendo en bucle, chips flotantes, iconos "eco" con resalte
   cíclico, puntos viajando entre bloques, hub con nodos parpadeantes.
   ===================================================================== */
@keyframes ctChipFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes ctDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.45);}50%{box-shadow:0 0 0 9px rgba(253,73,92,0);}}
@keyframes ctCheckPop{0%{opacity:0;transform:scale(.4);}60%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
@keyframes ctDotTravel{0%{left:-3px;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:calc(100% - 3px);opacity:0;}}
@keyframes ctHubPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,73,92,.35);}50%{box-shadow:0 0 0 12px rgba(253,73,92,0);}}
@keyframes ctSpokeFlash{0%,88%,100%{opacity:.35;}6%{opacity:1;}}
.ct-eco-chip{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.ct-eco-chip.is-active{transform:translateY(-4px);border-color:#FD495C !important;box-shadow:0 14px 26px -16px rgba(253,73,92,.5);}
.ct-spoke-node{animation:ctSpokeFlash 4.8s ease-in-out infinite;}

/* =====================================================================
   PÁGINA BLOG — chips de categoría y tarjetas de post (Post Cards)
   Sin keyframes nuevos: solo transiciones de hover/estado activo.
   ===================================================================== */
.cat-chip{border:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;padding:9px 18px;border-radius:30px;transition:all .2s ease;white-space:nowrap;text-decoration:none;display:inline-block;}
.cat-chip.is-active{background:#0F206C;color:#fff;}
.cat-chip:not(.is-active){background:#fff;color:#0F206C;border:1px solid #dcdcec;}
.cat-chip:not(.is-active):hover{border-color:#FD495C;color:#FD495C;}
.post-card{transition:transform .25s ease,box-shadow .25s ease;}
.post-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(15,32,108,.35);}
.post-card-featured:hover{box-shadow:0 30px 70px -30px rgba(15,32,108,.4);}
.uk-blog-meta-cat,.uk-blog-meta-cat *{font-family:'Space Mono',monospace!important;letter-spacing:.1em;text-transform:uppercase;}
.uk-blog-meta-cat a{text-decoration:none!important;}

/* =====================================================================
   ENTRADA DEL BLOG (Theme Builder — Publicación única)
   Tipografía del cuerpo del artículo (contenido dinámico del post).
   ===================================================================== */
.article-body p{font-weight:400;font-size:16.5px;line-height:1.8;color:#374057;margin:0 0 22px;}
.article-body h2{font-weight:800;font-size:25px;line-height:1.3;letter-spacing:-.01em;color:#0F206C;margin:44px 0 18px;}
.article-body h3{font-weight:700;font-size:20px;line-height:1.35;color:#0F206C;margin:32px 0 14px;}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px;}
.article-body li{font-weight:400;font-size:16.5px;line-height:1.75;color:#374057;margin-bottom:10px;}
.article-body strong{color:#0F206C;font-weight:700;}
.article-body img{max-width:100%;border-radius:14px;margin:8px 0 22px;}
.article-body a{color:#FD495C;font-weight:600;}
.uk-related-card{transition:transform .25s ease,box-shadow .25s ease;}
.uk-related-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(15,32,108,.35);}

/* =====================================================================
   WIDGETS DEL HERO Y CONTENIDO (página Nómina y RRHH · v2, rediseño
   completo). Mockup "Ciclo de nómina" con contador en vivo, pipeline de
   3 pasos con puntos viajando, badges con check; anillo/barras del
   bloque de cifras; iconos con flotación/giro; sello "−85%".
   Reutiliza ukabi-pulse (idéntico a "pulse" del diseño) y vwGearSpin
   (idéntico a "spinSlow") en vez de duplicar keyframes.
   ===================================================================== */
@keyframes nomFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes nomRingPulse{0%{transform:scale(.75);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@keyframes nomDashFlow{to{stroke-dashoffset:-60;}}
@keyframes nomPopCheck{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.22);opacity:1}}
@keyframes nomTravelDot{0%{left:2%;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{left:96%;opacity:0;}}
@keyframes nomStepGlow{0%,25%,100%{opacity:.4;transform:scale(1);}12%{opacity:1;transform:scale(1.08);}}
@keyframes nomGrowBar{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
@keyframes nomSparkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0deg);}50%{opacity:1;transform:scale(1.15) rotate(25deg);}}