/*
 * Vetra Construtora · negócio fictício da vitrine da Provance
 *
 * Criada em 23/10/2026, a pedido do Edgar, pra aparecer dentro do MacBook
 * da home: o site, o Instagram, a medição, os anúncios e o WhatsApp de UM
 * negócio, que é o argumento da casa (as partes dizendo a mesma coisa).
 *
 * ⚠️ Esta NÃO é a marca da Provance. É a marca de um cliente, inventado,
 * com cor e letra próprias, e por isso mora num arquivo separado, fora da
 * paleta da casa e fora do `tokens.css`. Regra do CLAUDE.md: o
 * monocromático da Provance nunca é imposto a cliente.
 *
 * Marca: construtora de alto padrão, engenharia própria, tecnológica.
 * Concreto claro, carbono e o azul de planta de engenharia como acento.
 * Letra: Archivo larga (wdth 112 a 125), que lembra sinalização de obra.
 *
 * Tudo aqui vive embaixo de `.vetra`, desenhado num palco de 1280×724 px
 * que o MacBook escala pro tamanho da tela.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fontes/archivo-latin.woff2') format('woff2');
}

.vetra {
  --v-concreto: #ecebe7;
  --v-concreto-2: #dfddd7;
  --v-carbono: #121417;
  --v-grafite: #2a2e35;
  --v-cinza: #6b7079;
  --v-azul: #2f5bff;
  --v-azul-claro: #8fa8ff;
  --v-linha: rgba(18, 20, 23, 0.12);

  position: relative;
  width: 1280px;
  height: 724px;
  overflow: hidden;
  background: var(--v-concreto);
  color: var(--v-carbono);
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 100%;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

.vetra * {
  box-sizing: border-box;
  margin: 0;
}

/* ---------- A marca ---------- */

.vetra-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}

.vetra-logo svg {
  display: block;
  width: 26px;
  height: 26px;
}

.vetra-logo__marco {
  fill: var(--v-azul);
}

.vetra-logo span {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.08em;
}

/* ---------- Tela 1 · o site ---------- */

.vs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 64px;
  border-bottom: 1px solid var(--v-linha);
}

.vs-nav ul {
  display: flex;
  gap: 34px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--v-grafite);
}

.vs-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--v-azul);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.vs-botao--linha {
  background: transparent;
  color: var(--v-carbono);
  border: 1px solid rgba(18, 20, 23, 0.25);
}

.vs-heroi {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 48px;
  align-items: center;
  height: 540px;
  padding: 0 64px;
}

.vs-sobretitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v-azul);
}

.vs-sobretitulo::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
}

.vs-titulo {
  margin-top: 22px;
  font-size: 54px;
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.vs-titulo em {
  font-style: normal;
  color: var(--v-azul);
}

.vs-apoio {
  margin-top: 22px;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--v-grafite);
}

.vs-acoes {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

/* O painel da obra: planta azul, o prédio se desenhando andar por andar e
   o cartão de acompanhamento. É o "tecnológica" da marca. */
.vs-painel {
  position: relative;
  height: 470px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--v-carbono);
  background-image: linear-gradient(rgba(143, 168, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 168, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

.vs-painel > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vs-predio .traco {
  fill: none;
  stroke: var(--v-azul-claro);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* A animação só corre na tela ativa: o MacBook põe e tira `.ativa` a cada
   troca, e é isso que faz o prédio se desenhar de novo toda vez. */
.vetra.ativa .vs-predio .traco {
  animation: vs-desenha 1.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.vs-predio .andar {
  fill: var(--v-azul);
  opacity: 0;
}

.vetra.ativa .vs-predio .andar {
  animation: vs-acende 0.5s ease-out forwards;
}

.vs-predio .cota {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: var(--v-azul-claro);
}

.vs-predio .prumo {
  stroke: rgba(143, 168, 255, 0.45);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

@keyframes vs-desenha {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes vs-acende {
  to {
    opacity: var(--alfa, 0.22);
  }
}

/* A obra sobe por cima da planta, de baixo pra cima, quando o último
   andar acende. A foto chega um pouco mais perto enquanto fica na tela. */
.vs-foto {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
}

.vs-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}

.vs-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 20, 23, 0.55), rgba(18, 20, 23, 0) 45%);
}

/* O fio de luz que sobe junto com a foto, na borda do corte. */
.vs-foto::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 2px;
  background: var(--v-azul-claro);
  opacity: 0;
}

.vetra.ativa .vs-foto {
  animation: vs-sobe 1.5s 3.2s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.vetra.ativa .vs-foto::before {
  animation: vs-fio 1.5s 3.2s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.vetra.ativa .vs-foto img {
  animation: vs-aproxima 6s 3.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes vs-sobe {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes vs-fio {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-470px);
  }
}

@keyframes vs-aproxima {
  to {
    transform: scale(1);
  }
}

.vs-foto__selo {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  padding: 7px 11px;
  border-radius: 4px;
  background: rgba(18, 20, 23, 0.6);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vs-obra {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 268px;
  padding: 16px 18px;
  border-radius: 8px;
  background: rgba(236, 235, 231, 0.96);
  color: var(--v-carbono);
}

.vs-obra__topo {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-cinza);
}

.vs-obra__vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v-azul);
}

.vs-obra__vivo::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: vs-pisca 1.6s ease-in-out infinite;
}

@keyframes vs-pisca {
  50% {
    opacity: 0.3;
  }
}

.vs-obra__nome {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 650;
}

.vs-obra__barra {
  position: relative;
  height: 4px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--v-concreto-2);
  overflow: hidden;
}

.vs-obra__barra span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 68%;
  background: var(--v-azul);
  transform-origin: left;
  transform: scaleX(0);
}

.vetra.ativa .vs-obra__barra span {
  animation: vs-avanca 2.2s 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes vs-avanca {
  to {
    transform: scaleX(1);
  }
}

.vs-obra__dados {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--v-cinza);
}

.vs-obra__dados strong {
  color: var(--v-carbono);
  font-weight: 650;
}

.vs-faixa {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 64px;
  border-top: 1px solid var(--v-linha);
}

.vs-faixa div {
  padding: 18px 0 0;
}

.vs-faixa div + div {
  padding-left: 24px;
  border-left: 1px solid var(--v-linha);
}

.vs-faixa dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-cinza);
}

.vs-faixa dd {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 650;
  font-stretch: 112%;
}

/* Sem movimento pedido: o prédio aparece pronto. */
@media (prefers-reduced-motion: reduce) {
  .vetra.ativa .vs-predio .traco,
  .vetra.ativa .vs-predio .andar,
  .vetra.ativa .vs-obra__barra span,
  .vs-obra__vivo::before,
  .vetra.ativa .vs-foto,
  .vetra.ativa .vs-foto::before,
  .vetra.ativa .vs-foto img {
    animation: none;
  }
  .vs-foto {
    clip-path: none;
  }
  .vs-foto img {
    transform: none;
  }
  .vs-predio .traco {
    stroke-dashoffset: 0;
  }
  .vs-predio .andar {
    opacity: var(--alfa, 0.22);
  }
  .vs-obra__barra span {
    transform: none;
  }
}

/* ================================================================
 * Telas 2 a 5 · Instagram, Analytics, anúncios e WhatsApp
 *
 * Entraram em 23/10/2026, a pedido do Edgar: a tela do notebook tem que
 * mudar, do site pro Instagram com a mesma identidade, depois pra medição
 * do Google, pro Gerenciador de anúncios da Meta e pro WhatsApp com
 * mensagem chegando. A interface de cada plataforma é imitada no traço,
 * sem logo de plataforma nenhuma. O que é da Vetra (posts, avatar, nome)
 * usa a marca da Vetra; o resto usa a cor da plataforma.
 * Os números são de negócio fictício e servem de cenário, nunca de
 * promessa.
 * ================================================================ */

.vt-plataforma {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-stretch: 100%;
  letter-spacing: 0;
}

/* O `tokens.css` da casa pinta todo `strong` de branco. Aqui dentro a
   letra é da tela, não da Provance. */
.vetra strong {
  color: inherit;
}

/* Entrada comum: cada peça da tela surge subindo um pouco. `--i` dá a
   ordem, `--t` (em segundos) dá o atraso exato quando a ordem não basta. */
@keyframes vt-surge {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vt-surge {
  opacity: 0;
}

.vetra.ativa .vt-surge {
  animation: vt-surge 600ms cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: var(--t, calc(0.15s + var(--i, 0) * 0.08s));
}

/* ---------- Tela 2 · Instagram ----------
 *
 * Refeita em 23/10/2026: os posts eram blocos de cor chapada e o Edgar
 * achou a tela abaixo do nível das outras. Agora cada post é uma peça da
 * Vetra (Archivo larga, concreto, carbono e o azul de planta) sobre
 * fotografia, com a interface desenhada no traço da plataforma.
 *
 * Os posts medem tudo em `cqw`, a largura do próprio post: a mesma peça
 * serve na grade e grande, no post aberto.
 *
 * O roteiro da aba, em segundos desde que ela entra:
 *   0 a 1,2   o perfil surge
 *   1,3 a 3   a página rola até a grade
 *   3 a 4,4   o cursor vai até o primeiro post e clica
 *   4,4       o post abre, e os comentários chegam de 5,3 a 7,6
 *   8         a curtida
 */

.vt-ig {
  display: flex;
  background: #fff;
  color: #0c1014;
}

.vt-ig svg {
  display: block;
}

/* A barra lateral da plataforma. */
.ig-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
  width: 76px;
  padding-top: 92px;
  border-right: 1px solid #dbdbdb;
}

.ig-lado > svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #0c1014;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ig-lado__eu {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  outline: 2px solid #0c1014;
  outline-offset: 1px;
  background: var(--v-carbono);
  color: #fff;
}

.ig-lado__eu svg {
  width: 15px;
  height: 15px;
}

.ig-lado .ig-lado__menu {
  margin-top: auto;
  margin-bottom: 28px;
}

.ig-perfil {
  flex: 1;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 34px;
  overflow: hidden;
}

/* Cabeçalho do perfil. */
.ig-topo {
  display: grid;
  grid-template-columns: 270px 1fr;
  align-items: center;
}

/* O anel de story, na cor da plataforma, em volta do logo da Vetra. */
.ig-anel {
  justify-self: center;
  width: 168px;
  height: 168px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}

.ig-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--v-carbono);
  color: #fff;
}

.ig-avatar svg {
  width: 66px;
  height: 66px;
}

.ig-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
}

.ig-usuario > span:first-child {
  margin-right: 14px;
}

.ig-bt {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  background: #efefef;
  font-size: 14px;
  font-weight: 600;
}

.ig-bt--azul {
  background: #0095f6;
  color: #fff;
}

.ig-mais {
  width: 24px;
  height: 24px;
  margin-left: 6px;
  fill: #0c1014;
}

.ig-numeros {
  display: flex;
  gap: 40px;
  margin-top: 20px;
  font-size: 16px;
}

.ig-numeros b {
  font-weight: 600;
}

.ig-nome {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
}

.ig-categoria {
  font-size: 14px;
  color: #737373;
}

.ig-bio {
  font-size: 14px;
  line-height: 1.45;
}

.ig-link {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #00376b;
}

.ig-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Destaques com capa de foto. */
.ig-destaques {
  display: flex;
  gap: 44px;
  margin-top: 40px;
  padding: 0 0 0 40px;
  list-style: none;
}

.ig-destaques li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ig-destaques__capa {
  display: block;
  flex: none;
  width: 78px;
  height: 78px;
  padding: 3px;
  border: 1px solid #dbdbdb;
  border-radius: 50%;
}

.ig-destaques__capa img,
.ig-destaques__capa svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ig-destaques__capa svg {
  padding: 20px;
  background: var(--v-azul);
  color: #fff;
}

.ig-destaques__capa svg .vetra-logo__marco {
  fill: #fff;
}

.ig-abas {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
  border-top: 1px solid #dbdbdb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #737373;
}

.ig-abas span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
}

.ig-abas svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.ig-abas span:first-child {
  margin-top: -1px;
  border-top: 1px solid #0c1014;
  color: #0c1014;
}

.ig-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

/* O perfil desce sozinho, como quem rola a página até os posts. */
.vt-ig.ativa .ig-perfil > * {
  animation: ig-rola 1.7s 1.3s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes ig-rola {
  to {
    transform: translateY(-380px);
  }
}

/* ---------- Os posts ---------- */

.ig-post {
  position: relative;
  aspect-ratio: 3 / 4;
  container-type: inline-size;
  background: var(--v-carbono);
}

.ig-arte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7cqw;
  overflow: hidden;
  color: #fff;
  font-family: 'Archivo', system-ui, sans-serif;
}

.ig-arte > * {
  position: relative;
  z-index: 1;
}

.ig-arte > .ig-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-arte::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Foto com texto embaixo: escurece o pé, e um pouco o topo pro logo. */
.ig-arte--foto::after {
  background: linear-gradient(
    180deg,
    rgba(10, 12, 15, 0.38) 0%,
    rgba(10, 12, 15, 0) 26%,
    rgba(10, 12, 15, 0) 46%,
    rgba(10, 12, 15, 0.82) 100%
  );
}

/* Foto com o título no meio: véu por igual, e título menor pra palavra longa. */
.ig-arte--meio .ig-titulo {
  font-size: 9.5cqw;
}

.ig-arte--meio::after {
  background: linear-gradient(180deg, rgba(10, 12, 15, 0.2), rgba(10, 12, 15, 0.45) 55%, rgba(10, 12, 15, 0.7));
}

.ig-selo {
  display: block;
  font-size: 3.5cqw;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0.86;
}

.ig-titulo {
  margin-top: 3cqw;
  font-size: 11.5cqw;
  font-weight: 800;
  font-stretch: 118%;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.ig-titulo em {
  font-style: normal;
  color: var(--v-azul-claro);
}

.ig-regua {
  display: block;
  width: 12cqw;
  height: 1cqw;
  margin-bottom: 4cqw;
  background: var(--v-azul);
}

.ig-marca {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 2cqw;
  font-size: 3.8cqw;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.1em;
}

.ig-marca svg {
  width: 6cqw;
  height: 6cqw;
}

.ig-gigante {
  font-size: 32cqw;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.82;
  letter-spacing: -0.03em;
}

.ig-gigante small {
  font-size: 0.42em;
  letter-spacing: 0;
}

/* Visualizações do reel, no pé, no traço da plataforma. */
.ig-views {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 1.4cqw;
  margin-top: 4cqw;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 4.6cqw;
  font-weight: 600;
}

.ig-views svg {
  width: 5cqw;
  height: 5cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

/* O ícone do canto: carrossel, reel ou fixado. */
.ig-tipo {
  position: absolute;
  top: 3.6cqw;
  right: 3.6cqw;
  z-index: 2;
  width: 7.2cqw;
  height: 7.2cqw;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

.ig-tipo .cheio {
  fill: #fff;
}

/* 2 · Concreto, com o cronograma desenhado. */
.ig-arte--concreto {
  background-color: var(--v-concreto);
  background-image: linear-gradient(var(--v-linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-linha) 1px, transparent 1px);
  background-size: 8cqw 8cqw;
  background-position: -1px -1px;
  color: var(--v-carbono);
}

.ig-arte--concreto .ig-titulo em {
  color: var(--v-azul);
}

.ig-arte--concreto ~ .ig-tipo {
  stroke: var(--v-carbono);
  filter: none;
}

.ig-arte--concreto ~ .ig-tipo .cheio {
  fill: var(--v-carbono);
}

.ig-gantt {
  position: relative;
  display: grid;
  gap: 2.8cqw;
  padding: 5cqw 4cqw;
  border-radius: 1.2cqw;
  background: #fff;
}

.ig-gantt__linha {
  display: grid;
  grid-template-columns: 22cqw 1fr;
  align-items: center;
  gap: 2cqw;
}

.ig-gantt small {
  font-size: 3cqw;
  font-weight: 600;
  color: var(--v-cinza);
  white-space: nowrap;
}

.ig-gantt b {
  position: relative;
  display: block;
  height: 3.4cqw;
  border-radius: 0.6cqw;
  background: var(--v-concreto);
}

.ig-gantt b::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--de) * 100%);
  width: calc((var(--ate) - var(--de)) * 100%);
  border-radius: 0.6cqw;
  background: var(--v-carbono);
  transform-origin: left;
}

.ig-gantt b.ig-gantt__agora::before {
  background: var(--v-azul);
}

.vt-ig.ativa .ig-gantt b::before {
  animation: ig-estica 0.9s 0.9s cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes ig-estica {
  from {
    transform: scaleX(0);
  }
}

/* A linha do "hoje": 60% da área das barras. */
.ig-gantt__hoje {
  position: absolute;
  top: 2cqw;
  bottom: 2cqw;
  left: calc(4cqw + 24cqw + (100% - 8cqw - 24cqw) * 0.6);
  width: 0.5cqw;
  background: var(--v-azul);
}

/* 4 · Duotom: a torre em azul de planta. */
/* O número fica no alto: na grade, a segunda linha só aparece pela
   metade, e é o número que tem que aparecer. A foto toma a luz dela e a
   cor do azul por baixo (luminosity). */
.ig-arte--duotom {
  justify-content: flex-start;
  gap: 6cqw;
  background: var(--v-azul);
}

.ig-arte--duotom > .ig-foto {
  filter: grayscale(1) contrast(1.15) brightness(1.1);
  mix-blend-mode: luminosity;
  opacity: 0.85;
}

.ig-arte--duotom::after {
  background: linear-gradient(180deg, rgba(18, 20, 23, 0.5), rgba(18, 20, 23, 0) 60%);
}

.ig-barra {
  display: block;
  height: 1.6cqw;
  margin: 5cqw 0 3.5cqw;
  border-radius: 1cqw;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.ig-barra span {
  display: block;
  width: 68%;
  height: 100%;
  background: #fff;
  transform-origin: left;
}

.vt-ig.ativa .ig-barra span {
  animation: ig-estica 1.6s 1.1s cubic-bezier(0.33, 1, 0.68, 1) both;
}

/* 5 · Foto em cima, faixa de concreto com o texto embaixo. */
.ig-arte--faixa {
  justify-content: flex-end;
  padding: 0;
}

.ig-arte--faixa > .ig-foto {
  height: 64%;
}

.ig-arte__faixa {
  height: 36%;
  padding: 6cqw 7cqw;
  background: var(--v-concreto);
  color: var(--v-carbono);
}

.ig-arte__faixa .ig-titulo {
  font-size: 9.5cqw;
}

.ig-arte__faixa .ig-titulo em {
  color: var(--v-azul);
}

/* 7 · A planta, em preto e branco sob a grade azul. */
.ig-arte--planta {
  background: var(--v-carbono);
}

.ig-arte--planta > .ig-foto {
  filter: grayscale(1) brightness(0.55) contrast(1.1);
}

.ig-arte--planta::after {
  background-image: linear-gradient(rgba(143, 168, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 168, 255, 0.16) 1px, transparent 1px);
  background-size: 8cqw 8cqw;
}

/* 8 · Carbono, com o prédio em linha. */
.ig-arte--carbono {
  background: var(--v-carbono);
}

.ig-iso {
  position: absolute !important;
  right: -6cqw;
  top: 14cqw;
  width: 80cqw;
  height: auto;
  fill: none;
  stroke: var(--v-azul-claro);
  stroke-width: 1.3;
  opacity: 0.75;
}

/* ---------- O cursor e o post aberto ---------- */

.ig-post--alvo {
  z-index: 3;
}

.ig-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9cqw;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font-size: 6cqw;
  font-weight: 700;
  opacity: 0;
}

.ig-hover span {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
}

.ig-hover svg {
  width: 7.5cqw;
  height: 7.5cqw;
  fill: #fff;
}

.ig-cursor {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 4;
  width: 26px;
  height: 26px;
  fill: #fff;
  stroke: #0c1014;
  stroke-width: 1.3;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.vt-ig.ativa .ig-cursor {
  animation: ig-cursor 1.4s 3s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

.vt-ig.ativa .ig-hover {
  animation: ig-aparece 0.2s 3.8s forwards;
}

@keyframes ig-cursor {
  0% {
    opacity: 0;
    transform: translate(340px, 230px);
  }
  12% {
    opacity: 1;
  }
  62% {
    transform: translate(0, 0);
  }
  80% {
    opacity: 1;
    transform: scale(0.82);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ig-aparece {
  to {
    opacity: 1;
  }
}

.ig-modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  visibility: hidden;
}

.vt-ig.ativa .ig-modal {
  animation: ig-abre 0.35s 4.4s ease-out forwards;
}

@keyframes ig-abre {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}

.ig-modal__fecha {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.ig-modal__caixa {
  display: flex;
  height: 640px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transform: scale(0.94);
}

.vt-ig.ativa .ig-modal__caixa {
  animation: ig-caixa 0.5s 4.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes ig-caixa {
  to {
    transform: none;
  }
}

.ig-post--grande {
  width: 480px;
  flex: none;
}

.ig-pontos {
  position: absolute;
  bottom: 3cqw;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 1.1cqw;
  transform: translateX(-50%);
}

.ig-pontos i {
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.ig-pontos i:first-child {
  background: #fff;
}

.ig-seta {
  position: absolute;
  top: 50%;
  right: 3cqw;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 6.5cqw;
  height: 6.5cqw;
  margin-top: -3.25cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #0c1014;
  font-size: 6cqw;
  line-height: 1;
  padding-bottom: 0.6cqw;
}

.ig-modal__lado {
  display: flex;
  flex-direction: column;
  width: 420px;
  font-size: 14px;
}

.ig-modal__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #efefef;
}

.ig-modal__topo b,
.ig-comentarios b {
  font-weight: 600;
}

.ig-modal__topo small {
  display: block;
  font-size: 12px;
  color: #737373;
}

.ig-azul {
  color: #0095f6;
  font-weight: 600;
}

.ig-mini {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v-carbono);
  color: #fff;
}

.ig-mini svg {
  width: 16px;
  height: 16px;
}

.ig-mini--pessoa {
  font-size: 13px;
  font-weight: 600;
}

.ig-mini--areia {
  background: #c9b8a6;
}

.ig-mini--nevoa {
  background: #a9b6c4;
}

.ig-mini--salvia {
  background: #b9c2ae;
}

.ig-comentarios {
  display: grid;
  align-content: start;
  gap: 16px;
  flex: 1;
  padding: 16px;
  list-style: none;
  overflow: hidden;
}

.ig-comentarios li {
  display: grid;
  grid-template-columns: 32px 1fr 12px;
  gap: 12px;
  line-height: 1.42;
}

.ig-comentarios li:first-child {
  grid-template-columns: 32px 1fr;
  padding-bottom: 4px;
}

.ig-comentarios .ig-resposta {
  margin-left: 44px;
}

.ig-comentarios small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #737373;
}

.ig-curtir {
  width: 12px;
  height: 12px;
  margin-top: 10px;
  fill: none;
  stroke: #737373;
  stroke-width: 2;
}

.ig-modal__pe {
  padding: 8px 16px 0;
  border-top: 1px solid #efefef;
}

.ig-acoes {
  display: flex;
  gap: 16px;
  padding: 4px 0;
}

.ig-acoes svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #0c1014;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ig-acoes .ig-acoes__salvar {
  margin-left: auto;
}

.vt-ig.ativa .ig-acoes__coracao {
  animation: ig-curte 0.5s 8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ig-curte {
  50% {
    transform: scale(1.25);
  }
  to {
    fill: #ff3040;
    stroke: #ff3040;
    transform: none;
  }
}

.ig-curtidas {
  margin-top: 6px;
  font-weight: 600;
}

.ig-curtidas small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #737373;
}

.ig-escrever {
  display: flex;
  justify-content: space-between;
  margin: 12px -16px 0;
  padding: 16px;
  border-top: 1px solid #efefef;
  color: #737373;
}

.ig-escrever span {
  color: #0095f6;
  font-weight: 600;
  opacity: 0.45;
}

/* Sem movimento pedido: o perfil fica no topo e o post não abre. */
@media (prefers-reduced-motion: reduce) {
  .vt-ig.ativa .ig-perfil > *,
  .vt-ig.ativa .ig-cursor,
  .vt-ig.ativa .ig-hover,
  .vt-ig.ativa .ig-modal,
  .vt-ig.ativa .ig-modal__caixa,
  .vt-ig.ativa .ig-gantt b::before,
  .vt-ig.ativa .ig-barra span {
    animation: none;
  }
}

/* ---------- Tela 3 · Analytics ---------- */

.vt-ga {
  background: #f8f9fa;
  color: #202124;
}

.ga-topo {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid #dadce0;
  background: #fff;
}

.ga-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  color: #5f6368;
}

.ga-marca svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #1a73e8;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ga-propriedade {
  padding-left: 22px;
  border-left: 1px solid #dadce0;
  font-size: 14px;
  line-height: 1.3;
}

.ga-propriedade small {
  display: block;
  font-size: 12px;
  color: #5f6368;
}

.ga-busca {
  flex: 1;
  max-width: 520px;
  height: 44px;
  margin-left: auto;
  border-radius: 8px;
  background: #f1f3f4;
}

.ga-corpo {
  display: flex;
  height: 660px;
}

.ga-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 64px;
  padding-top: 24px;
  border-right: 1px solid #dadce0;
  background: #fff;
}

.ga-lado i {
  width: 22px;
  height: 22px;
  border: 2px solid #5f6368;
  border-radius: 6px;
}

.ga-lado i:nth-child(2) {
  border-color: #1a73e8;
  background: #e8f0fe;
}

.ga-principal {
  flex: 1;
  padding: 22px 32px;
}

.ga-titulo {
  font-size: 22px;
  font-weight: 400;
}

.ga-titulo small {
  margin-left: 14px;
  font-size: 13px;
  color: #5f6368;
}

.ga-painel {
  margin-top: 16px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.ga-metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #dadce0;
}

.ga-metricas div {
  padding: 16px 22px 14px;
  border-top: 3px solid transparent;
}

.ga-metricas div:first-child {
  border-top-color: #1a73e8;
  background: #f8fbff;
}

.ga-metricas dt {
  font-size: 13px;
  color: #5f6368;
}

.ga-metricas dd {
  margin-top: 4px;
  font-size: 30px;
}

.ga-grafico {
  display: block;
  width: 100%;
  height: 210px;
}

.ga-grafico .grade {
  stroke: #e8eaed;
  stroke-width: 1;
}

.ga-grafico .anterior {
  fill: none;
  stroke: #9aa0a6;
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.ga-grafico .area {
  fill: rgba(26, 115, 232, 0.1);
  opacity: 0;
}

.ga-grafico .linha {
  fill: none;
  stroke: #1a73e8;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.vt-ga.ativa .ga-grafico .linha {
  animation: vt-desenha 1.8s 0.4s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.vt-ga.ativa .ga-grafico .area {
  animation: vt-aparece 0.8s 1.6s forwards;
}

@keyframes vt-desenha {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes vt-aparece {
  to {
    opacity: 1;
  }
}

.ga-dupla {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.ga-dupla .ga-painel {
  padding: 18px 22px;
}

.ga-subtitulo {
  font-size: 15px;
  font-weight: 500;
}

.ga-origens {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.ga-origens li {
  display: grid;
  grid-template-columns: 150px 1fr 44px;
  align-items: center;
  gap: 12px;
}

.ga-origens b {
  height: 10px;
  border-radius: 2px;
  background: #1a73e8;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.ga-origens li:nth-child(2) b {
  background: #12b5cb;
}

.ga-origens li:nth-child(3) b {
  background: #e8710a;
}

.ga-origens li:nth-child(4) b {
  background: #9aa0a6;
}

.vt-ga.ativa .ga-origens b {
  animation: vt-cresce 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: calc(0.9s + var(--i) * 0.12s);
}

@keyframes vt-cresce {
  to {
    transform: scaleX(var(--v, 1));
  }
}

.ga-origens span:last-child {
  text-align: right;
  color: #5f6368;
}

.ga-eventos {
  margin-top: 10px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.ga-eventos li {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #e8eaed;
}

.ga-eventos li:last-child {
  border-bottom: 0;
}

.ga-eventos code {
  font-family: Consolas, 'Roboto Mono', monospace;
  font-size: 13px;
  color: #1a73e8;
}

/* ---------- Tela 4 · Gerenciador de anúncios ---------- */

.vt-meta {
  background: #f0f2f5;
  color: #1c2b33;
}

.mt-topo {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid #dddfe2;
  background: #fff;
}

.mt-topo strong {
  font-size: 18px;
}

.mt-conta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #ccd0d5;
  border-radius: 6px;
  font-size: 13px;
}

.mt-conta i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--v-carbono);
}

.mt-periodo {
  margin-left: auto;
  font-size: 13px;
  color: #65676b;
}

.mt-corpo {
  display: flex;
  height: 666px;
}

.mt-trilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 56px;
  padding-top: 22px;
  border-right: 1px solid #dddfe2;
  background: #fff;
}

.mt-trilho i {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e4e6eb;
}

.mt-trilho i:nth-child(2) {
  background: #0866ff;
}

.mt-principal {
  flex: 1;
  padding: 18px 22px;
}

.mt-abas {
  display: flex;
  gap: 8px;
}

.mt-abas span {
  display: inline-flex;
  align-items: center;
  height: 42px;
  margin-bottom: -1px;
  padding: 0 22px;
  border: 1px solid #dddfe2;
  border-radius: 8px 8px 0 0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #65676b;
}

.mt-abas span:first-child {
  border-bottom-color: #fff;
  color: #0866ff;
}

.mt-painel {
  border: 1px solid #dddfe2;
  border-radius: 0 8px 8px 8px;
  background: #fff;
  overflow: hidden;
}

.mt-acoes {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
}

.mt-acoes span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: #e4e6eb;
  font-size: 13px;
  font-weight: 600;
}

.mt-acoes span:first-child {
  background: #42b72a;
  color: #fff;
}

.mt-linha {
  display: grid;
  grid-template-columns: 56px 1.7fr 110px 1.1fr 100px 130px 120px;
  align-items: center;
  min-height: 58px;
  padding: 0 16px 0 0;
  border-top: 1px solid #e4e6eb;
  font-size: 13.5px;
}

.mt-linha > * {
  padding: 0 10px;
}

.mt-linha--cabeca {
  min-height: 40px;
  background: #f5f6f7;
  font-size: 12.5px;
  font-weight: 600;
  color: #65676b;
}

.mt-linha--total {
  background: #f5f6f7;
  font-weight: 600;
}

.mt-chave {
  position: relative;
  justify-self: center;
  width: 34px;
  height: 20px;
  padding: 0;
  border-radius: 10px;
  background: #0866ff;
}

.mt-chave::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.mt-nome {
  font-weight: 600;
  color: #0866ff;
}

.mt-ativa::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #31a24c;
}

.mt-linha small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #65676b;
}

.mt-num {
  text-align: right;
}

.mt-grafico {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 120px;
  margin-top: 16px;
  padding: 18px 22px 0;
  border: 1px solid #dddfe2;
  border-radius: 8px;
  background: #fff;
}

.mt-grafico p {
  align-self: flex-start;
  width: 190px;
  font-size: 14px;
  font-weight: 600;
}

.mt-grafico p small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #65676b;
}

.mt-grafico b {
  flex: 1;
  height: calc(var(--v) * 100%);
  border-radius: 4px 4px 0 0;
  background: #0866ff;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.vt-meta.ativa .mt-grafico b {
  animation: vt-sobe 900ms cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: calc(1s + var(--i) * 0.1s);
}

@keyframes vt-sobe {
  to {
    transform: none;
  }
}

/* ---------- Tela 6 · Google Ads ----------
 *
 * Entrou em 24/10/2026, pro notebook da página de Google Ads e Meta Ads
 * (o conjunto `metricas` do MacbookVitrine). Mesmo traço do Analytics:
 * cartões de métrica com a cor da plataforma, as duas linhas do gráfico se
 * desenhando, as campanhas de pesquisa e os termos que trouxeram clique.
 * Versão anterior deste arquivo em
 * `_arquivo/vetra-antes-google-ads-2026-10-24.css`.
 */

.vt-gads {
  background: #f8f9fa;
  color: #202124;
}

.gd-topo {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid #dadce0;
  background: #fff;
}

.gd-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  color: #5f6368;
}

.gd-marca svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #1a73e8;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.gd-marca svg circle {
  fill: #f9ab00;
  stroke: none;
}

.gd-conta {
  padding-left: 22px;
  border-left: 1px solid #dadce0;
  font-size: 13px;
  line-height: 1.3;
  color: #5f6368;
}

.gd-conta small {
  display: block;
  font-size: 14px;
  color: #202124;
}

.gd-busca {
  flex: 1;
  max-width: 480px;
  height: 44px;
  margin-left: auto;
  border-radius: 8px;
  background: #f1f3f4;
}

.gd-corpo {
  display: flex;
  height: 660px;
}

.gd-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 64px;
  padding-top: 24px;
  border-right: 1px solid #dadce0;
  background: #fff;
}

.gd-lado i {
  width: 22px;
  height: 22px;
  border: 2px solid #5f6368;
  border-radius: 6px;
}

.gd-lado i:first-child {
  border-color: #1a73e8;
  background: #e8f0fe;
}

.gd-menu {
  width: 196px;
  padding: 16px 0;
  list-style: none;
  border-right: 1px solid #dadce0;
  background: #fff;
  font-size: 14px;
  color: #3c4043;
}

.gd-menu li {
  padding: 10px 24px;
}

.gd-menu .gd-menu__ativo {
  margin-right: 12px;
  border-radius: 0 20px 20px 0;
  background: #e8f0fe;
  color: #1967d2;
  font-weight: 600;
}

.gd-principal {
  flex: 1;
  padding: 22px 28px;
}

.gd-titulo {
  font-size: 22px;
}

.gd-titulo small {
  margin-left: 14px;
  padding: 4px 12px;
  border: 1px solid #dadce0;
  border-radius: 14px;
  font-size: 12px;
  color: #5f6368;
}

.gd-painel {
  margin-top: 16px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.gd-metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.gd-metricas div {
  padding: 14px 20px 12px;
  border-right: 1px solid #dadce0;
}

.gd-metricas div:last-child {
  border-right: 0;
}

.gd-metricas dt {
  font-size: 13px;
  color: #5f6368;
}

.gd-metricas dd {
  margin-top: 2px;
  font-size: 28px;
}

/* Os dois cartões ligados ao gráfico, na cor da linha de cada um. */
.gd-metricas .gd-azul {
  background: #1a73e8;
  border-color: #1a73e8;
}

.gd-metricas .gd-vermelho {
  background: #d93025;
  border-color: #d93025;
}

.gd-metricas .gd-azul dt,
.gd-metricas .gd-azul dd,
.gd-metricas .gd-vermelho dt,
.gd-metricas .gd-vermelho dd {
  color: #fff;
}

.gd-grafico {
  display: block;
  width: 100%;
  height: 150px;
}

.gd-grafico .grade {
  stroke: #e8eaed;
  stroke-width: 1;
}

.gd-grafico .cliques,
.gd-grafico .conversoes {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.gd-grafico .cliques {
  stroke: #1a73e8;
}

.gd-grafico .conversoes {
  stroke: #d93025;
}

.vt-gads.ativa .gd-grafico .cliques {
  animation: vt-desenha 1.8s 0.4s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.vt-gads.ativa .gd-grafico .conversoes {
  animation: vt-desenha 1.8s 0.7s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.gd-dupla {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
}

.gd-dupla .gd-painel {
  padding: 18px 22px;
}

.gd-subtitulo {
  font-size: 15px;
  font-weight: 500;
}

.gd-tabela {
  margin-top: 10px;
  font-size: 13px;
}

.gd-linha {
  display: grid;
  grid-template-columns: 1fr 64px 52px 94px;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #e8eaed;
}

.gd-linha:last-child {
  border-bottom: 0;
}

.gd-linha > span:not(:first-child) {
  text-align: right;
}

.gd-linha--cabeca {
  padding-top: 4px;
  font-size: 12px;
  color: #5f6368;
}

.gd-nome {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1a73e8;
  white-space: nowrap;
}

.gd-nome i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e8e3e;
}

.gd-termos {
  display: grid;
  gap: 13px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.gd-termos li {
  display: grid;
  grid-template-columns: 1fr 70px 30px;
  align-items: center;
  gap: 10px;
}

.gd-termos b {
  height: 8px;
  border-radius: 2px;
  background: #1a73e8;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.vt-gads.ativa .gd-termos b {
  animation: vt-cresce 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: calc(0.9s + var(--i) * 0.12s);
}

.gd-termos span:last-child {
  text-align: right;
  color: #5f6368;
}

/* ---------- Tela 5 · WhatsApp ---------- */

.vt-wa {
  display: flex;
  background: #fff;
  color: #111b21;
}

.wa-trilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 64px;
  padding-top: 18px;
  border-right: 1px solid #d1d7db;
  background: #f0f2f5;
}

.wa-trilho i {
  width: 24px;
  height: 24px;
  border: 2px solid #54656f;
  border-radius: 50%;
}

.wa-trilho i:first-child {
  border-color: #00a884;
  background: rgba(0, 168, 132, 0.15);
}

.wa-lista {
  display: flex;
  flex-direction: column;
  width: 430px;
  border-right: 1px solid #d1d7db;
}

.wa-lista__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 20px;
  font-size: 22px;
  font-weight: 700;
}

.wa-lista__topo span {
  font-size: 12px;
  font-weight: 600;
  color: #00a884;
}

.wa-busca {
  height: 38px;
  margin: 0 14px;
  padding: 0 18px;
  border-radius: 20px;
  background: #f0f2f5;
  font-size: 14px;
  line-height: 38px;
  color: #667781;
}

.wa-filtros {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
}

.wa-filtros span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: #f0f2f5;
  font-size: 14px;
  color: #54656f;
}

.wa-filtros span:first-child {
  background: #d9fdd3;
  color: #008069;
}

.wa-conversas {
  flex: 1;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.wa-conversa {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 0 14px;
  height: 72px;
  padding: 0 16px;
  overflow: hidden;
}

.wa-conversa--aberta {
  background: #f0f2f5;
}

/* As novas chegam por cima e empurram as outras pra baixo. */
.wa-conversa--nova {
  max-height: 0;
  opacity: 0;
}

.vt-wa.ativa .wa-conversa--nova {
  animation: wa-chega 520ms cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: var(--t);
}

@keyframes wa-chega {
  0% {
    max-height: 0;
    opacity: 0;
    background: #e7fce3;
  }
  60% {
    max-height: 72px;
    opacity: 1;
    background: #e7fce3;
  }
  100% {
    max-height: 72px;
    opacity: 1;
    background: #fff;
  }
}

.wa-avatar {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #dfe5e7;
  font-size: 17px;
  font-weight: 600;
  color: #54656f;
}

.wa-conversa:nth-child(3n + 1) .wa-avatar {
  background: #d6e6f5;
  color: #35618c;
}

.wa-conversa:nth-child(3n + 2) .wa-avatar {
  background: #f5e2d6;
  color: #8c5235;
}

.wa-texto {
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid #e9edef;
}

.wa-texto strong {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
}

.wa-texto span {
  display: block;
  overflow: hidden;
  font-size: 14px;
  color: #667781;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wa-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  align-self: stretch;
  border-bottom: 1px solid #e9edef;
  font-size: 12px;
  color: #667781;
}

.wa-conversa--nova .wa-lado {
  color: #1fa855;
}

.wa-lado b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #25d366;
  color: #fff;
  font-size: 12px;
}

.wa-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #efeae2;
  background-image: radial-gradient(rgba(17, 27, 33, 0.05) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}

.wa-chat__topo {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
  padding: 0 16px;
  background: #f0f2f5;
  font-size: 16px;
}

.wa-chat__topo .wa-avatar {
  width: 42px;
  height: 42px;
  background: #d6e6f5;
  color: #35618c;
}

.wa-chat__topo small {
  display: block;
  font-size: 13px;
  color: #667781;
}

.wa-mensagens {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 24px 64px;
}

.wa-dia {
  align-self: center;
  margin-bottom: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  color: #54656f;
}

.wa-msg {
  align-self: flex-start;
  max-width: 64%;
  padding: 8px 12px 6px;
  border-radius: 0 8px 8px 8px;
  background: #fff;
  font-size: 15.5px;
  line-height: 1.35;
}

.wa-msg small {
  float: right;
  margin: 6px 0 0 14px;
  font-size: 11.5px;
  color: #667781;
}

.wa-msg--eu {
  align-self: flex-end;
  border-radius: 8px 0 8px 8px;
  background: #d9fdd3;
}

.wa-msg--eu small::after {
  content: ' \2713\2713';
  color: #53bdeb;
}

.wa-digitando {
  display: flex;
  gap: 5px;
  align-self: flex-start;
  padding: 14px 16px;
  border-radius: 0 8px 8px 8px;
  background: #fff;
}

.wa-digitando i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8696a0;
}

.vt-wa.ativa .wa-digitando i {
  animation: wa-pula 1s infinite ease-in-out;
}

.vt-wa.ativa .wa-digitando i:nth-child(2) {
  animation-delay: 0.15s;
}

.vt-wa.ativa .wa-digitando i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes wa-pula {
  0%,
  60%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(-4px);
  }
}

.wa-rodape {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
  padding: 0 18px;
  background: #f0f2f5;
}

.wa-rodape span {
  flex: 1;
  height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  line-height: 42px;
  color: #667781;
}

.wa-rodape i {
  width: 24px;
  height: 24px;
  border: 2px solid #54656f;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .vetra.ativa .vt-surge,
  .vt-ig.ativa .ig-perfil > *,
  .vt-ga.ativa .ga-grafico .linha,
  .vt-ga.ativa .ga-grafico .area,
  .vt-ga.ativa .ga-origens b,
  .vt-meta.ativa .mt-grafico b,
  .vt-gads.ativa .gd-grafico path,
  .vt-gads.ativa .gd-termos b,
  .vt-wa.ativa .wa-conversa--nova,
  .vt-wa.ativa .wa-digitando i {
    animation: none;
  }
  .gd-grafico .cliques,
  .gd-grafico .conversoes {
    stroke-dashoffset: 0;
  }
  .gd-termos b {
    transform: scaleX(var(--v, 1));
  }
  .vt-surge,
  .wa-conversa--nova,
  .ga-grafico .area {
    opacity: 1;
  }
  .wa-conversa--nova {
    max-height: 72px;
  }
  .ga-grafico .linha {
    stroke-dashoffset: 0;
  }
  .ga-origens b {
    transform: scaleX(var(--v, 1));
  }
  .mt-grafico b {
    transform: none;
  }
}