/* ===========================
   service-map.css — «Mapa de tu operación» (soluciones-empresariales)
   3 capas con significado: Operar (azul), Automatizar (naranja), Decidir (azul grisáceo).
   El color nunca va solo: cada capa lleva nombre en la leyenda y la tarjeta.
   =========================== */
.svcmap {
  --op: #002060;   --op-ink: #002060;
  --au: #bf540d;   --au-ink: #b04e0a;
  --de: #46689f;   --de-ink: #3d5f96;
  max-width: 880px;
  margin: 0 auto;
}
:root[data-theme="dark"] .svcmap {
  --op: #2a55b0;   --op-ink: #9db8f2;
  --au: #bf540d;   --au-ink: #f59a5b;
  --de: #6f86ad;   --de-ink: #cdd6e8;
}
.svcmap [data-layer="operar"]      { --lc: var(--op); --li: var(--op-ink); }
.svcmap [data-layer="automatizar"] { --lc: var(--au); --li: var(--au-ink); }
.svcmap [data-layer="decidir"]     { --lc: var(--de); --li: var(--de-ink); }

/* Leyenda */
.svcmap__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.svcmap__legend li { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--text-2); }
.svcmap__legend b { color: var(--li); font-weight: 700; }
.svcmap__legend i { width: 14px; height: 14px; border-radius: 50%; background: var(--lc); flex: none; }
.svcmap__note { text-align: center; font-size: .9375rem; color: var(--text-3); max-width: 60ch; margin: 0 auto 1.5rem; }

/* Lienzo */
.svcmap__stage { position: relative; width: 100%; aspect-ratio: 880 / 700; isolation: isolate; }
.svcmap__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.svcmap__arc  { fill: none; stroke: var(--li); stroke-width: 10; stroke-linecap: round; opacity: .16; }
.svcmap__line { stroke: var(--li); stroke-width: 2; opacity: .5; transition: opacity .2s ease-out; }
.svcmap__pulse { fill: var(--li); }

/* Centro: logo grande + anillo de tres nodos girando despacio */
.svcmap__hub {
  position: absolute; left: 50%; top: 50%; width: 34.1%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  display: grid; place-items: center; z-index: 3;
}
.svcmap__hub img { width: 78%; height: auto; display: block; }
.svcmap__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: svcmap-spin 120s linear infinite; }
.svcmap__ring circle:first-child { fill: none; stroke: var(--blue-line); stroke-width: 2; stroke-dasharray: 2 10; }
.svcmap__ring .n-op { fill: var(--op); }
.svcmap__ring .n-au { fill: var(--au); }
.svcmap__ring .n-de { fill: var(--de); }
@keyframes svcmap-spin { to { transform: rotate(360deg); } }

/* Servicios */
.svcmap__list { margin: 0; padding: 0; list-style: none; }
.svcmap__item { position: absolute; z-index: 2; transform: translate(-50%, -50%); width: min(244px, 28%); }
.svcmap__link {
  display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: .75rem .875rem;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--li);
  border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); text-decoration: none;
  transition: transform .2s ease-out, box-shadow .2s ease-out, opacity .2s ease-out;
}
.svcmap__link:hover, .svcmap__link:focus-visible { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,32,96,.1), 0 10px 24px rgba(0,32,96,.12); }
.svcmap__link:focus-visible { outline: 3px solid var(--li); outline-offset: 3px; }
.svcmap__icon { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--lc); color: var(--on-fill); display: grid; place-items: center; }
.svcmap__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svcmap__name { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--text); }
.svcmap__sub  { display: block; font-size: .875rem; line-height: 1.35; color: var(--text-2); margin-top: 2px; }
.svcmap__why  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Posiciones (centro de cada tarjeta, en % del lienzo 880×700) */
.svcmap__item--0 { left: 29%; top: 15.3%; }
.svcmap__item--1 { left: 71%;   top: 15.3%; }
.svcmap__item--2 { left: 85.5%; top: 41.4%; }
.svcmap__item--3 { left: 78.4%; top: 74%; }
.svcmap__item--4 { left: 50%;   top: 88.6%; }
.svcmap__item--5 { left: 21.6%; top: 74%; }
.svcmap__item--6 { left: 14.5%; top: 41.4%; }

/* Frase de lo que resuelve (al pasar el cursor o enfocar) */
.svcmap__caption {
  min-height: 5.5rem; margin: 1rem auto 0; max-width: 62ch; padding: 1rem 1.25rem; text-align: center;
  font-size: 1.125rem; line-height: 1.5; color: var(--text); border-top: 3px solid var(--li, var(--border));
  background: var(--surface); border-radius: 0 0 var(--radius) var(--radius);
}
.svcmap__caption strong { display: block; color: var(--li, var(--text)); font-size: 1rem; margin-bottom: .25rem; }

/* Resaltar uno y atenuar el resto */
.svcmap.has-active .svcmap__item:not(.is-on) .svcmap__link { opacity: .4; }
.svcmap.has-active .svcmap__line:not(.is-on) { opacity: .12; }
.svcmap.has-active .svcmap__line.is-on { opacity: 1; stroke-width: 3; }

/* Móvil y tableta: lista vertical, mismo orden y colores */
@media (max-width: 920px) {
  .svcmap__legend { flex-direction: column; align-items: flex-start; max-width: 360px; margin-left: auto; margin-right: auto; }
  .svcmap__stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 1rem; }
  .svcmap__lines, .svcmap__caption, .svcmap__arc { display: none; }
  .svcmap__hub { position: relative; left: auto; top: auto; transform: none; width: min(100%, 300px); margin: 0 auto; order: -1; }
  .svcmap__list { display: grid; gap: .75rem; }
  .svcmap__item { position: static; transform: none; width: auto; }
  .svcmap__link { min-height: 72px; align-items: flex-start; }
  .svcmap__why { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; font-size: .9375rem; line-height: 1.5; color: var(--text-2); margin-top: .35rem; }
  .svcmap.has-active .svcmap__item:not(.is-on) .svcmap__link { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .svcmap__ring { animation: none; }
  .svcmap__pulse { display: none; }
  .svcmap__link, .svcmap__line { transition: none; }
  .svcmap__link:hover, .svcmap__link:focus-visible { transform: none; }
}