/* ==========================================================================
   Infraestructura Tecnológica · CAPACIDADES
   Usa del sitio: .section, .container, .eyebrow, .gradient, --header-height.
   Naranja #FF8327 = color identificador de Infraestructura; azul/cian = ambiente.
   ========================================================================== */

/* <main> tiene overflow:hidden en el sitio; clip recorta igual y permite sticky. */
.infrastructure-page main { overflow: clip; }

.icap-section { --orange: #ff8327; --ic-cyan: #00b0d1; position: relative; }
#capacidades { scroll-margin-top: var(--header-height, 80px); }

/* ---------- Encabezado ---------- */
.icap-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 24px; position: relative; z-index: 2; }
.icap-heading .eyebrow { color: #fff; }
.icap-heading h2 { max-width: 640px; }
.icap-lead { font-size: 1rem; line-height: 1.9; color: #9daec7; max-width: 520px; }

/* ---------- Escenario (desktop ≥1024): imagen a todo el ancho de la página ---------- */
.icap-stage { position: relative; height: min(50vw, 860px); }
.icap-visual {
  position: absolute; top: 0; bottom: 0;
  left: calc((100% - 100vw) / 2); width: 100vw;      /* sale del container hasta los bordes */
  margin: 0; overflow: hidden;
}
.icap-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.icap-visual::after {                                /* funde la foto con el fondo en los 4 bordes */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(180deg, #00010e 0%, #00010e00 18%, #00010e00 80%, #00010e 100%),
    linear-gradient(90deg, #00010ecc 0%, #00010e00 16%, #00010e00 84%, #00010ecc 100%);
}
.icap-ambient {
  position: absolute; width: 50%; height: 70%; left: 25%; top: 10%; z-index: 1;
  pointer-events: none; mix-blend-mode: screen; opacity: .3;
  background: radial-gradient(closest-side, #0688ff2e, transparent);
  animation: icap-ambient 16s ease-in-out infinite alternate;
}
@keyframes icap-ambient { to { transform: translate(8%, 6%); } }

/* Resplandor sin bordes */
.icap-halo {
  position: absolute; left: var(--hx, 50%); top: var(--hy, 50%); z-index: 1;
  width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  pointer-events: none; opacity: 0; transform: scale(.8);
  background: radial-gradient(closest-side, #ff8327a6 0%, #ff832752 22%, #0688ff29 52%, #0688ff00 100%);
  filter: blur(8px); mix-blend-mode: screen;
  transition: opacity .5s ease, transform .6s ease, left .45s ease, top .45s ease;
}
.icap-stage.has-active .icap-halo { opacity: 1; transform: none; }

/* Líneas (se dibujan con JS) */
.icap-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.icap-wire { fill: none; stroke: #00b0d1; stroke-width: 1; stroke-opacity: .4; transition: stroke-opacity .45s ease, stroke .45s ease; }
.icap-wire-node { fill: var(--orange); opacity: .75; transition: opacity .45s ease; }
.icap-stage.has-active .icap-wire { stroke-opacity: .14; }
.icap-stage.has-active .icap-wire-node { opacity: .25; }
.icap-stage .icap-wire.is-active { stroke-opacity: 1; stroke: #6fdcf3; stroke-width: 1.3; filter: drop-shadow(0 0 5px #00b0d1); }
.icap-stage .icap-wire-node.is-active { opacity: 1; filter: drop-shadow(0 0 6px #ff8327); }

/* Tarjetas: JS las coloca a la misma distancia del edificio (fallback en CSS). */
.icap-caps { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.icap-cap {
  --w: 232px;
  position: absolute; width: var(--w); transform: translateY(-50%);
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 9px; margin: 0;
  border-radius: 14px; border: 1px solid #ffffff1f;
  background: linear-gradient(135deg, #0e1828cc, #050a18e0);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 #ffffff0d;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.icap-cap[data-side="left"] { left: 0; }
.icap-cap[data-side="right"] { right: 0; }
.icap-cap[data-row="1"] { top: 38%; } .icap-cap[data-row="2"] { top: 55%; } .icap-cap[data-row="3"] { top: 72%; }
.icap-num { display: none; }
.icap-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid #ff832738; background: #ff83270d;
  transition: box-shadow .4s ease, border-color .4s ease;
}
.icap-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icap-name { font-size: .86rem; line-height: 1.35; color: #dfe7f3; transition: color .4s ease; }
.icap-cap:focus-visible { outline: 2px solid var(--ic-cyan); outline-offset: 3px; }
.icap-cap.is-active { background: linear-gradient(135deg, #16243acc, #0a1226e6); border-color: #ffffff3d; }
.icap-cap.is-active .icap-icon { border-color: #ff832770; box-shadow: 0 0 16px -2px #ff832766; }
.icap-cap.is-active .icap-name { color: #fff; }

/* Entrada suave */
@media (prefers-reduced-motion: no-preference) {
  .icap-stage .icap-visual img { opacity: 0; transform: scale(1.02); transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.2,.65,.3,1); }
  .icap-stage.is-in .icap-visual img { opacity: 1; transform: none; }
  .icap-stage .icap-cap { opacity: 0; transition: opacity .7s ease var(--d, 0ms), background .4s, border-color .4s, box-shadow .4s; }
  .icap-stage.is-in .icap-cap { opacity: 1; }
  .icap-wire { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
  .icap-stage.is-in .icap-wire { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease var(--d, 0ms), stroke-opacity .45s, stroke .45s; }
}

/* ---------- Tablet (700–1023): imagen a todo el ancho + 2 columnas, sin líneas ---------- */
@media (max-width: 1023px) {
  .icap-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .icap-stage { height: auto; }
  .icap-visual { position: relative; top: auto; bottom: auto; left: auto; margin-left: calc((100% - 100vw) / 2); aspect-ratio: 1774 / 887; }
  .icap-wires { display: none; }
  .icap-caps { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; pointer-events: auto; }
  .icap-cap { position: relative; top: auto !important; left: auto !important; right: auto !important; transform: none; width: 100%; }
}

/* ---------- Mobile (<700): lista editorial, imagen sticky si hay altura ---------- */
@media (max-width: 699px) {
  .icap-heading h2 { font-size: 2rem; }
  .icap-lead { font-size: .92rem; }
  .icap-visual { aspect-ratio: 4 / 3.3; }
  .icap-visual::after { background: linear-gradient(180deg, #00010e 0%, #00010e00 16%, #00010e00 82%, #00010e 100%); }
  .icap-halo { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .icap-stage.is-sticky .icap-visual { position: sticky; top: var(--header-height, 110px); z-index: 4; }
  .icap-caps { display: block; margin-top: 8px; }
  .icap-caps li + li .icap-cap { border-top: 1px solid #ffffff12; }
  .icap-cap {
    display: grid; grid-template-columns: 28px 30px 1fr; gap: 12px; align-items: center;
    padding: 18px 0; border: 0; border-radius: 0; background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  }
  .icap-stage .icap-cap, .icap-stage.is-in .icap-cap { opacity: .5; transition: opacity .4s ease; }
  .icap-stage .icap-cap.is-active, .icap-stage.is-in .icap-cap.is-active { opacity: 1; background: none; }
  .icap-num { display: block; font-size: .75rem; letter-spacing: .08em; color: #6e89a3; transition: color .4s ease; }
  .icap-icon { width: 30px; height: 30px; border: 0; background: none; }
  .icap-icon svg { stroke: #8fa0b8; transition: stroke .4s ease; }
  .icap-name { font-size: 1.05rem; color: #c9d4e3; }
  .icap-cap.is-active .icap-num { color: var(--orange); }
  .icap-cap.is-active .icap-icon { box-shadow: none; }
  .icap-cap.is-active .icap-icon svg { stroke: var(--orange); }
  .icap-cap.is-active .icap-name { color: #fff; }
  .icap-stage.is-sticky .icap-caps { padding-bottom: 18vh; }
}

@media (prefers-reduced-motion: reduce) {
  .icap-ambient { animation: none; }
  .icap-halo, .icap-cap, .icap-wire { transition: none; }
}