/* JMDC cases — quadro de uplinks (clientes como portas de um switch) e setores como VLANs. */

/* ---------- cabeçalho ---------- */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 1rem 0 0; border-top: 1px solid var(--line);
}
.hero-stats > div { position: relative; padding: 1.125rem 2rem 0 0; margin-right: 2rem; border-right: 1px solid var(--line); }
.hero-stats > div:last-child { border-right: 0; margin-right: 0; }
.hero-stats > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 1.5rem; height: 2px; background: var(--copper); }
.hero-stats dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.hero-stats dd {
  margin: 0.25rem 0 0; color: var(--ivory);
  font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); font-weight: 700; font-stretch: 112%;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}

.section__head--row .section__lead { max-width: 42ch; }

/* ---------- chassi do switch ---------- */
.chassis {
  position: relative;
  background: linear-gradient(180deg, #0d0c0b, #141210);
  border: 1px solid var(--line-2); border-radius: 0.375rem;
  box-shadow: 0 2.5rem 5rem -2.5rem rgba(0, 0, 0, .9), inset 0 1px 0 rgba(245, 241, 235, .04);
  overflow: hidden;
}
.chassis__bar, .chassis__foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding: 0.875rem clamp(1rem, 2.5vw, 1.75rem);
  font-size: 0.75rem; color: var(--muted);
}
.chassis__bar { background: #0c0b0a; border-bottom: 1px solid var(--line); }
.chassis__foot { border-top: 1px solid var(--line); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(217, 208, 197, .42); }
.chassis__foot > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.chassis__host { display: inline-flex; align-items: center; gap: 0.625rem; min-width: 0; }
.chassis__screw {
  width: 0.625rem; height: 0.625rem; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a2d23, #15110e); border: 1px solid var(--line-2);
}
.chassis__sum { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--copper-hi); text-transform: uppercase; letter-spacing: .12em; }

.ports {
  list-style: none; margin: 0; padding: clamp(0.75rem, 2vw, 1.5rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 0.625rem;
}
.port {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto; gap: 0.5rem;
  min-height: 9rem; padding: 0.625rem 0.75rem 0.75rem;
  background: var(--coal-2);
  border: 1px solid var(--line);
  border-radius: 0.1875rem;
  transition: border-color .35s, background .35s, transform .35s var(--ease);
}
/* "boca" do conector RJ45 desenhada no topo de cada porta */
.port::before {
  content: ""; position: absolute; left: 50%; top: -1px; width: 2.25rem; height: 0.3125rem;
  transform: translateX(-50%);
  border: 1px solid var(--line); border-top: 0; background: var(--coal);
}
.port__id { font-size: 0.625rem; letter-spacing: .1em; color: rgba(217, 208, 197, .45); }
.port__led {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--copper); box-shadow: 0 0 0.375rem rgba(193, 138, 85, .7);
  animation: activity 3.2s steps(1, end) infinite;
}
.port__led--legend { position: static; display: inline-block; animation: none; }
.port img {
  align-self: center; justify-self: center;
  width: 100%; max-width: 9rem; height: auto; max-height: 4.25rem; object-fit: contain;
  pointer-events: none;
  /* silhueta mineral uniforme: os logotipos têm fundo transparente */
  filter: brightness(0) invert(.86) sepia(.28);
  opacity: .72;
  transition: filter .4s, opacity .4s;
}
.port--raster img { filter: grayscale(1) sepia(.35) brightness(1.7) contrast(.9); }
.port__name {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-top: 0.5rem; border-top: 1px solid var(--line);
}
.port:hover { border-color: var(--line-2); background: var(--obsidian); transform: translateY(-0.125rem); }
.port:hover img { filter: none; opacity: 1; }
.port:hover .port__name { color: var(--ivory); }
.port:hover .port__led { animation-duration: .5s; }

/* atividade de tráfego: piscadas curtas, defasadas entre portas */
@keyframes activity { 0%, 86%, 92% { opacity: 1; } 89%, 95% { opacity: .25; } }
.port:nth-child(2n) .port__led { animation-delay: -.7s; animation-duration: 2.6s; }
.port:nth-child(3n) .port__led { animation-delay: -1.9s; animation-duration: 4.1s; }
.port:nth-child(5n) .port__led { animation-delay: -1.1s; animation-duration: 1.9s; }
.port:nth-child(7n) .port__led { animation-delay: -2.4s; animation-duration: 3.7s; }

/* ---------- setores (VLANs) ---------- */
.segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.segment {
  position: relative;
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(17, 16, 15, .55);
  border: 1px solid var(--line);
  transition: border-color .35s, background .35s;
}
.segment::before { content: ""; position: absolute; top: -1px; left: -1px; width: 2.5rem; height: 2px; background: var(--copper); transition: width .5s var(--ease); }
.segment:hover { border-color: var(--line-2); background: rgba(17, 16, 15, .8); }
.segment:hover::before { width: 5rem; }
.segment__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.segment__vlan {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .14em; color: var(--copper);
  padding: 0.25rem 0.5rem; border: 1px solid var(--line-2);
}
.segment__ico { width: 2.25rem; height: 2.25rem; color: var(--copper); stroke-width: 1.3; }
.segment__title {
  margin: 0; color: var(--ivory);
  font-size: clamp(1.375rem, 0.8vw + 1.05rem, 1.75rem); font-weight: 700; font-stretch: 108%;
  letter-spacing: -.02em; line-height: 1.15; text-wrap: balance;
}
.segment p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 64ch; }
.segment .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.tags li {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 0.3125rem 0.625rem; color: var(--mineral);
  border: 1px solid var(--line); background: rgba(101, 69, 47, .14);
}

/* ---------- chamada final ---------- */
.cta { overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 80% at 85% 50%, rgba(101, 69, 47, .35), transparent 70%);
}
.cta__inner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem 3rem; }
.cta__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; max-width: 46rem; }
.cta__copy .section__title { max-width: 20ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 960px) {
  .segments { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-stats > div { padding-right: 1.25rem; margin-right: 1.25rem; }
  .ports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .port { min-height: 7.5rem; padding: 0.5rem 0.5rem 0.625rem; }
  .port img { max-height: 3.25rem; }
  .cta__actions, .cta__actions .btn { width: 100%; }
}
@media (max-width: 360px) {
  .hero-stats > div { padding-right: 0.875rem; margin-right: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .port__led { animation: none; }
}

/* ---------- topologia decorativa do cabeçalho (core + 6 VLANs) ---------- */
.page-hero__inner { position: relative; }
.hero-topo {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-46%);
  width: clamp(18rem, 30vw, 27rem); height: auto; overflow: visible;
  display: none; pointer-events: none;
}
.hero-topo__links path { fill: none; stroke: var(--line-2); stroke-width: 1; }
.hero-topo__links .hero-topo__ring { stroke: var(--line); stroke-dasharray: 3 6; }
.hero-topo__halo { fill: rgba(193, 138, 85, .07); stroke: var(--line); }
.hero-topo__core { fill: var(--obsidian); stroke: var(--copper); }
.hero-topo__nodes rect { fill: var(--coal); stroke: var(--line-2); }
.hero-topo__label text, .hero-topo__label--core {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-anchor: middle;
  fill: rgba(217, 208, 197, .5); text-transform: uppercase;
}
text.hero-topo__label--core { fill: var(--copper-hi); font-size: 12px; }
.hero-topo__pkt { fill: var(--ivory); }
.hero-topo__pkt--a { animation: pkt-a 4.2s var(--ease) infinite; }
.hero-topo__pkt--b { animation: pkt-b 5.4s var(--ease) 1.2s infinite; opacity: 0; }
@keyframes pkt-a { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translate(137px, -79px); opacity: 1; } 70%, 100% { transform: translate(137px, -79px); opacity: 0; } }
@keyframes pkt-b { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translate(137px, -79px); opacity: 1; } 70%, 100% { transform: translate(137px, -79px); opacity: 0; } }
@media (min-width: 1100px) {
  .hero-topo { display: block; }
  .page-hero__lead { max-width: 52ch; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-topo__pkt { display: none; }
}

@media (max-width: 640px) {
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .hero-stats > div { margin-right: 0; padding: 1rem 0.5rem 0 0.75rem; }
  .hero-stats > div:first-child { padding-left: 0; }
  .hero-stats > div:not(:first-child)::before { left: 0.75rem; }
  .hero-stats dt { font-size: 0.5625rem; letter-spacing: .08em; overflow-wrap: anywhere; }
  .hero-stats dd { font-size: 1.625rem; }
}