/* Portal de plataformas da Netway.
   Tokens de cor iguais aos da Vistoria e do NetCalc (mesma marca);
   as cores das fibras seguem a ordem da norma: verde, amarela, branca, azul,
   vermelha, violeta, marrom, rosa, preta, cinza, laranja, água-marinha. */

:root {
  --fundo: #f6f5f9;
  --superficie: #ffffff;
  --superficie-2: #f0eef5;
  --borda: #e2dfea;
  --borda-forte: #cbc6d8;
  --texto: #1c1726;
  --texto-2: #5b546b;
  --texto-3: #8a8499;
  --marca: #5c0098;
  --marca-forte: #45007a;
  --marca-suave: #f1e7fa;
  --sobre-marca: #ffffff;
  --teste: #6d28d9;           /* a mesma cor da faixa dos ambientes de teste */
  --capa: #1c1726;            /* capa do cabo */

  --fibra-verde: #1f9d55;
  --fibra-amarela: #f2c200;
  --fibra-branca: #ffffff;
  --fibra-azul: #1d6fd6;
  --fibra-vermelha: #d93025;
  --fibra-violeta: #8b3fd1;
  --fibra-marrom: #8a5a2b;
  --fibra-rosa: #ee7fb1;
  --fibra-preta: #1c1726;
  --fibra-cinza: #8a8499;
  --fibra-laranja: #f08a24;
  --fibra-agua: #2bbfb3;

  --calha: 84px;              /* largura reservada ao cabo e às fibras */
  --raio: 16px;
  --fonte: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121016;
    --superficie: #1a1720;
    --superficie-2: #221e2a;
    --borda: #2f2a39;
    --borda-forte: #423b50;
    --texto: #ece9f2;
    --texto-2: #aca5bb;
    --texto-3: #807a8f;
    --marca: #b984ec;
    --marca-forte: #cda3f3;
    --marca-suave: #2c1d3f;
    --sobre-marca: #1c0a2e;
    --teste: #a78bfa;
    --capa: #3a3347;
    --fibra-preta: #5b546b;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.45;
}

.topo, main, .rodape {
  width: min(100% - 32px, 860px);
  margin-inline: auto;
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */

.topo {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding-block: 44px 0;
}

.logo {
  display: block;
  width: 168px;
  height: auto;
}

.titulo { padding-bottom: 2px; }

/* O logotipo é pesado e inclinado; o título repete o gesto. */
.titulo h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--marca);
}

.titulo p {
  margin: 8px 0 0;
  color: var(--texto-2);
}

/* ── Painel: cabo à esquerda, um sistema por fibra ─────────────────────── */

.painel {
  position: relative;
  padding: 46px 0 0 var(--calha);   /* o topo é onde a capa do cabo aparece */
}

.fibras {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--calha);
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fibras .capa { fill: var(--capa); }
.fibras .contorno { fill: none; stroke: var(--borda-forte); stroke-linecap: round; }
.fibras .fio { fill: none; stroke-linecap: round; transition: stroke-width .15s ease; }
.fibras .aro { fill: var(--borda-forte); }
.fibras .ponta { stroke: none; }
.fibras .luz { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0; }

.fibras g.acesa .fio { stroke-width: 5; }
.fibras g.acesa .luz { opacity: .9; animation: luz 1.1s linear infinite; }

@keyframes luz { to { stroke-dashoffset: 0; } }

.fibras.entrando .fio,
.fibras.entrando .contorno { animation: puxar .7s cubic-bezier(.3, .7, .2, 1) both; animation-delay: var(--atraso, 0ms); }
.fibras.entrando .ponta,
.fibras.entrando .aro { animation: surgir .2s ease both; animation-delay: calc(var(--atraso, 0ms) + .6s); }

@keyframes puxar { from { stroke-dashoffset: var(--comprimento); } to { stroke-dashoffset: 0; } }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 1px 2px rgb(28 23 38 / 0.05), 0 4px 16px rgb(28 23 38 / 0.04);
}

.sistema {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 18px 22px;
  border-top: 1px solid var(--borda);
  transition: background-color .15s ease;
}

.sistema:first-child { border-top: 0; border-radius: var(--raio) var(--raio) 0 0; }
.sistema:last-child { border-radius: 0 0 var(--raio) var(--raio); }

.sistema:hover,
.sistema:focus-within { background: var(--superficie-2); }

.quem { min-width: 0; }

.quem h2 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
}

.quem p {
  margin: 4px 0 0;
  color: var(--texto-2);
}

.host {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--texto-3);
  overflow-wrap: anywhere;
}

.portas {
  display: flex;
  flex: none;
  gap: 8px;
}

.portas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.portas a:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 3px;
}

.abrir {
  background: var(--marca);
  color: var(--sobre-marca);
}

.abrir:hover { background: var(--marca-forte); }

/* A linha inteira leva ao sistema de verdade… */
.abrir::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* …menos o botão do teste, que fica por cima. */
.teste {
  position: relative;
  z-index: 1;
  border: 2px dashed var(--teste);
  color: var(--teste);
  background: transparent;
}

.teste:hover {
  background: var(--teste);
  border-style: solid;
  color: var(--superficie);
}

/* ── O que é o teste ───────────────────────────────────────────────────── */

.sobre-teste {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin: 22px 0 0 var(--calha);
  padding: 14px 18px;
  border: 2px dashed var(--teste);
  border-radius: var(--raio);
  color: var(--texto-2);
}

.sobre-teste strong {
  flex: none;
  color: var(--teste);
  font-style: italic;
  font-weight: 800;
}

.sobre-teste p { margin: 0; }

/* ── Rodapé ────────────────────────────────────────────────────────────── */

.rodape {
  padding: 26px 0 44px var(--calha);
  color: var(--texto-3);
  font-size: .85rem;
}

.rodape p { margin: 0; }
.rodape .versao { margin-top: 4px; font-family: var(--mono); font-size: .75rem; }

/* ── Celular ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root { --calha: 44px; }

  .topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-block: 28px 22px;
  }

  .logo { width: 132px; }

  .sistema {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }

  .portas a { flex: 1; justify-content: center; }

  .sobre-teste { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}