/* ==========================================================
   Sección: Soluciones integradas
   ========================================================== */

.integrated-capabilities {
  --cap-bg: #050814;
  --cap-text: #f4f6ff;
  --cap-muted: rgba(214, 222, 255, .72);
  --cap-line: rgba(255, 255, 255, .1);
  --cap-radius: 14px;
  --cap-font: "Poppins", system-ui, sans-serif;
}




.integrated-capabilities {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 8vw, 120px) 0;
  background:
    radial-gradient(60% 70% at 68% 45%, rgba(76, 60, 255, .22), transparent 70%),
    radial-gradient(40% 50% at 10% 20%, rgba(40, 90, 255, .12), transparent 70%),
    var(--cap-bg);
  color: var(--cap-text);
  font-family: var(--cap-font);
}

.capabilities__inner {

  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(340px, 560px) 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}

/* ---------- Texto ---------- */
.capabilities__intro { max-width: 560px; padding-left: clamp(0px, 3vw, 80px); }

.capabilities__eyebrow {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.capabilities__title {
  margin: 0 0 36px;
  font-size: clamp(2.25rem, 2.9vw, 3.3rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.capabilities__title-accent {
  background: linear-gradient(90deg, #2f86ff 0%, #6f5bff 50%, #b04bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.capabilities__intro p:not(.capabilities__eyebrow) {
  margin: 0 0 1.6em;
  font-size: clamp(.95rem, 1vw, 1.05rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--cap-muted);
}

/* ---------- Escenario ---------- */
.capabilities__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.35fr) minmax(220px, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "comunicacion visual continuidad"
    "infra       visual seguridad";
  column-gap: clamp(8px, 1.5vw, 24px);
  row-gap: 32px;
  align-items: center;
}

.capabilities__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* ---------- 1. Visual decorativo ---------- */
.capabilities__visual {
  grid-area: visual;
  position: relative;
  margin: 0 -14%;
  aspect-ratio: 600 / 700;
  z-index: 0;
}

.capabilities__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.capabilities__anchor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 16px var(--accent);
  z-index: 2;
}

/* ---------- 2. Tarjetas ---------- */
.cap-card {
  grid-area: var(--area);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 250px;
  padding: 19px 21px 17px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: var(--cap-radius);
  /* Glass: casi transparente, reflejo diagonal y tinte leve del acento */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 38%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%),
    rgba(12, 18, 44, .28);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--accent) 8%, transparent),
    0 12px 32px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .03);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.cap-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow:
    0 0 32px color-mix(in srgb, var(--accent) 20%, transparent),
    0 12px 32px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.cap-card--left  { justify-self: end; }
.cap-card--right { justify-self: start; }

/* Escalonado que sigue la progresión de capas (de abajo hacia arriba):
   Infraestructura → Seguridad → Comunicación → Continuidad */
[data-connect="continuidad"]  { align-self: start; }
[data-connect="comunicacion"] { align-self: start; margin-top: 10%; }
[data-connect="seguridad"]    { align-self: start; margin-top: 0; }
[data-connect="infra"]        { align-self: start; margin-top: 30%; }

.cap-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--cap-line);
}

.cap-card__icon {
  flex: none;
  width: 31px;
  height: 31px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
}

.cap-card__title {
  margin: 0;
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.3;
}

.cap-card__text {
  margin: 0;
  font-size: .78rem;
  font-weight: 300;
  color: var(--cap-muted);
}

/* Nodo de conexión en el borde de la tarjeta */
.cap-card__node {
  position: absolute;
  top: var(--node-y, 44%);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px var(--accent);
}
.cap-card--left  .cap-card__node { right: -7px; }
.cap-card--right .cap-card__node { left: -7px; --node-y: 58%; }

/* ---------- Líneas de conexión (generadas) ---------- */
.wire-glow  { stroke-width: 6; opacity: .25; filter: blur(4px); }
.wire-line  { stroke-width: 1.5; opacity: .85; }
.wire-pulse {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  animation: wire-flow 3.2s linear infinite;
}

@keyframes wire-flow {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* ==========================================================
   Responsive
   ========================================================== */

/* Laptop: texto arriba, escenario completo abajo */
@media (max-width: 1200px) {
  .capabilities__inner { grid-template-columns: 1fr; }
  .capabilities__intro {
    max-width: 760px;
    padding-left: 0;
    margin: 0;
    text-align: left;
  }
  .capabilities__stage { max-width: 1100px; width: 100%; margin: 0 auto; }
}

/* Tablet: visual arriba, tarjetas en 2x2, sin conexiones */
@media (max-width: 820px) {
  .capabilities__stage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "visual      visual"
      "comunicacion continuidad"
      "infra       seguridad";
    gap: 16px;
  }
  .capabilities__visual { width: min(360px, 70%); margin: 0 auto -24px; justify-self: center; }
  .cap-card { max-width: none; margin-top: 0 !important; align-self: stretch; justify-self: stretch; }
  .capabilities__wires,
  .capabilities__anchor,
  .cap-card__node { display: none; }
  /* Acento superior sustituye a la conexión */
  .cap-card::before {
    content: "";
    position: absolute;
    top: -1px; left: 24px; right: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
  }
}

/* Móvil: una columna, visual más pequeño */
@media (max-width: 560px) {
  .capabilities__intro { text-align: left; }
  .capabilities__stage {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "infra" "seguridad" "comunicacion" "continuidad";
    gap: 14px;
  }
  .capabilities__visual { width: min(260px, 72%); }
  .cap-card { padding: 16px 18px; }
  .cap-card__head { gap: 12px; padding-bottom: 12px; margin-bottom: 11px; }
  .cap-card__icon { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wire-pulse { animation: none; display: none; }
}

.integrated-capabilities{display:block;margin:0;--cap-bg:#00010e;font-size:inherit;background:radial-gradient(ellipse at 68% 45%,#4c3cff26,transparent 65%),radial-gradient(ellipse at 10% 40%,#285aff13,transparent 70%),#00010e}.capabilities__inner{grid-template-columns:minmax(300px,.85fr) minmax(0,1.4fr)}.capabilities__intro{padding-left:0}.capabilities__title{font-size:clamp(2.1rem,3vw,3.2rem);line-height:1.2;font-weight:400}.capabilities__title-accent{background-image:linear-gradient(90deg,#0688ff,#da1fff)}.capabilities__intro p:not(.capabilities__eyebrow){font-size:.9rem;font-weight:400;color:#9daec7;line-height:1.9}.capabilities__stage{grid-template-columns:minmax(150px,1fr) minmax(200px,1.2fr) minmax(150px,1fr);min-width:0}.cap-card{padding:17px 14px}.cap-card__title{font-weight:400}.cap-card__head{gap:9px}.cap-card__icon{width:25px;height:25px}@media(max-width:1200px){.capabilities__inner{grid-template-columns:1fr}.capabilities__intro{max-width:850px}}@media(max-width:820px){.capabilities__stage{grid-template-columns:1fr 1fr}}@media(max-width:560px){.capabilities__stage{grid-template-columns:1fr}}