/* ============================ 16 · CONTACTO + MAPA ============================ */
#contacto.ci{padding-block:clamp(100px,12vw,160px)}
#contacto .ci-horizonte{position:absolute;left:50%;bottom:0;width:min(1100px,140%);height:60%;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(50% 70% at 50% 100%,rgba(46,123,255,.12),transparent 70%)}
#contacto .ci-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,72px);align-items:center}
#contacto .ci-in{display:flex;flex-direction:column;align-items:flex-start}
#contacto h2{font-size:clamp(2.1rem,4.4vw,3.5rem);max-width:15ch;margin-top:22px}
#contacto .ci-in > p{color:var(--mist);margin-top:22px;font-size:1.05rem;max-width:44ch}
#contacto .ci-cta{margin-top:34px}
#contacto .ci-datos{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 0;padding:0}
#contacto .ci-datos a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;color:var(--silver);transition:border-color .18s var(--ease),color .18s var(--ease)}
#contacto .ci-datos a:hover{border-color:var(--line-2);color:var(--white)}
#contacto .ci-datos .ico{width:16px;height:16px;color:var(--accent)}

/* mapa: tarjeta con el mapa oscurecido al tono de la marca */
#contacto .ci-mapa{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2);background:rgba(8,13,24,.9);
  box-shadow:0 60px 120px -60px rgba(0,0,0,.95),0 0 80px -30px rgba(46,123,255,.5)}
#contacto .ci-mapa-marco{position:relative;aspect-ratio:16/11;background:#0A1222;isolation:isolate}
#contacto .ci-mapa-velo{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 60px rgba(4,7,14,.75);
  background:linear-gradient(180deg,rgba(46,123,255,.08),transparent 40%)}
#contacto .ci-mapa-pie{display:flex;align-items:center;gap:14px;padding:18px 20px;border-top:1px solid var(--line)}
#contacto .ci-mapa-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--accent-2);background:rgba(46,123,255,.12);border:1px solid rgba(46,123,255,.3)}
#contacto .ci-mapa-ico svg{width:20px;height:20px}
#contacto .ci-mapa-pie address{flex:1;min-width:0;font-style:normal;font-size:.8rem;line-height:1.5;color:var(--mist)}
#contacto .ci-mapa-pie address b{display:block;color:var(--white);font-weight:500;font-size:.9rem}
#contacto .ci-mapa-pie .btn{flex:none}

@media (max-width:900px){
  #contacto .ci-grid{grid-template-columns:1fr}
  #contacto .ci-in{align-items:center;text-align:center}
  #contacto .ci-datos{justify-content:center}
}
@media (max-width:560px){
  #contacto .ci-cta,#contacto .ci-cta .btn{width:100%}
  #contacto .ci-datos{flex-direction:column;align-items:stretch;width:100%;margin-top:32px}
  #contacto .ci-datos a{justify-content:center}
  #contacto .ci-mapa-marco{aspect-ratio:4/3.4}
  #contacto .ci-mapa-pie{flex-wrap:wrap;padding:16px}
  #contacto .ci-mapa-pie .btn{width:100%}
}

/* fondo de marca */
#contacto .ci-fondo{position:absolute;inset:0;z-index:-2;pointer-events:none}
#contacto .ci-fondo img{object-position:50% 40%;filter:saturate(1.1) blur(2px)}
#contacto .ci-fondo::after{background:linear-gradient(180deg,rgba(4,7,14,.95),rgba(4,7,14,.88) 40%,rgba(4,7,14,.99)),radial-gradient(60% 70% at 50% 45%,rgba(46,123,255,.2),transparent 70%)}

/* ---------- mapa tecnológico (SVG propio) ---------- */
#contacto .ci-mapa-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#contacto .mp-manzanas rect{fill:rgba(46,123,255,.055)}
#contacto .mp-calle{stroke:rgba(120,165,255,.18);stroke-width:1.4;fill:none}
#contacto .mp-avenida{stroke:rgba(95,208,255,.42);stroke-width:3.4;fill:none}
#contacto .mp-diagonal{stroke:rgba(95,208,255,.5);stroke-width:4.4;fill:none;stroke-linejoin:round}
#contacto .mp-parque{fill:rgba(63,191,164,.14);stroke:rgba(63,191,164,.3);stroke-width:1}
/* destellos de tráfico: un solo trazo animado por avenida, muy barato de dibujar */
#contacto .mp-flujo{stroke:#9FE0FF;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:14 190;opacity:.75;
  animation:mp-flujo 7s linear infinite}
#contacto .mp-flujo-2{stroke:#7FB4FF;animation-duration:9s;animation-delay:-3s}
@keyframes mp-flujo{from{stroke-dashoffset:0}to{stroke-dashoffset:-1224}}
#contacto .mp-rotulo{fill:rgba(159,190,235,.55);font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.18em}
#contacto .mp-punto{transform-box:fill-box}
#contacto .mp-nucleo{fill:#2E7BFF;stroke:#DCEBFF;stroke-width:2.5}
#contacto .mp-nucleo-luz{fill:#EAF6FF}
#contacto .mp-onda{fill:none;stroke:#5FD0FF;stroke-width:2;opacity:0;transform-origin:center;animation:mp-onda 3.4s cubic-bezier(.2,.6,.3,1) infinite}
#contacto .mp-onda-2{animation-delay:1.7s}
@keyframes mp-onda{0%{opacity:.85;transform:scale(.55)}70%{opacity:0;transform:scale(3.2)}100%{opacity:0;transform:scale(3.2)}}
#contacto .mp-aura{animation:mp-aura 5s ease-in-out infinite;transform-origin:center}
@keyframes mp-aura{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
#contacto .mp-globo path{stroke:rgba(95,208,255,.7);stroke-width:2}
#contacto .mp-globo rect{fill:rgba(4,10,22,.92);stroke:rgba(95,208,255,.55);stroke-width:1.6}
#contacto .mp-globo text{fill:#EAF6FF;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.14em}
#contacto .mp-globo{animation:mp-globo 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes mp-globo{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#contacto .ci-mapa-etq{position:absolute;left:14px;top:12px;z-index:3;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);
  padding:6px 11px;border-radius:999px;background:rgba(4,7,14,.6);border:1px solid rgba(120,165,255,.22)}
@media (max-width:560px){
  #contacto .mp-rotulo{font-size:17px}
  #contacto .mp-calle{stroke-width:2}
}