/* ==========================================================================
   Grupo Innova — Regional Operations Network (innova-network-map component)
   Palette: navy / violet / lavender / white. No Arial anywhere — every text
   node inherits the site's brand typeface.
   ========================================================================== */

:root {
  --inm-navy: #150b21;
  --inm-navy-2: #1d1030;
  --inm-violet: #3b198a;
  --inm-current: #a78bfa;
  --inm-current-soft: rgba(167, 139, 250, 0.28);
  --inm-future: #2dd4bf;
  --inm-future-soft: rgba(45, 212, 191, 0.28);
  --inm-white: #ffffff;
}

.inm-root {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
}

/* Horizontal, cinematic framing — not a tall vertical block. Height caps
   keep map+form sections inside roughly one 1440x900 viewport. */
.inm-mode-story { aspect-ratio: 1200 / 650; max-height: 620px; min-height: 520px; }
.inm-mode-compact,
.inm-mode-contact { aspect-ratio: 16 / 10; height: 100%; min-height: 420px; }

.inm-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(120% 130% at 20% 15%, #241539 0%, var(--inm-navy) 62%, #0d0716 100%);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.14);
}

.inm-svg {
  display: block;
  width: 100%;
  height: 100%;
  font-family: inherit;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.inm-svg.is-fade-in,
.inm-svg.is-visible { opacity: 1; }
.inm-mode-compact .inm-svg,
.inm-mode-contact .inm-svg { transition: opacity 0.7s ease; }

.inm-svg text { font-family: inherit; fill: var(--inm-white); }

/* ---------------- countries ---------------- */

.inm-country {
  fill: rgba(167, 139, 250, 0.10);
  stroke: rgba(167, 139, 250, 0.22);
  stroke-width: 0.6;
  transition: opacity 0.5s ease, fill 0.5s ease, filter 0.5s ease;
}
.inm-country--focus {
  fill: rgba(167, 139, 250, 0.16);
  stroke: rgba(167, 139, 250, 0.45);
  stroke-width: 0.9;
}
.inm-svg.is-local .inm-country:not(.inm-country--focus) { opacity: 0.28; }
.inm-svg.is-local .inm-country--focus {
  fill: rgba(167, 139, 250, 0.20);
  stroke: rgba(167, 139, 250, 0.62);
  filter: drop-shadow(0 0 7px rgba(167, 139, 250, 0.35));
}

/* At the América scale, 12 hub labels collapse into an illegible pile over a
   handful of pixels — only meaningful once zoomed into Panamá + Costa Rica. */
.inm-svg:not(.is-local) .inm-node-label { display: none; }

/* The expansion / visión-regional layer only makes sense at the América
   scale — zoomed into Panamá + Costa Rica its arcs point far off-canvas. */
.inm-svg.is-local .inm-expansion-links,
.inm-svg.is-local .inm-expansion-nodes { display: none; }

/* ---------------- current network: links ---------------- */

.inm-link {
  fill: none;
  stroke: var(--inm-current);
  stroke-width: 1.1;
  stroke-dasharray: 1 4.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.inm-link.is-enter { opacity: 0.55; }
.inm-link--backbone {
  stroke-width: 1.6;
  stroke-dasharray: 1.5 5;
}
.inm-link--backbone.is-enter {
  opacity: 0.8;
  animation: inmFlow 5.5s linear infinite;
}
@keyframes inmFlow {
  to { stroke-dashoffset: -65; }
}

/* ---------------- current network: nodes ---------------- */

.inm-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease;
}
.inm-node.is-enter { opacity: 1; }

.inm-node-halo {
  fill: none;
  stroke: var(--inm-current);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.inm-node.is-enter .inm-node-halo {
  animation-name: inmHaloPulse;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
@keyframes inmHaloPulse {
  0%   { transform: scale(0.55); opacity: 0.6; }
  70%  { transform: scale(1.15); opacity: 0.18; }
  100% { transform: scale(1.35); opacity: 0; }
}

.inm-node-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
}
.inm-node-core { fill: var(--inm-white); }
.inm-node--main .inm-node-core { fill: var(--inm-white); stroke: var(--inm-current); stroke-width: 2; }
.inm-node--regional .inm-node-core { fill: var(--inm-current); }

.inm-node-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: var(--inm-white);
  paint-order: stroke;
  stroke: rgba(13, 7, 22, 0.75);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.inm-node--regional .inm-node-label { font-size: 10.5px; font-weight: 500; opacity: 0.88; }
.inm-node--main .inm-node-label { font-size: 14.5px; font-weight: 700; }

/* ---------------- expansion (visión regional) layer ---------------- */

.inm-exp-link {
  fill: none;
  stroke: var(--inm-future);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
}
.inm-exp-link.is-enter { opacity: 0.55; }

.inm-exp-node { opacity: 0; transition: opacity 0.4s ease; }
.inm-exp-node.is-enter { opacity: 1; }
.inm-exp-node-glow {
  fill: none;
  stroke: var(--inm-future);
  stroke-width: 1;
  opacity: 0.35;
}
.inm-exp-node-core {
  fill: rgba(45, 212, 191, 0.12);
  stroke: var(--inm-future);
  stroke-width: 1.4;
}
.inm-exp-node.is-arriving .inm-exp-node-glow {
  animation: inmArrive 1.1s ease-out 1;
}
@keyframes inmArrive {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------------- hidden state ---------------- */
.inm-link.is-hidden,
.inm-node.is-hidden,
.inm-exp-link.is-hidden,
.inm-exp-node.is-hidden { display: none; }

/* ---------------- expansion: strategic market labels ---------------- */

.inm-exp-node-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: rgba(255, 255, 255, 0.82);
  paint-order: stroke;
  stroke: rgba(13, 7, 22, 0.7);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* ---------------- story: editorial copy panel (fills the empty space) --- */

.inm-story-copy {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  width: min(320px, 28%);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.inm-story-copy.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); }
.inm-story-kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--inm-current);
  margin-bottom: 10px;
}
.inm-story-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.inm-story-text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}
@media (max-width: 991px) {
  .inm-story-copy { display: none; }
}

/* ---------------- HUD label ---------------- */

.inm-hud {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 7, 22, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.3);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.inm-hud.is-visible { opacity: 1; transform: translateY(0); }
.inm-hud-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--inm-current);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
}

/* ---------------- legend ---------------- */

.inm-legend {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 7, 22, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.22);
  backdrop-filter: blur(6px);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.inm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.inm-legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.inm-legend-dot--current { background: var(--inm-current); }
.inm-legend-dot--future { background: transparent; border: 1.4px solid var(--inm-future); }

/* ---------------- controls ---------------- */

.inm-controls {
  position: absolute;
  left: 20px;
  top: 20px;
  display: inline-flex;
  gap: 6px;
}
.inm-ctrl {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(13, 7, 22, 0.5);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.inm-ctrl:hover,
.inm-ctrl:focus-visible { background: rgba(167, 139, 250, 0.22); color: #fff; border-color: rgba(167, 139, 250, 0.55); }
.inm-ctrl--icon { padding: 7px 11px; font-size: 13px; }

/* ---------------- tooltip ---------------- */

.inm-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  background: rgba(13, 7, 22, 0.92);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.35;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.inm-tooltip strong { display: block; font-size: 12.5px; font-weight: 700; }
.inm-tooltip span { display: block; margin-top: 2px; font-size: 10.5px; color: rgba(255, 255, 255, 0.65); font-weight: 500; }

/* ---------------- compact / contact chrome ---------------- */

.inm-mode-compact .inm-controls,
.inm-mode-compact .inm-legend,
.inm-mode-compact .inm-hud,
.inm-mode-contact .inm-controls,
.inm-mode-contact .inm-legend,
.inm-mode-contact .inm-hud { display: none; }

/* ==========================================================================
   Page-level fit: container width + section height for the pages that
   carry this component (kept here per the fix's file scope).
   ========================================================================== */

/* Presencia: let the map breathe — ~85-90% of the useful width instead of
   the default Bootstrap .container cap. */
.gi-map-container { max-width: 1380px; padding-inline: clamp(30px, 4vw, 70px); }
.gi-map-container .inm-root { max-width: 1320px; }

/* Presencia: Bexon's .section-gap (120px top/bottom) plus heading+desc plus
   a tall map pushed this block past 1.5 viewports. Trim the section padding
   and the gap between the heading block and the map itself. */
.tj-map-section-presencia {
  padding-top: clamp(45px, 5vw, 65px) !important;
  padding-bottom: clamp(45px, 5vw, 65px) !important;
}
.tj-map-section-presencia .sec-heading-wrap { margin-bottom: 40px; }

/* Home + Contacto: the map+form section doesn't need Bexon's default
   100-120px vertical section-gap — trims the block back toward ~1 viewport. */
.gi-network-contact-section {
  padding-top: clamp(45px, 5vw, 70px) !important;
  padding-bottom: clamp(45px, 5vw, 70px) !important;
}

/* Home + Contacto: map and form end on (roughly) the same line instead of
   one trailing far below the other. No internal scrollbar — the form fits
   by trimming its own vertical rhythm (below), not by clipping it. */
.gi-network-row { align-items: stretch; }
.gi-network-row .innova-network-map { height: clamp(480px, 62vh, 620px); }
.gi-network-row .innova-network-map.inm-root { min-height: 0; }

/* Home: shorter form (fewer fields) — keep it close to the map's height. */
.tj-contact-section .gi-network-row .contact-form.style-2 {
  height: clamp(540px, 60vh, 600px);
}
.tj-contact-section .gi-network-row .innova-network-map {
  height: clamp(540px, 60vh, 600px);
}

/* Contacto: more fields — a slightly taller shared height still keeps both
   columns aligned without forcing a scrollbar inside the form. */
.tj-contact-section-2 .gi-network-row .contact-form {
  height: clamp(580px, 68vh, 650px);
}
.tj-contact-section-2 .gi-network-row .innova-network-map {
  height: clamp(580px, 68vh, 650px);
}

/* Trim the form's own vertical rhythm so it fits its clamped height
   naturally — no overflow, no scrollbar, typography untouched. */
.gi-network-row .contact-form,
.gi-network-row .contact-form.style-2 {
  padding-top: 28px;
  padding-bottom: 28px;
}
.gi-network-row .contact-form .title,
.gi-network-row .contact-form.style-2 .title {
  margin-bottom: 18px;
}
.gi-network-row .contact-form .form-input,
.gi-network-row .contact-form.style-2 .form-input {
  margin-bottom: 11px;
}
.gi-network-row .contact-form .form-input.message-input,
.gi-network-row .contact-form.style-2 .form-input.message-input {
  margin-bottom: 8px;
}
.gi-network-row .contact-form .form-input textarea,
.gi-network-row .contact-form.style-2 .form-input textarea {
  height: 68px;
}

@media (max-width: 991px) {
  .gi-network-row .innova-network-map,
  .tj-contact-section .gi-network-row .contact-form.style-2,
  .tj-contact-section .gi-network-row .innova-network-map,
  .tj-contact-section-2 .gi-network-row .contact-form,
  .tj-contact-section-2 .gi-network-row .innova-network-map { height: auto; max-height: none; }
}

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

@media (max-width: 991px) {
  .inm-mode-story { aspect-ratio: 1200 / 820; }
  .inm-node--regional .inm-node-label { font-size: 9.5px; }
}

@media (max-width: 767px) {
  .inm-mode-story { aspect-ratio: 1200 / 980; }
  .inm-mode-compact { aspect-ratio: 1200 / 900; }
  .inm-mode-contact { aspect-ratio: 1200 / 900; }
  .inm-stage { border-radius: 16px; }

  /* Priorizar hubs: sólo Panamá Centro y San José quedan con nombre fijo. */
  .inm-node--regional .inm-node-label { display: none; }
  .inm-node--main .inm-node-label { font-size: 13px; }

  .inm-legend { left: 14px; right: 14px; justify-content: center; font-size: 9.5px; bottom: 14px; }
  .inm-hud { left: 14px; right: 14px; bottom: auto; top: 14px; font-size: 9.5px; justify-content: center; }
  .inm-controls { left: 14px; top: 14px; flex-wrap: wrap; }
  .inm-ctrl { font-size: 10px; padding: 6px 11px; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .inm-svg, .inm-link, .inm-node, .inm-exp-node, .inm-exp-link { transition: none !important; }
  .inm-node-halo, .inm-link--backbone.is-enter, .inm-exp-node.is-arriving .inm-exp-node-glow { animation: none !important; }
}