/* Conexia — Floating WhatsApp + Sticky CTA bar
   Inyectados por cx-cta.js. */

/* ════════════ FLOATING WHATSAPP ════════════ */
.cx-cta-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9050;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: #25D366;
  color: #fff;
  font-family: var(--cx-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(37, 211, 102, .50), 0 2px 6px rgba(2,21,33, .12);
  transform: translateY(60px) scale(.85);
  opacity: 0;
  pointer-events: none;
  transition: transform 460ms cubic-bezier(.34,1.56,.64,1), opacity 320ms ease, box-shadow 220ms ease;
  will-change: transform, opacity;
}
.cx-cta-wa.is-in {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.cx-cta-wa:hover {
  background: #1faa56;
  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, .60), 0 4px 10px rgba(2,21,33, .15);
  color: #fff;
}
.cx-cta-wa__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cx-cta-wa__icon svg { width: 20px; height: 20px; }
.cx-cta-wa__icon::after {
  /* Pulse ring */
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .50);
  animation: cx-cta-wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes cx-cta-wa-pulse {
  0%   { transform: scale(.95); opacity: .80; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (max-width: 540px) {
  /* En mobile sólo icono circular */
  .cx-cta-wa { padding: 0; width: 56px; height: 56px; justify-content: center; border-radius: 50%; bottom: 18px; right: 18px; }
  .cx-cta-wa__label { display: none; }
  .cx-cta-wa__icon { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-cta-wa { transition: opacity 200ms ease; }
  .cx-cta-wa__icon::after { animation: none; }
}

/* ════════════ STICKY CTA BAR ════════════ */
.cx-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9020;
  /* Azul de marca (no navy oscuro): antes el #021521 era idéntico al footer y la
     barra se "fundía" con él al llegar abajo → parecía que desaparecía. */
  background: linear-gradient(135deg, #17306d 0%, #21407f 48%, #00828c 130%);
  color: #fff;
  font-family: var(--cx-font);
  border-top: 1px solid rgba(130, 170, 255, .35);
  box-shadow: 0 -10px 34px -8px rgba(2,21,33, .45);
  display: none;            /* oculta hasta el trigger de scroll; sin animación de entrada */
}
.cx-cta-bar.is-in {
  display: block;           /* aparece estática, sin deslizamiento */
}
/* La barra "se aparca" encima del footer: mientras scrolleas va fija a bottom:0
   (te sigue); cuando el footer entra en pantalla, el JS la eleva (is-above-foot)
   para que se POSE justo encima del footer, dejándolo entero visible debajo.
   Para que no quede franja blanca en ese hueco, el footer reduce su margin-top al
   alto exacto de la barra (--cx-cta-bar-h) cuando la barra está activa: así la barra
   rellena ese hueco sin solapar contenido ni dejar blanco. Sin animación. */
.cx-cta-bar.is-above-foot { bottom: var(--cx-foot-overlap, 0px); }
body.cx-cta-bar-active .cx-foot { margin-top: var(--cx-cta-bar-h, 68px); }
.cx-cta-bar__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cx-cta-bar__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  min-width: 220px;
}
.cx-cta-bar__text strong { color: #fff; font-weight: 700; }
.cx-cta-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cx-cta-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.18);
  transition: all 200ms ease;
}
.cx-cta-bar__phone:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
  transform: translateY(-1px);
}
.cx-cta-bar__phone svg { width: 16px; height: 16px; }
.cx-cta-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00828c, #1ca4af);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  box-shadow: 0 4px 14px -2px rgba(28,164,175, .45);
  transition: all 200ms ease;
  white-space: nowrap;
}
.cx-cta-bar__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -4px rgba(28,164,175, .55);
  color: #fff;
}
.cx-cta-bar__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 200ms ease;
  flex-shrink: 0;
}
.cx-cta-bar__close:hover {
  background: rgba(255,255,255,.10);
  transform: rotate(90deg);
}
.cx-cta-bar__close svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .cx-cta-bar__inner { padding: 10px 16px; gap: 10px; }
  .cx-cta-bar__text { font-size: 12.5px; min-width: 140px; }
  .cx-cta-bar__phone { padding: 7px 12px; font-size: 12.5px; }
  .cx-cta-bar__phone span { display: none; }
  .cx-cta-bar__cta { padding: 8px 14px; font-size: 12.5px; }
}
/* (La barra ya no anima: aparece/desaparece de forma estática, sin transición.) */

/* Cuando el sticky bar está visible, el WhatsApp button sube para no solaparse */
.cx-cta-bar.is-in ~ .cx-cta-wa,
body.cx-cta-bar-active .cx-cta-wa {
  bottom: 88px;
}