/* ==========================================================================
   Mockups de sistema

   O produto é o que a Vértice vende, então é o produto que aparece.
   Construídos em CSS, sem imagem: não pesam e não fingem ser captura de tela.
   São representações estilizadas, sempre vestidas com marca de parceiro
   fictícia, e sempre rotuladas como representação.

   Isto substitui o uso do símbolo da Vértice como preenchimento visual.
   ========================================================================== */

.mock {
  --marca: #2D6CDF;
  --sobre-marca: #FFFFFF;
  position: relative;
  max-width: 100%;
  min-width: 0;
}

/* --- janela de navegador: o portal do gestor ---------------------------- */

.mock__janela {
  border: 1px solid var(--borda-media);
  background: var(--fundo-2);
  overflow: hidden;
  box-shadow: var(--elev-flutuante);
}

.mock__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.mock__bolinhas { display: flex; gap: 5px; flex: none; }

.mock__bolinhas i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borda-forte);
  display: block;
}

.mock__url {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  font-family: var(--fonte-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--txt-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__url b { color: var(--txt); font-weight: 400; }

.mock__corpo { display: grid; grid-template-columns: 104px minmax(0, 1fr); }

.mock__lateral {
  padding: 12px 10px;
  border-right: 1px solid var(--borda);
  background: var(--fundo);
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: hidden;
  min-width: 0;
}

.mock__marca { display: flex; align-items: center; gap: 7px; min-width: 0; }

.mock__logo {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--marca);
  color: var(--sobre-marca);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.mock__nome {
  font-size: 10px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.mock__itens { display: grid; gap: 5px; }

.mock__itens i { display: block; height: 5px; background: var(--borda-media); }
.mock__itens i:first-child { background: var(--marca); width: 80%; }
.mock__itens i:nth-child(2) { width: 60%; }
.mock__itens i:nth-child(3) { width: 72%; }
.mock__itens i:nth-child(4) { width: 52%; }

.mock__painel { padding: 14px; display: grid; gap: 12px; align-content: start; }

.mock__linha-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mock__titulo {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: -0.01em;
}

.mock__botao {
  padding: 5px 12px;
  background: var(--marca);
  color: var(--sobre-marca);
  border-radius: var(--raio-acao);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.mock__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mock__kpi {
  border: 1px solid var(--borda);
  background: var(--fundo);
  padding: 8px 9px;
  display: grid;
  gap: 4px;
}

.mock__kpi b {
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--txt);
  line-height: 1;
}

.mock__kpi span {
  font-size: 8px;
  color: var(--txt-2);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mock__tabela {
  display: grid;
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
}

.mock__tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px 28px;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  background: var(--fundo);
}

.mock__tr--cab { background: var(--fundo-2); }

.mock__tr span { height: 5px; background: var(--borda-forte); display: block; }
.mock__tr--cab span { background: var(--borda-media); }
.mock__tr span:first-child { width: 84%; }

.mock__tr em {
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-style: normal;
  color: var(--txt-2);
  line-height: 1;
}

.mock__ok {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sinal-ok);
  justify-self: end;
}

/* --- telefone: o app de marcação ---------------------------------------- */

.mock__fone {
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: 112px;
  border: 1px solid var(--borda-forte);
  border-radius: 14px;
  background: var(--fundo);
  padding: 7px 6px 9px;
  box-shadow: var(--elev-flutuante);
}

.mock__fone-topo {
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--borda-forte);
  margin: 0 auto 8px;
}

.mock__fone-tela {
  border: 1px solid var(--borda);
  background: var(--fundo-2);
  padding: 10px 8px;
  display: grid;
  gap: 9px;
  justify-items: center;
}

.mock__fone-marca {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: var(--marca);
  color: var(--sobre-marca);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* Enquadramento de reconhecimento facial: quatro cantos e um alvo. */
.mock__rosto {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  position: relative;
}

.mock__rosto::before,
.mock__rosto::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--marca);
}

.mock__rosto::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.mock__rosto::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.mock__rosto i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--txt-2);
  display: block;
}

.mock__hora {
  font-family: var(--fonte-mono);
  font-size: 14px;
  color: var(--txt);
  line-height: 1;
}

.mock__fone-botao {
  width: 100%;
  padding: 6px;
  background: var(--marca);
  color: var(--sobre-marca);
  border-radius: var(--raio-acao);
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.mock__nota {
  margin-top: var(--e-6);
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  color: var(--txt-2);
  line-height: 1.5;
  text-align: center;
}

/* No hero o conjunto ganha respiro para o telefone não sangrar na borda.
   O min-width 0 no invólucro é o que impede o mockup de empurrar a coluna. */
.hero__visual > * { min-width: 0; max-width: 100%; }
.hero__visual .mock { width: min(460px, 100%); }

@media (max-width: 899px) {
  .hero__visual .mock { width: min(360px, 100%); margin-inline: auto; }
  .mock__fone { width: 92px; right: -2px; bottom: -18px; }
}

/* Abaixo de 640px o mockup precisa caber de verdade, não só ser cortado.
   A lateral vira só o logo do parceiro, que é o que ela comunica. */
@media (max-width: 639px) {
  .mock__corpo { grid-template-columns: 54px minmax(0, 1fr); }
  .mock__lateral { padding: 10px 8px; justify-items: center; }
  .mock__nome { display: none; }
  .mock__painel { padding: 10px; gap: 10px; }
  .mock__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock__kpi:last-child { display: none; }
  .mock__tr { grid-template-columns: minmax(0, 1fr) 34px 34px 16px; gap: 6px; padding: 6px 8px; }
  .mock__botao { font-size: 8px; padding: 5px 9px; }
  .mock__fone { width: 82px; right: 0; bottom: -14px; }
  .mock__rosto { width: 38px; height: 38px; }
  .mock__hora { font-size: 12px; }
}

/* --- mockup pequeno, para o palco do mega menu -------------------------- */

.mock--mini .mock__corpo { grid-template-columns: 76px minmax(0, 1fr); }
.mock--mini .mock__painel { padding: 10px; gap: 8px; }
.mock--mini .mock__lateral { padding: 10px 8px; gap: 9px; }
.mock--mini .mock__grade { gap: 5px; }
.mock--mini .mock__janela { box-shadow: none; }

/* ==========================================================================
   Diagrama de integração, para o AI Delivery

   O produto está em desenvolvimento e não existe tela para mostrar.
   Um diagrama de arquitetura é honesto: descreve o caminho, não inventa UI.
   ========================================================================== */

.fluxo {
  display: grid;
  gap: var(--e-1);
  border: 1px solid var(--borda);
  background: var(--fundo-2);
  padding: var(--e-3);
}

.fluxo__no {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: 13px 15px;
  border: 1px solid var(--borda-media);
  background: var(--fundo);
}

.fluxo__no b { font-size: 0.9375rem; font-weight: 600; }

.fluxo__no span {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  color: var(--txt-2);
  text-transform: uppercase;
}

.fluxo__no--vertice { border-left: 3px solid var(--acento); }

.fluxo__seta {
  justify-self: center;
  width: 1px;
  height: 20px;
  background: var(--borda-forte);
  position: relative;
}

.fluxo__seta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--borda-forte);
  border-bottom: 1px solid var(--borda-forte);
  transform: rotate(45deg);
}

/* ==========================================================================
   Trilha, para a Universidade
   ========================================================================== */

.trilha {
  display: grid;
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
}

.trilha__passo {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 13px 15px;
  background: var(--fundo);
}

.trilha__n {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  color: var(--txt-2);
}

.trilha__passo b { font-size: 0.9375rem; font-weight: 600; display: block; }

.trilha__passo span {
  font-size: 0.8125rem;
  color: var(--txt-2);
  line-height: 1.45;
}