/* JMDC soluções — mapa de topologia das frentes + especificações (depende de core.css). */

body { font-size: clamp(0.9375rem, .95rem + .15vw, 1.0625rem); }
img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; }
a { color: inherit; }
h1, h2, h3 { color: var(--ivory); margin: 0; font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li { font-size: 0.7188rem; padding: 0.3125rem 0.625rem; border: 1px solid var(--line-2); color: var(--copper-hi); border-radius: 2px; background: rgba(193, 138, 85, .06); }

.nav__list a[aria-current="page"] { color: var(--ivory); }
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.75rem; }

/* ---------- mapa de topologia ---------- */
.topo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "tl  gov tr"
    "infra hub sec"
    "noc bc  dev";
  padding: clamp(0.5rem, 1.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background:
    radial-gradient(40% 45% at 50% 50%, rgba(101, 69, 47, .32), transparent 72%),
    linear-gradient(180deg, #0f0e0d, #141210);
  box-shadow: 0 2.5rem 5rem -2.5rem rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .03);
  isolation: isolate;
}
.topo::before { /* grade técnica fina */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 2rem 2rem; opacity: .35;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%);
}
.topo__links { position: absolute; inset: clamp(0.5rem, 1.5vw, 1.5rem); width: calc(100% - 2 * clamp(0.5rem, 1.5vw, 1.5rem)); height: calc(100% - 2 * clamp(0.5rem, 1.5vw, 1.5rem)); z-index: -1; overflow: visible; }
.topo__links path { fill: none; vector-effect: non-scaling-stroke; }
.topo__mesh path { stroke: rgba(193, 138, 85, .2); stroke-width: 1; stroke-dasharray: 2 6; }
.topo__link {
  stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 6 10;
  animation: flow 2.4s linear infinite;
  transition: stroke .3s, stroke-width .3s;
}
.topo__link.is-active { stroke: var(--copper); stroke-width: 2.5; stroke-dasharray: none; filter: drop-shadow(0 0 0.375rem rgba(193, 138, 85, .7)); }
@keyframes flow { to { stroke-dashoffset: -32; } }

.topo__note { align-self: center; justify-self: center; font-size: 0.6875rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .14em; color: var(--copper); text-align: center; }
.topo__note span { color: rgba(217, 208, 197, .42); }
.topo__note--tl { grid-area: tl; }
.topo__note--tr { grid-area: tr; }
.topo__note--bc { grid-area: bc; }

.topo__hub {
  grid-area: hub; align-self: center; justify-self: center; position: relative;
  display: grid; justify-items: center; align-content: center; gap: 0.375rem; text-align: center;
  width: clamp(9.5rem, 15vw, 12.5rem); aspect-ratio: 1; border-radius: 50%; padding: 1rem;
  background: radial-gradient(circle at 50% 35%, var(--obsidian-2), var(--coal) 75%);
  border: 1px solid var(--copper);
  box-shadow: 0 0 0 0.5rem rgba(193, 138, 85, .05), 0 0 3rem rgba(193, 138, 85, .18);
}
.topo__hub .ico { width: 1.75rem; height: 1.75rem; color: var(--copper); }
.topo__hub strong { color: var(--ivory); font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-stretch: 110%; line-height: 1.1; }
.topo__hub .mono { font-size: 0.625rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.topo__hub-ring { position: absolute; inset: -0.875rem; border-radius: 50%; border: 1px dashed var(--line-2); animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.topo__nodes { display: contents; }
.node { align-self: center; justify-self: center; width: min(100%, 19rem); padding: clamp(0.5rem, 1vw, 1rem); }
.node--gov { grid-area: gov; }
.node--infra { grid-area: infra; }
.node--sec { grid-area: sec; }
.node--noc { grid-area: noc; }
.node--dev { grid-area: dev; }
.node a {
  display: grid; gap: 0.5rem; text-decoration: none;
  padding: 1rem 1.125rem 1.125rem;
  background: linear-gradient(180deg, #1d1712, #151210);
  border: 1px solid rgba(193, 138, 85, .2);
  border-radius: 0.25rem;
  transition: border-color .3s, background .3s, transform .35s var(--ease), box-shadow .3s;
}
.node__id { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(217, 208, 197, .5); }
.node__id i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #3a2c22; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); transition: background .3s, box-shadow .3s; }
.node__title { display: flex; align-items: center; gap: 0.625rem; color: var(--ivory); font-weight: 600; font-stretch: 105%; font-size: clamp(0.9688rem, .9rem + .25vw, 1.0938rem); line-height: 1.25; }
.node__title .ico { width: 1.25rem; height: 1.25rem; color: var(--copper); }
.node__leaf { position: relative; padding-left: 1rem; font-size: 0.7188rem; line-height: 1.45; color: var(--muted); }
.node__leaf::before { content: ""; position: absolute; left: 0.125rem; top: 0; height: 0.6em; width: 0.5rem; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }

.node a:hover, .node a:focus-visible, .node.is-active a {
  border-color: var(--copper);
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian));
  box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(0, 0, 0, .9), 0 0 0 1px rgba(193, 138, 85, .2);
  transform: translateY(-0.125rem);
}
.node a:hover .node__id i, .node a:focus-visible .node__id i, .node.is-active .node__id i { background: var(--copper); box-shadow: 0 0 0.625rem 1px rgba(193, 138, 85, .7); }

/* ---------- especificações ---------- */
.specs { display: grid; border-top: 1px solid var(--line); }
.spec {
  position: relative; display: grid; gap: 1.125rem;
  padding: clamp(1.75rem, 4vh, 2.5rem) 0 clamp(1.75rem, 4vh, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.spec::before { /* barra de enlace ativo */
  content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 2px;
  background: linear-gradient(180deg, var(--copper), var(--bronze));
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.spec:hover::before, .spec.is-active::before, .spec:target::before { transform: scaleY(1); }
.spec__head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.spec__id { font-size: 0.75rem; color: var(--copper); padding: 0.25rem 0.5rem; border: 1px solid var(--line-2); border-radius: 2px; }
.spec__ico { width: 1.5rem; height: 1.5rem; color: var(--copper); }
.spec h3 { font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); font-stretch: 106%; line-height: 1.15; text-wrap: balance; }
.spec p { color: var(--muted); max-width: 68ch; }

/* ---------- contato ---------- */
#contato .section__title { max-width: 14ch; }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .topo__note { display: none; }
  .topo { grid-template-areas:
    ".  gov  ."
    "infra hub sec"
    "noc .  dev"; }
}

@media (max-width: 860px) {
  /* topologia vira árvore vertical: núcleo no topo, tronco à esquerda */
  .topo {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none;
    gap: 0.875rem; padding: 1.25rem 1rem 1.25rem 2.25rem;
  }
  .topo::after { /* tronco */
    content: ""; position: absolute; left: 1.0625rem; top: 2.5rem; bottom: 2.75rem; width: 1px;
    background: linear-gradient(180deg, var(--copper), var(--line-2));
  }
  .topo__links { display: none; }
  .topo__hub {
    grid-area: auto; justify-self: stretch; width: auto; aspect-ratio: auto; border-radius: 0.25rem;
    grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 0.875rem; row-gap: 0.125rem;
    padding: 1rem 1.125rem;
  }
  .topo__hub .ico { grid-row: 1 / span 2; }
  .topo__hub-ring { display: none; }
  .node { grid-area: auto !important; justify-self: stretch; width: auto; padding: 0; position: relative; }
  .node::before { content: ""; position: absolute; left: -1.1875rem; top: 1.5rem; width: 1.1875rem; height: 1px; background: var(--line-2); }
  .node::after { content: ""; position: absolute; left: -1.375rem; top: calc(1.5rem - 0.1875rem); width: 0.4375rem; height: 0.4375rem; background: var(--coal); border: 1px solid var(--copper); transform: rotate(45deg); }
}

@media (max-width: 640px) {
  .hero-actions .btn { flex: 1 1 12.5rem; }
  .spec { padding-left: 0.875rem; }
  .spec__head { grid-template-columns: auto minmax(0, 1fr); }
  .spec__ico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topo__link, .topo__hub-ring { animation: none; }
}