/* ============================================================
   La acumulación de capacidad — sección interactiva (Cómo funciona)
   ============================================================ */
.capacidad {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(130px * var(--density)) 0;
  background:
    radial-gradient(1000px 600px at 50% 0%, rgba(6,0,213,.16), transparent 60%),
    #0b0d11;
}
.capacidad .section-head h2 { color: #fff; }
.capacidad .section-head p { color: rgba(255,255,255,.66); }
.capacidad .kicker { color: var(--c-blue-light); }
.capacidad .kicker::before { background: var(--c-blue-light); }

/* ---- gráfica principal ---- */
.cap-chart {
  margin-top: 56px; position: relative; border-radius: 24px; padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.1);
}
.cap-chart .org-tag {
  position: absolute; left: 9%; top: 21%; font-size: 12px; color: rgba(255,255,255,.9);
  font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.cap-chart .org-tag::before {
  content: ""; width: 22px; height: 0; flex: none; border-top: 3px dashed rgba(255,255,255,.7);
}
.cap-chart .bac-tag {
  position: absolute; left: 9%; top: 13%; font-size: 13px; color: var(--c-blue-light);
  font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.cap-chart .bac-tag::before {
  content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--c-blue-light);
  box-shadow: 0 0 8px rgba(103,182,239,.8);
}
.cap-svg { width: 100%; height: clamp(320px, 38vw, 440px); display: block; overflow: visible; }
.cap-grid line { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.cap-flat { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2.5; stroke-dasharray: 5 6; }
.cap-area { opacity: 0; }
.reveal.in .cap-area { opacity: 1; transition: opacity 1.4s ease 1.2s; }
.cap-exp { fill: none; stroke: var(--c-blue-light); stroke-width: 3.5; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(103,182,239,.6));
  stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.reveal.in .cap-exp { stroke-dashoffset: 0; transition: stroke-dashoffset 3s cubic-bezier(.42,0,.2,1); }

.cap-mk { opacity: 0; }
.reveal.in .cap-mk { animation: capPop .55s cubic-bezier(.2,1.2,.3,1) forwards; }
@keyframes capPop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.cap-mk circle { fill: #fff; filter: drop-shadow(0 0 7px rgba(103,182,239,.9)); }
.cap-mk .mk-box { fill: #14171d; stroke: rgba(103,182,239,.45); }
.cap-mk .mk-t { fill: #fff; font: 600 13px Poppins, sans-serif; }
.cap-mk .mk-m { fill: var(--c-blue-light); font: 700 13px Poppins, sans-serif; }
body.no-anim .cap-exp { stroke-dashoffset: 0; }
body.no-anim .cap-mk, body.no-anim .cap-area { opacity: 1; }

/* ---- capas permanentes de capacidad ---- */
.cap-layers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 22px; }
.cap-layer {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--c-blue-light);
  border-radius: 10px; padding: 13px 14px;
}
.cap-layer b { display: block; font-size: 12.5px; color: #fff; font-weight: 600; line-height: 1.3; }
.cap-layer span { font-size: 11px; color: var(--c-blue-light); font-weight: 600; }
@media (max-width: 820px) { .cap-layers { grid-template-columns: 1fr 1fr; } }

/* ---- split: tradicional vs Bacatá ---- */
.cap-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 80px; }
.cap-card { border-radius: 20px; padding: 26px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.cap-card.us { background: linear-gradient(180deg, rgba(103,182,239,.12), rgba(6,0,213,.06)); border-color: rgba(103,182,239,.4); }
.cap-card h4 { font-size: 16px; color: #fff; font-weight: 600; }
.cap-card .sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }
.cap-card svg { width: 100%; height: 130px; margin-top: 16px; display: block; overflow: visible; }
.cap-card .mini { fill: none; stroke-width: 3; stroke-linecap: round; }
.cap-card.trad .mini { stroke: rgba(255,255,255,.4); }
.cap-card.us .mini { stroke: var(--c-blue-light); filter: drop-shadow(0 0 6px rgba(103,182,239,.55)); }
@media (max-width: 720px) { .cap-split { grid-template-columns: 1fr; } }

/* ---- circuito ---- */
.cap-circuit { margin: 80px auto 0; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.cap-node {
  width: 100%; text-align: center; padding: 18px 24px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -.01em;
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.cap-node.lit { border-color: var(--c-blue-light); background: rgba(103,182,239,.1); box-shadow: 0 0 30px rgba(103,182,239,.25); color: var(--c-blue-light); }
.cap-arrow { height: 34px; width: 2px; background: rgba(255,255,255,.15); position: relative; margin: 6px 0; transition: background .4s ease; }
.cap-arrow.lit { background: var(--c-blue-light); box-shadow: 0 0 10px rgba(103,182,239,.7); }
.cap-arrow::after { content: "▼"; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: 9px; color: inherit; }
.cap-arrow.lit::after { color: var(--c-blue-light); }

/* ---- cita central ---- */
.cap-quote { max-width: 820px; margin: 86px auto 0; text-align: center; }
.cap-quote h3 { font-size: clamp(24px, 2.8vw, 34px); color: #fff; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.cap-quote p { font-size: 16px; color: rgba(255,255,255,.62); line-height: 1.65; margin-top: 22px; }
.cap-quote .seq { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.cap-quote .seq span { font-size: 13px; color: var(--c-blue-light); font-weight: 600; padding: 6px 14px; border: 1px solid rgba(103,182,239,.3); border-radius: 20px; }

/* ---- indicadores finales ---- */
.cap-ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 80px; }
.cap-ind-b { text-align: center; padding: 30px 20px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.cap-ind-b .ind-l { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; }
.cap-ind-b .ind-n { font-size: clamp(40px, 4.6vw, 60px); font-weight: 700; color: #fff; letter-spacing: -.04em; margin-top: 14px; font-variant-numeric: tabular-nums; line-height: 1; }
.cap-ind-b .ind-n .u { color: var(--c-blue-light); }
.cap-ind-b .ind-seq { font-size: 12.5px; color: rgba(255,255,255,.4); margin-top: 14px; letter-spacing: .04em; }
@media (max-width: 820px) { .cap-ind { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; } }

/* ---- cierre ---- */
.cap-close { text-align: center; margin-top: 90px; }
.cap-close h3 { font-size: clamp(30px, 4vw, 50px); color: #fff; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.cap-close h3 .accent { color: var(--c-blue-light); }
.cap-close p { font-size: 17px; color: rgba(255,255,255,.62); line-height: 1.6; max-width: 660px; margin: 22px auto 0; }
.cap-close .hero-actions { justify-content: center; margin-top: 36px; }