/* ==========================================================================
   Continuidad Operativa · CAPACIDADES — ajustes sobre /continuidad-capacidades.css
   · Azul #0095E5 = Continuidad (reemplaza el azul verdoso #00B0D1)
   · "Tu operación": borde en degradado #0688FF → #DA1FFF, texto blanco y destello en loop
   · Círculos con el vidrio del botón "Explorar capacidades" (.security-glass-button)
   · Fondo: degradados radiales sutiles
   ========================================================================== */
.continuity-page { --co-blue: #0095e5; --co-grad: linear-gradient(90deg, #0688ff, #7a5cff 50%, #da1fff); }

/* ---------- Fondo: degradados sutiles (azul dominante, toque fucsia), fundidos con #00010E ---------- */
.continuity-page .continuity-capabilities {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 42% 38% at 50% 64%, #0095e521, transparent 70%),
    radial-gradient(ellipse 38% 46% at 10% 30%, #0688ff14, transparent 72%),
    radial-gradient(ellipse 34% 40% at 92% 82%, #da1fff0f, transparent 72%),
    #00010e;
}

/* ---------- Núcleo "Tu operación" ---------- */
.continuity-page .services-core {
  overflow: hidden; height: 76px; width: 360px;
  border: 1px solid var(--co-blue); border-radius: 999px;
  background: linear-gradient(150deg, #071634f0, #030818f0 60%, #061a3aeb);
  box-shadow: 0 0 40px -10px #0688ff80, 0 0 70px -24px #0095e566;
  font-size: .95rem; font-weight: 500; letter-spacing: .02em;
}
.continuity-page .services-ecosystem.has-active .services-core { border-color: var(--co-blue); }
.services-core-text { position: relative; z-index: 1; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px #7fb9ff59; }
.services-core-glint {                         /* destello que cruza la tarjeta */
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 28%;
  background: linear-gradient(100deg, transparent, #7fb9ff1f 40%, #bfe3ff40 50%, #7fb9ff1f 60%, transparent);
  transform: translateX(-130%) skewX(-18deg); pointer-events: none;
}
.continuity-page .services-ecosystem:before { display: none; }   /* sin la línea horizontal a los lados del núcleo */

@media (prefers-reduced-motion: no-preference) {
  .continuity-page .services-core { animation: co-core-breathe 4.8s ease-in-out infinite; }
  .services-core-glint { animation: co-core-glint 4.8s ease-in-out infinite; }
}
@keyframes co-core-glint { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes co-core-breathe {
  0%, 100% { box-shadow: 0 0 40px -10px #0688ff80, 0 0 70px -24px #0095e540; }
  50%      { box-shadow: 0 0 48px -8px #0095e599, 0 0 80px -22px #00b0d14d; }
}

/* ---------- Capacidades ---------- */
.continuity-page .service-number { color: var(--co-blue); border-right-color: #0095e540; transition: text-shadow .3s; }
.continuity-page .service-capability.is-active .service-number { color: var(--co-blue); text-shadow: 0 0 14px #0095e5d9, 0 0 30px #0095e566; }

/* Círculos: estilo de la tarjeta de detalle (azul profundo, borde azul tenue) */
.continuity-page .service-icon {
  background: linear-gradient(135deg, #11233ae8, #030818e8);
  border: 1px solid #0095e538;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 25px #0004;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.continuity-page .service-capability button svg { stroke: var(--co-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, filter .3s; }
.continuity-page .service-capability.is-active .service-icon {
  background: linear-gradient(135deg, #16304ff0, #04102af0);
  border-color: #0095e580;
  box-shadow: 0 8px 25px #0004, 0 0 22px -6px #0095e599;
}
.continuity-page .service-capability.is-active button svg { stroke: #fff; filter: drop-shadow(0 0 5px #0095e5aa); }
.continuity-page .service-capability.is-active button > span:last-child { text-decoration-color: #0095e580; }
.continuity-page .service-capability button:focus-visible { outline-color: var(--co-blue); }

/* Conexiones: base azul tenue; la activa se recorre en azul con glow */
.continuity-page .services-wires .service-wire-base,
.continuity-page .services-wires g.is-active .service-wire-base { stroke: var(--co-blue); stroke-opacity: .28; }
.continuity-page .services-wires .service-wire-highlight { stroke: #33aaff; stroke-width: 1.4; }
.continuity-page .is-visible .services-wires g.is-active .service-wire-highlight { filter: drop-shadow(0 0 3px #0095e5) drop-shadow(0 0 8px #0095e599); }

/* Detalle al activar: vidrio líquido, igual que el botón "Explorar capacidades" del hero */
.continuity-page .service-info {
  background: linear-gradient(180deg, #ffffff1a, #ffffff08);
  border: 1px solid var(--glass-border, rgba(255,255,255,.12));
  backdrop-filter: blur(var(--glass-blur, 18px)); -webkit-backdrop-filter: blur(var(--glass-blur, 18px));
  box-shadow: inset 0 1px 0 #ffffff14;
}
.continuity-page .service-info strong { border-bottom-color: #ffffff1f; }

@media (max-width: 1100px) { .continuity-page .services-core { width: 320px; font-size: .85rem; } }
@media (max-width: 700px) {
  .continuity-page .services-core { width: 100%; height: 64px; }
  .continuity-page .service-capabilities { border-left-color: #0095e530; }
  .continuity-page .service-capability:before { background: #0a5f9e; }
  .continuity-page .service-capability.is-active:before { background: var(--co-blue); box-shadow: 0 0 8px #0095e5; }
  .continuity-page .service-capability.is-active .service-info { border: 1px solid var(--glass-border, rgba(255,255,255,.12)); }
}
@media (prefers-reduced-motion: reduce) {
  .continuity-page .service-icon, .continuity-page .service-number, .continuity-page .service-capability button svg { transition: none; }
}