/* ═══════════════════════════════════════════════════════════════════════
   BLACKFIELD PARTNERS — blocos
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ Abertura ═══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(148px, 20vh, 240px) clamp(56px, 8vh, 96px);
  overflow: clip;
  isolation: isolate;
}
/* A imagem de base do topo (.fundo-img) garante textura enquanto o vídeo
   não chega e onde ele nem é baixado: celular, economia de dados,
   movimento reduzido. O véu continua sendo quem garante a leitura. */

.hero-campo,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero-video {
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--lento);
}
/* Quanto maior este valor, mais o vídeo aparece e menos legível fica o
   título por cima. 0.32 é o ponto em que dá para ler o movimento sem
   brigar com o texto. */
.hero-video.pronto {
  opacity: 0.32;
}
/* Véu: o texto precisa ganhar do campo e de qualquer vídeo que entre. */
.hero-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(100% 78% at 12% 88%, rgba(11, 13, 15, 0.9), transparent 62%),
    linear-gradient(180deg, rgba(11, 13, 15, 0.86) 0%, rgba(11, 13, 15, 0.36) 42%, var(--field) 96%);
}
/* Véu aberto, só no topo da home. Com 0,86 na parte alta a fotografia só
   aparecia numa faixa estreita do meio e a profundidade se perdia; aqui o
   peso fica concentrado onde o texto realmente cai, que é a mancha radial
   embaixo à esquerda. Não vale para os outros topos: a abertura das
   Perspectivas usa texto em --txt-3, que não sobrevive a este véu. */
.hero-veu--aberto {
  background:
    radial-gradient(96% 76% at 14% 86%, rgba(11, 13, 15, 0.88), transparent 64%),
    linear-gradient(180deg, rgba(11, 13, 15, 0.7) 0%, rgba(11, 13, 15, 0.24) 46%, var(--field) 97%);
}

.hero-conteudo {
  position: relative;
  z-index: 1;
}
.hero-etiqueta {
  animation: entra 0.8s var(--lento) both;
}
.hero-titulo {
  margin-top: 30px;
  max-width: 18ch;
  animation: entra 1s 0.08s var(--lento) both;
}
.hero-lead {
  margin-top: 30px;
  max-width: 62ch;
  animation: entra 1s 0.18s var(--lento) both;
}
.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  animation: entra 1s 0.28s var(--lento) both;
}

.hero-fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  margin: clamp(52px, 8vh, 92px) 0 0;
  border-top: 1px solid var(--filete);
  animation: entra 1s 0.36s var(--lento) both;
}
.hero-fatos > div {
  padding: 26px var(--coluna) 0 0;
}
.hero-fatos dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-txt);
}
.hero-fatos dd {
  margin: 12px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--txt-2);
  max-width: 26ch;
}

/* ══ Declaração ═════════════════════════════════════════════════════════ */

.declaracao {
  border-top: 1px solid var(--filete);
}
.declaracao-frase {
  margin: 40px 0 0;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  max-width: 20ch;
  color: var(--txt);
}
.declaracao-corpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--coluna) clamp(32px, 5vw, 80px);
  margin-top: clamp(40px, 6vw, 68px);
  padding-top: 36px;
  border-top: 1px solid var(--filete);
  max-width: 88ch;
}
.declaracao-corpo .txt {
  font-size: 1.02rem;
  line-height: 1.75;
}

/* ══ O campo ════════════════════════════════════════════════════════════ */

.campo-grade {
  display: grid;
  grid-template-columns: minmax(230px, 0.62fr) minmax(320px, 1fr);
  gap: clamp(24px, 3.5vw, 64px);
  margin-top: clamp(44px, 6vw, 76px);
  align-items: start;
}
@media (max-width: 940px) {
  .campo-grade {
    grid-template-columns: 1fr;
  }
}

.campo-lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--filete);
}
.campo-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 20px 4px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--filete);
  cursor: pointer;
  color: var(--txt-3);
  transition: color 0.4s var(--lento);
}
.campo-item::after {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  margin-top: 18px;
  margin-bottom: -20px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--lento);
}
.campo-n {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.campo-nome {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.24;
}
.campo-item:hover {
  color: var(--txt-2);
}
.campo-item[aria-selected='true'] {
  color: var(--txt);
}
.campo-item[aria-selected='true']::after {
  transform: scaleX(1);
}

.campo-painel {
  padding: clamp(28px, 3.4vw, 46px);
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--r);
}
.js .campo-detalhe {
  display: none;
}
.js .campo-detalhe.ativo {
  display: block;
  animation: entra 0.5s var(--lento) both;
}
.campo-detalhe h3 {
  margin-bottom: 30px;
}
.campo-par {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px 26px;
  padding: 20px 0;
  border-top: 1px solid var(--filete);
}
@media (max-width: 620px) {
  .campo-par {
    grid-template-columns: 1fr;
  }
}
.campo-rot {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
  padding-top: 4px;
}
.campo-par--saida .campo-rot {
  color: var(--brass-txt);
}
.campo-par--saida .txt {
  color: var(--txt);
}

/* ══ Atuação ════════════════════════════════════════════════════════════ */

.frentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  margin-top: clamp(44px, 6vw, 76px);
  border-top: 1px solid var(--filete);
}
.frente {
  padding: 40px clamp(24px, 3vw, 44px) 44px 0;
  border-right: 1px solid var(--filete);
}
.frente:last-child {
  border-right: 0;
  padding-right: 0;
}
@media (max-width: 900px) {
  .frente {
    border-right: 0;
    border-bottom: 1px solid var(--filete);
    padding-right: 0;
  }
  .frente:last-child {
    border-bottom: 0;
  }
}
.frente-n {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brass-txt);
  margin-bottom: 22px;
}
.frente h3 {
  margin-bottom: 16px;
}
.frente .txt {
  font-size: 0.98rem;
  line-height: 1.7;
}
.frente-lista {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.frente-lista li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--txt-3);
}
.frente-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--brass);
}

/* ── Rotinas ──────────────────────────────────────────────────────────── */

.rotinas {
  margin-top: clamp(64px, 8vw, 108px);
}
.rotinas-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--filete);
}
.rotinas-topo .indice::after {
  display: none;
}
.rotinas-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rotinas-abas .opc {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.84rem;
}

.js .rotinas-grupo {
  display: none;
}
.js .rotinas-grupo.ativo {
  display: block;
}
.rotina {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1.3fr) minmax(180px, 1.3fr) auto;
  gap: 10px clamp(18px, 2.4vw, 38px);
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--filete);
  animation: entra 0.45s var(--lento) both;
}
@media (max-width: 900px) {
  .rotina {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.rotina-nome {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--txt);
}
.rotina-hoje,
.rotina-depois {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--txt-3);
}
.rotina-depois {
  color: var(--txt-2);
  position: relative;
  padding-left: 22px;
}
.rotina-depois::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 11px;
  height: 1px;
  background: var(--green-alto);
}
@media (max-width: 900px) {
  .rotina-hoje::before {
    content: 'Hoje: ';
    color: var(--txt-3);
  }
  .rotina-depois {
    padding-left: 0;
  }
  .rotina-depois::before {
    content: 'Depois: ';
    position: static;
    width: auto;
    height: auto;
    background: none;
    color: var(--green-alto);
  }
}
.rotina-ganho {
  margin: 0;
  justify-self: end;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--brass-txt);
  white-space: nowrap;
}
.rotina-ganho span {
  font-weight: 400;
  color: var(--txt-3);
}
@media (max-width: 900px) {
  .rotina-ganho {
    justify-self: start;
    margin-top: 6px;
  }
}
.rotinas-nota {
  margin-top: 26px;
  max-width: 70ch;
}

/* Soma da área: linha de dossiê entre as abas e as rotinas. */
.rotinas-soma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--filete);
}
.rotinas-soma-rot {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.rotinas-soma-val {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brass-txt);
}
.rotinas-soma-extra {
  font-size: 0.82rem;
  color: var(--txt-3);
  margin-left: auto;
}
@media (max-width: 620px) {
  .rotinas-soma-extra {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ══ Sistemas de decisão ════════════════════════════════════════════════ */

.sis-troca {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(40px, 5vw, 64px) 0 20px;
}
.sis-palco {
  padding: clamp(20px, 2.6vw, 32px);
}
.sis-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--filete);
  font-size: 0.82rem;
  color: var(--txt-3);
}
.sis-vivo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--txt-2);
}
.sis-arquivo {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.78rem;
  color: var(--txt-2);
}
.sis-alerta {
  color: var(--brass-txt);
}

.sis-planilha {
  height: 184px;
  border: 1px solid var(--filete);
  background-image:
    linear-gradient(90deg, var(--filete) 1px, transparent 1px),
    linear-gradient(180deg, var(--filete) 1px, transparent 1px);
  background-size:
    12.5% 100%,
    100% 26px;
  opacity: 0.6;
}
.sis-notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid var(--filete);
}
.sis-notas p {
  margin: 0;
  padding: 20px clamp(16px, 2vw, 28px) 20px 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--txt-3);
  border-right: 1px solid var(--filete);
}
.sis-notas p:last-child {
  border-right: 0;
}
.sis-notas b {
  display: block;
  font-weight: 600;
  color: var(--brass-txt);
  margin-bottom: 4px;
}
@media (max-width: 760px) {
  .sis-notas p {
    border-right: 0;
    border-bottom: 1px solid var(--filete);
  }
  .sis-notas p:last-child {
    border-bottom: 0;
  }
}

.sis-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--filete);
}
.sis-kpi {
  padding: 26px clamp(16px, 2vw, 28px) 26px 0;
  border-right: 1px solid var(--filete);
}
.sis-kpi:last-child {
  border-right: 0;
}
@media (max-width: 760px) {
  .sis-kpi {
    border-right: 0;
    border-bottom: 1px solid var(--filete);
  }
}
.sis-rot {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.sis-num {
  margin: 14px 0 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--txt);
}
.sis-kpi:first-child .sis-num {
  color: var(--brass-txt);
}
.sis-var {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--acento);
}

.sis-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border-top: 1px solid var(--filete);
}
.sis-gr {
  padding: 26px clamp(16px, 2vw, 28px) 4px 0;
  border-right: 1px solid var(--filete);
}
.sis-gr:last-child {
  border-right: 0;
}
@media (max-width: 760px) {
  .sis-gr {
    border-right: 0;
  }
}
.sis-barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 70px;
  margin-top: 18px;
}
.sis-b {
  flex: 1;
  height: var(--h);
  background: var(--filete-2);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.sis-b.destaque {
  background: var(--brass);
}
.sis-linha {
  width: 100%;
  height: 70px;
  margin-top: 18px;
  overflow: visible;
}
.sis-linha [data-pn-traco] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sis-linha [data-pn-area] {
  opacity: 0;
}
.sis-palco.anima .sis-b {
  animation: sobe-barra 0.8s var(--lento) both;
  animation-delay: calc(var(--i) * 42ms);
}
.sis-palco.anima .sis-linha [data-pn-traco] {
  animation: traca 1.5s var(--lento) 0.2s both;
}
.sis-palco.anima .sis-linha [data-pn-area] {
  animation: revela 0.8s ease 1.1s both;
}
@keyframes sobe-barra {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes traca {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes revela {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sis-b {
    transform: scaleY(1);
  }
  .sis-linha [data-pn-traco] {
    stroke-dashoffset: 0;
  }
  .sis-linha [data-pn-area] {
    opacity: 1;
  }
}
.sis-nota {
  margin-top: 24px;
  max-width: 74ch;
}

/* A troca entre a planilha e o sistema passa por um apagar curto, em vez
   de um corte seco que parece falha de renderização. */
.sis-palco {
  transition: opacity 0.2s var(--lento);
}
.sis-palco.trocando {
  opacity: 0.25;
}
@media (prefers-reduced-motion: reduce) {
  .sis-palco.trocando {
    opacity: 1;
  }
}

/* ══ Relatório interativo ═══════════════════════════════════════════════
   O painel de demonstração, no formato de relatório: segmentação na
   lateral, cartões de indicador, área mensal e recortes por unidade e por
   linha de receita.

   A cor aqui é funcional, não decorativa: cada série tem a sua para poder
   ser distinguida, e a seleção é marcada em branco. Fora isso, grafite. */

.bi {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
}
@media (max-width: 980px) {
  .bi {
    grid-template-columns: 1fr;
  }
}

/* ── Lateral ──────────────────────────────────────────────────────────── */

.bi-lateral {
  background: var(--fundo);
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.bi-marca-rel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--filete);
}
.bi-marca-rel b {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--txt);
}
.bi-marca-rel em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--txt-3);
}

.bi-grupo {
  margin: 0;
  padding: 0;
  border: 0;
}
.bi-grupo legend {
  padding: 0 0 10px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.bi-grupo > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bi-periodo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Item de segmentação: lista, não pílula. O selecionado inverte. */
.bi-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 11px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--txt-2);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.3s var(--lento), color 0.3s var(--lento);
}
.bi-item:hover {
  background: color-mix(in srgb, var(--txt) 7%, transparent);
  color: var(--txt);
}
.bi-item[aria-pressed='true'] {
  background: var(--brass);
  color: #14171a;
  font-weight: 600;
}

.bi-limpar {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--filete-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--txt-2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s var(--lento), color 0.3s var(--lento);
}
.bi-limpar:hover:not(:disabled) {
  border-color: var(--brass);
  color: var(--brass-txt);
}
.bi-limpar:disabled {
  opacity: 0.32;
  cursor: default;
}
.bi-dica {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--txt-3);
}

/* ── Corpo ────────────────────────────────────────────────────────────── */

.bi-corpo {
  background: var(--fundo);
  padding: 16px clamp(14px, 1.6vw, 18px) 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.bi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bi-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--brass) 12%, transparent);
  color: var(--txt);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.3s var(--lento);
}
.bi-chip:hover {
  background: color-mix(in srgb, var(--brass) 24%, transparent);
}
.bi-chip i {
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  color: var(--brass-txt);
}

/* ── Cartões de indicador ─────────────────────────────────────────────── */

.bi-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.bi-cartao {
  position: relative;
  padding: 12px 13px 8px;
  background: color-mix(in srgb, var(--txt) 4%, transparent);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  overflow: hidden;
}
/* Filete de cor: identifica a série sem pintar o cartão inteiro. */
.bi-cartao::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--cor);
}
.bi-cartao-topo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bi-cartao-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor);
  flex: none;
}
.bi-cartao-rot {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.bi-cartao-val {
  margin: 8px 0 0;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--txt);
}
.bi-cartao-var {
  margin: 4px 0 0;
  font-size: 0.73rem;
  color: var(--txt-3);
}
.bi-cartao-var.sobe {
  color: var(--green-alto);
}
.bi-cartao-var.desce {
  color: #c98f6a;
}
.bi-spark {
  width: 100%;
  height: 26px;
  margin-top: 6px;
  display: block;
}

/* ── Grade dos visuais ────────────────────────────────────────────────── */

.bi-linha-1 {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
@media (max-width: 900px) {
  .bi-linha-1 {
    grid-template-columns: 1fr;
  }
}
.bi-viz {
  padding: 13px 14px 10px;
  background: color-mix(in srgb, var(--txt) 3%, transparent);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  min-width: 0;
}
.bi-viz-tit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 11px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.bi-legenda {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
.bi-marca {
  width: 12px;
  height: 8px;
  display: inline-block;
}
.bi-marca--area {
  background: linear-gradient(180deg, #b89a61, rgba(184, 154, 97, 0.15));
}
.bi-marca--pto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid #b89a61;
}

.bi-svg {
  width: 100%;
  height: auto;
  color: var(--txt);
  overflow: visible;
  display: block;
}
.bi-eixo {
  font-size: 10px;
  fill: var(--txt-3);
}
.bi-rot {
  font-size: 12px;
  font-weight: 600;
  fill: var(--txt);
}
.bi-val {
  font-size: 10.5px;
  fill: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
.bi-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--txt-2);
  font-variant-numeric: tabular-nums;
}

/* Número focal do painel de unidade, o equivalente ao destaque central. */
.bi-foco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--filete);
}
.bi-foco b {
  font-size: clamp(1.7rem, 2.5vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brass-txt);
}
.bi-foco span {
  font-size: 0.76rem;
  color: var(--txt-3);
}

/* Mix por canal em barra empilhada: compacto e comparável. */
.bi-mix {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--filete);
}
.bi-empilhada {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 2px;
}
.bi-seg {
  border: 0;
  padding: 0;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.3s var(--lento);
}
.bi-seg.apagado {
  opacity: 0.25;
}
.bi-seg:hover {
  opacity: 0.8;
}
.bi-legenda-canal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 9px;
}
.bi-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--txt-2);
  transition: opacity 0.3s var(--lento);
}
.bi-leg-item.apagado {
  opacity: 0.32;
}
.bi-leg-item i {
  width: 9px;
  height: 9px;
  flex: none;
}
.bi-leg-item b {
  font-weight: 500;
}
.bi-leg-item em {
  font-style: normal;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

/* ── Colunas por linha de receita ─────────────────────────────────────── */

.bi-minis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.bi-mini {
  padding: 12px 13px 8px;
  background: color-mix(in srgb, var(--txt) 3%, transparent);
  border: 1px solid var(--filete);
  border-top: 2px solid var(--cor);
  border-radius: var(--r);
  cursor: pointer;
  min-width: 0;
  transition: background 0.3s var(--lento), opacity 0.3s var(--lento);
}
.bi-mini:hover {
  background: color-mix(in srgb, var(--txt) 7%, transparent);
}
.bi-mini.apagado {
  opacity: 0.4;
}
.bi-mini:focus-visible {
  outline: 1.5px solid var(--brass);
  outline-offset: 2px;
}
.bi-mini-tit {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--txt);
}
.bi-mini-sub {
  margin: 3px 0 7px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--txt-3);
}

/* ── Alvos clicáveis ──────────────────────────────────────────────────
   O apagado marca o que ficou fora do filtro sem sumir: comparar com o
   que saiu é metade da leitura. */

.bi-ponto,
.bi-barra-un {
  cursor: pointer;
  transition: opacity 0.3s var(--lento);
}
.bi-ponto.apagado,
.bi-barra-un.apagado {
  opacity: 0.3;
}
.bi-ponto:hover,
.bi-barra-un:hover {
  opacity: 0.85;
}
.bi-ponto:focus-visible,
.bi-barra-un:focus-visible {
  outline: 1.5px solid var(--brass);
  outline-offset: 2px;
}
.bi-alvo {
  pointer-events: all;
}

.bi-rodape {
  margin: 4px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--txt-3);
}

@media (prefers-reduced-motion: reduce) {
  .bi-ponto,
  .bi-barra-un,
  .bi-seg,
  .bi-mini,
  .bi-item {
    transition: none;
  }
}
.conta .d2 {
  margin-top: 26px;
}
.conta-rot {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.conta-atalhos-lista .opc {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.82rem;
}
.volta-dia.gasto {
  background: color-mix(in srgb, var(--txt) 46%, transparent);
}
.volta-dia.devolvido {
  background: var(--brass);
}
.volta-destino.aceso {
  opacity: 1;
  background: color-mix(in srgb, var(--brass) 9%, var(--fundo));
}
.volta-destino.aceso::before {
  transform: scaleY(1);
}
.volta-destino.aceso .volta-destino-marca {
  border-color: var(--brass);
}
.volta-destino.aceso .volta-glifo {
  color: var(--brass-txt);
}
.ano-dia.fica {
  background: color-mix(in srgb, var(--txt) 42%, transparent);
}
.ano-dia.rec {
  background: var(--brass);
}

/* ══ Método ═════════════════════════════════════════════════════════════ */

.metodo {
  list-style: none;
  margin: clamp(44px, 6vw, 76px) 0 0;
  padding: 0;
  border-top: 1px solid var(--filete);
}
.etapa {
  padding: 40px 0;
  border-bottom: 1px solid var(--filete);
  transition: background 0.5s var(--lento);
}
.etapa-cab {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: baseline;
  gap: 16px 24px;
}
.etapa-n {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brass-txt);
}
.etapa-prazo {
  font-size: 0.82rem;
  color: var(--txt-3);
  white-space: nowrap;
}
.etapa-corpo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 16px 24px;
  margin-top: 22px;
}
.etapa-corpo .txt {
  grid-column: 2;
  font-size: 0.98rem;
  line-height: 1.72;
}
.etapa-saida {
  grid-column: 3;
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid var(--filete);
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--txt-3);
}
.etapa--destaque .etapa-n {
  color: var(--acento);
}
@media (max-width: 860px) {
  .etapa-cab {
    grid-template-columns: 48px 1fr;
  }
  .etapa-prazo {
    grid-column: 2;
  }
  .etapa-corpo {
    grid-template-columns: 1fr;
  }
  .etapa-corpo .txt,
  .etapa-saida {
    grid-column: 1;
  }
  .etapa-saida {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--filete);
  }
}

/* ══ Leitura rápida ═════════════════════════════════════════════════════ */

.leitura {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(260px, 0.9fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 940px) {
  .leitura {
    grid-template-columns: 1fr;
  }
}
.leitura .d2 {
  margin-top: 26px;
}
.leitura-lead {
  margin-top: 24px;
}
.leitura-perguntas {
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid var(--filete);
}
.lq {
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid var(--filete);
  min-width: 0;
}
.lq-enunciado {
  padding: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.46;
  letter-spacing: -0.022em;
  color: var(--txt);
}
.lq-n {
  margin-right: 14px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--brass-txt);
}
.lq-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.lq-opcoes .opc {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.86rem;
}

.leitura-res {
  position: sticky;
  top: 108px;
  padding: 30px;
  background: var(--fundo);
  border: 1px solid var(--filete-2);
  border-radius: var(--r);
}
@media (max-width: 940px) {
  .leitura-res {
    position: static;
  }
}
.leitura-medidor {
  height: 1px;
  background: var(--filete-2);
  margin: 16px 0 26px;
}
.leitura-medidor span {
  display: block;
  height: 1px;
  width: 0;
  background: var(--brass);
  transition: width 0.7s var(--lento);
}
.leitura-txt {
  margin-top: 16px;
  font-size: 0.96rem;
  line-height: 1.72;
}
.leitura-cta {
  margin-top: 30px;
}

/* Onde começar: o padrão apontado pela leitura vira um atalho para a
   seção O campo, já com a aba certa aberta. */
.lq-movimento {
  display: block;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--filete-2);
  border-left: 2px solid var(--brass);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--txt) 4%, transparent);
  transition:
    background 0.4s var(--lento),
    border-color 0.4s var(--lento);
}
.lq-movimento:hover {
  background: color-mix(in srgb, var(--txt) 8%, transparent);
  border-color: var(--txt-2);
  border-left-color: var(--brass);
}
.lq-movimento[hidden] {
  display: none;
}
.lq-movimento-rot {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.lq-movimento-nome {
  display: block;
  margin-top: 8px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--txt);
}
.lq-movimento-ir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brass-txt);
}
.lq-movimento-ir .seta {
  transition: transform 0.45s var(--lento);
}
.lq-movimento:hover .seta {
  transform: translateX(5px);
}

.lq-refazer {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--txt-3);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.35s var(--lento);
}
.lq-refazer:hover {
  color: var(--txt);
}
.lq-refazer[hidden] {
  display: none;
}

/* ══ Contato ════════════════════════════════════════════════════════════ */

.contato {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 0.9fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 940px) {
  .contato {
    grid-template-columns: 1fr;
  }
}
.contato .d2 {
  margin-top: 26px;
}
.contato-lead {
  margin-top: 24px;
}
.contato-canais {
  margin: 44px 0 0;
  border-top: 1px solid var(--filete);
}
.contato-canais > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--filete);
}
.contato-canais dt {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
  padding-top: 3px;
}
.contato-canais dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--txt-2);
}
.contato-canais dd a {
  color: var(--txt);
  border-bottom: 1px solid var(--filete-2);
  transition: border-color 0.35s var(--lento);
}
.contato-canais dd a:hover {
  border-bottom-color: var(--brass);
}
@media (max-width: 520px) {
  .contato-canais > div {
    grid-template-columns: 1fr;
  }
}

.contato-form {
  display: grid;
  gap: 26px;
  padding: clamp(28px, 3.4vw, 42px);
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--r);
}

/* ══ Rodapé ═════════════════════════════════════════════════════════════ */

.rodape-frase {
  margin-top: 24px;
  max-width: 34ch;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS DE PRODUTO

   Automações, Dashboards, Método e Contato têm página própria. Estes blocos
   são a estrutura comum entre elas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fundo com imagem ─────────────────────────────────────────────────

   A imagem é um <img> de verdade, não background em variável CSS. Motivo:
   url() dentro de custom property resolve o caminho relativo ao arquivo
   CSS onde a variável é consumida, e não ao HTML que a declarou. Com a
   folha em assets/css/, todo caminho virava assets/css/assets/img/... e
   dava 404. Com <img> o caminho resolve pelo documento, e ainda ganhamos
   carregamento preguiçoso e decodificação assíncrona.

   Se o arquivo faltar, sobra o campo escuro e nada quebra. */

.com-fundo {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.fundo-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-pos, center);
  opacity: var(--img-op, 0.55);
  pointer-events: none;
}
/* Véu: o texto precisa ganhar da imagem em qualquer ponto.

   Ele é montado com a cor da própria faixa (--fundo), não com preto fixo.
   Assim a faixa grafite continua grafite e a escura continua escura: a
   alternância de atmosferas entre as seções não se perde por causa da foto. */
.com-fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 14% 82%, color-mix(in srgb, var(--fundo) 92%, transparent), transparent 62%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--fundo) 84%, transparent) 0%,
      color-mix(in srgb, var(--fundo) 44%, transparent) 45%,
      var(--fundo) 96%
    );
}
/* Numa faixa de meio de página o véu é parelho, sem canto pesado, e fecha
   nas duas pontas para a emenda com a seção vizinha não aparecer. */
.com-fundo--faixa::after {
  background: linear-gradient(
    180deg,
    var(--fundo) 0%,
    color-mix(in srgb, var(--fundo) 74%, transparent) 20%,
    color-mix(in srgb, var(--fundo) 74%, transparent) 80%,
    var(--fundo) 100%
  );
}
/* A faixa das soluções é a única imagem que sobra na home depois do topo, e
   com 74% de véu sobravam 13% da fotografia: escritório aceso à noite virava
   mancha preta. Aqui o miolo abre. Os cartões por cima não têm fundo próprio,
   então o texto deles foi um tom acima junto (ver .porta-lista). Só a home
   usa esta variante. */
.com-fundo--faixa-clara::after {
  background: linear-gradient(
    180deg,
    var(--fundo) 0%,
    color-mix(in srgb, var(--fundo) 52%, transparent) 22%,
    color-mix(in srgb, var(--fundo) 52%, transparent) 78%,
    var(--fundo) 100%
  );
}

/* ── Topo das páginas de produto ──────────────────────────────────────── */

.ph {
  padding-block: clamp(150px, 19vh, 214px) clamp(60px, 8vw, 100px);
}
.ph-conteudo {
  position: relative;
  z-index: 1;
}
.ph-volta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: 28px;
  transition: color 0.35s var(--lento);
}
.ph-volta:hover {
  color: var(--txt);
}
.ph-volta .seta {
  transition: transform 0.4s var(--lento);
}
.ph-volta:hover .seta {
  transform: translateX(-5px);
}
.ph-titulo {
  max-width: 17ch;
  margin-top: 22px;
}
.ph-lead {
  margin-top: 26px;
  max-width: 58ch;
}
.ph-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Ficha: o resumo do produto em linha de dossiê. */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: clamp(46px, 6vw, 76px) 0 0;
  border-top: 1px solid var(--filete);
}
.ficha > div {
  padding: 26px var(--coluna) 0 0;
}
.ficha dt {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-txt);
}
.ficha dd {
  margin: 12px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--txt-2);
  max-width: 28ch;
}

/* ── Portas: os produtos, na home ─────────────────────────────────────── */

.portas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0;
  margin-top: clamp(44px, 6vw, 76px);
  border-top: 1px solid var(--filete);
}
/* Abaixo de 900px os cartões já trocam o filete lateral pelo de baixo, isto
   é, já estão desenhados para empilhar. Com três frentes o auto-fit ainda
   cabia em duas colunas nesta faixa e deixava o terceiro sozinho na segunda
   linha; a coluna única evita a sobra. */
@media (max-width: 900px) {
  .portas {
    grid-template-columns: minmax(0, 1fr);
  }
}
.porta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px clamp(24px, 3vw, 44px) 44px 0;
  border-right: 1px solid var(--filete);
  color: var(--txt);
}
.porta:last-child {
  border-right: 0;
  padding-right: 0;
}
@media (max-width: 900px) {
  .porta {
    border-right: 0;
    border-bottom: 1px solid var(--filete);
    padding-right: 0;
  }
  .porta:last-child {
    border-bottom: 0;
  }
}
.porta::before {
  content: '';
  position: absolute;
  inset: -1px auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--lento);
}
.porta:hover::before {
  transform: scaleX(1);
}
.porta-n {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brass-txt);
  margin-bottom: 22px;
}
.porta h3 {
  margin-bottom: 16px;
}
.porta-frase {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--txt-2);
  margin: 0;
}
.porta-lista {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  flex: 1;
}
/* Um tom acima do --txt-3 de antes: os cartões não têm fundo próprio e ficam
   direto sobre a fotografia da faixa. Medido no ponto mais claro da imagem,
   0,42 de alfa dava 3,45:1 — abaixo do mínimo para texto corrido. Com 0,64
   sobe para 5,97:1. */
.porta-lista li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--txt-2);
}
.porta-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--brass);
}
.porta-ir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt);
}
.porta-ir .seta {
  transition: transform 0.45s var(--lento);
}
.porta:hover .porta-ir .seta {
  transform: translateX(6px);
}

/* ── Passos e entregas ────────────────────────────────────────────────── */

.passos {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border-top: 1px solid var(--filete);
}
.passo {
  padding: 34px clamp(22px, 2.6vw, 40px) 38px 0;
  border-right: 1px solid var(--filete);
}
.passo:last-child {
  border-right: 0;
  padding-right: 0;
}
@media (max-width: 860px) {
  .passo {
    border-right: 0;
    border-bottom: 1px solid var(--filete);
    padding-right: 0;
  }
  .passo:last-child {
    border-bottom: 0;
  }
}
.passo-n {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brass-txt);
  margin-bottom: 20px;
}
.passo h3 {
  font-size: 1.12rem;
  letter-spacing: -0.025em;
}
.passo p {
  margin: 14px 0 0;
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--txt-2);
}
.passo-saida {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--filete);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--txt-3);
}

.entregas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--coluna) clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
}
.entrega {
  padding-top: 24px;
  border-top: 2px solid var(--brass);
}
.entrega h3 {
  font-size: 1.08rem;
  letter-spacing: -0.025em;
}
.entrega p {
  margin: 14px 0 0;
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--txt-2);
}

/* Bloco de honestidade: o que a firma não faz. */
.limites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: var(--coluna);
  margin-top: clamp(34px, 4vw, 52px);
}
.limite {
  padding: 28px;
  border: 1px solid var(--filete);
}
.limite h3 {
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.limite p {
  margin: 12px 0 0;
  font-size: 0.91rem;
  line-height: 1.62;
  color: var(--txt-2);
}

/* ── Chamada e produtos vizinhos ──────────────────────────────────────── */

.chamada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(26px, 4vw, 56px);
  padding: clamp(34px, 4.4vw, 60px);
  border: 1px solid var(--filete);
}
.chamada-bloco {
  max-width: 46ch;
}
.chamada-bloco p {
  margin: 18px 0 0;
  color: var(--txt-2);
  font-size: 1rem;
  line-height: 1.68;
}
.chamada-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.vizinhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0;
  margin-top: var(--coluna);
  border-top: 1px solid var(--filete);
}
.vizinha {
  padding: 32px clamp(22px, 3vw, 40px) 34px 0;
  border-right: 1px solid var(--filete);
  color: var(--txt);
}
.vizinha:last-child {
  border-right: 0;
  padding-right: 0;
}
@media (max-width: 780px) {
  .vizinha {
    border-right: 0;
    border-bottom: 1px solid var(--filete);
    padding-right: 0;
  }
  .vizinha:last-child {
    border-bottom: 0;
  }
}
.vizinha-rot {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.vizinha-nome {
  margin: 14px 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.vizinha p {
  margin: 12px 0 0;
  font-size: 0.92rem;
  line-height: 1.64;
  color: var(--txt-2);
}
.vizinha-ir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-txt);
}
.vizinha-ir .seta {
  transition: transform 0.45s var(--lento);
}
.vizinha:hover .vizinha-ir .seta {
  transform: translateX(6px);
}

/* ══ Perspectivas ═══════════════════════════════════════════════════════ */

.pers-abertura {
  position: relative;
  padding-block: clamp(150px, 20vh, 220px) clamp(56px, 8vw, 96px);
  overflow: clip;
  isolation: isolate;
}
.pers-titulo {
  margin-top: 30px;
  max-width: 16ch;
  animation: entra 1s 0.06s var(--lento) both;
}
.pers-lead {
  margin-top: 28px;
  animation: entra 1s 0.16s var(--lento) both;
}
.pers-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin-top: clamp(48px, 7vw, 84px);
  border-top: 1px solid var(--filete);
  animation: entra 1s 0.26s var(--lento) both;
}
.pers-atalho {
  display: grid;
  gap: 10px;
  padding: 30px clamp(20px, 3vw, 44px) 32px 0;
  border-right: 1px solid var(--filete);
  transition: background 0.45s var(--lento);
}
.pers-atalho:last-child {
  border-right: 0;
}
.pers-atalho:hover {
  background: color-mix(in srgb, var(--bone) 4%, transparent);
}
@media (max-width: 640px) {
  .pers-atalho {
    border-right: 0;
    border-bottom: 1px solid var(--filete);
    padding-right: 0;
  }
}
.pers-atalho-n {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brass-txt);
}
.pers-atalho-nome {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--txt);
}
.pers-atalho-desc {
  font-size: 0.92rem;
  color: var(--txt-3);
}

/* ── Análises ─────────────────────────────────────────────────────────── */

.an-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.an-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--filete);
}
.an-filtro-rot {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.an-filtro-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.an-filtro-lista .opc {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.84rem;
}

.an-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px clamp(20px, 3vw, 52px);
  padding: 32px 0;
  border-bottom: 1px solid var(--filete);
  transition: background 0.4s var(--lento);
}
.an-item:hover {
  background: color-mix(in srgb, var(--bone) 3%, transparent);
}
.an-item[hidden] {
  display: none;
}
.an-item.entrando {
  animation: entra 0.45s var(--lento) both;
}
@media (max-width: 680px) {
  .an-item {
    grid-template-columns: 1fr;
  }
  .an-meta {
    flex-direction: row !important;
    align-items: center;
    gap: 16px !important;
  }
}
.an-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an-data {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brass-txt);
}
.an-tema {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.an-titulo {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.03em;
}
.an-txt {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--txt-2);
}
.an-rot {
  font-weight: 600;
  color: var(--acento);
}
.an-fonte {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--txt-3);
}
.an-vazio {
  margin: 30px 0 0;
  color: var(--txt-2);
}
.an-vazio[hidden] {
  display: none;
}

/* ── Instrumentos ─────────────────────────────────────────────────────── */

.mat-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.mat {
  display: flex;
  flex-direction: column;
}
.mat-n {
  margin: 0 0 22px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brass-txt);
}
.mat-titulo {
  margin-bottom: 14px;
}
.mat-desc {
  font-size: 0.96rem;
  line-height: 1.7;
}
.mat-inclui {
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--filete);
  display: grid;
  gap: 11px;
  flex: 1;
}
.mat-inclui li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--txt-3);
}
.mat-inclui li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--brass);
}
.mat-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.mat-form .entrada {
  flex: 1 1 160px;
}
.mat-form .btn {
  flex: 0 0 auto;
}
.mat-aviso {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--txt-3);
}
.mat-aviso[data-estado='ok'] {
  color: var(--acento);
}
.mat-aviso[data-estado='erro'] {
  color: var(--brass-txt);
}

/* ── Chamada ──────────────────────────────────────────────────────────── */

.chamada {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: clamp(30px, 4vw, 70px);
  padding-top: clamp(30px, 4vw, 52px);
  border-top: 1px solid var(--filete);
  align-items: start;
}
@media (max-width: 900px) {
  .chamada {
    grid-template-columns: 1fr;
  }
}
/* ══ Trilha do método ═══════════════════════════════════════════════════
   As três etapas na home. Aqui o desenho carrega a explicação: cada etapa
   tem um glifo geométrico, o trilho horizontal mostra que uma leva à
   outra e o texto fica em uma linha. Quem só bate o olho entende a
   sequência; quem quiser o detalhe vai para a página do método. */

.trilha {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.trilha-etapa {
  position: relative;
  padding-right: clamp(20px, 2.6vw, 44px);
  min-width: 0;
}
.trilha-etapa:last-child {
  padding-right: 0;
}

/* O trilho. Sai da caixa de uma etapa e chega na caixa da seguinte, por
   isso não existe depois da última. A caixa é opaca e passa por cima. */
.trilha-etapa:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 1px;
  background: var(--filete-2);
}

.trilha-cabeca {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.trilha-caixa {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-2);
  background: var(--fundo);
}
.trilha-glifo {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: var(--txt);
}
.trilha-acento {
  fill: var(--brass);
  stroke: none;
}
.trilha-n {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-txt);
}
.trilha-tit {
  font-size: 1.12rem;
  letter-spacing: -0.025em;
}
.trilha-txt {
  margin: 12px 0 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--txt-2);
  max-width: 34ch;
}
.trilha-saida {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--filete);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--txt-3);
  max-width: 34ch;
}
/* ══ O processo rodando ═════════════════════════════════════════════════
   Duas pistas do mesmo processo correndo lado a lado. Aqui o movimento é
   o argumento: a pista do robô termina enquanto a manual ainda engatinha,
   e isso se entende sem ler.

   O JavaScript só troca classes (rodando / pronto / concluida). Toda a
   animação mora aqui, o que a mantém suave e desligável de uma vez só em
   prefers-reduced-motion. */

.fluxo {
  margin-top: clamp(38px, 5vw, 60px);
}

/* ── Escolha do processo ──────────────────────────────────────────────── */

.fluxo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--filete);
}
.fluxo-chip {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--filete-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--txt-2);
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.3s var(--lento), color 0.3s var(--lento),
    background 0.3s var(--lento);
}
.fluxo-chip:hover {
  border-color: var(--brass);
  color: var(--txt);
}
.fluxo-chip[aria-selected='true'] {
  background: var(--brass);
  border-color: var(--brass);
  color: #14171a;
  font-weight: 600;
}

/* ── As duas pistas ───────────────────────────────────────────────────── */

.fluxo-palco {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
  border-top: 0;
}
@media (max-width: 860px) {
  .fluxo-palco {
    grid-template-columns: 1fr;
  }
}
.fluxo-pista {
  position: relative;
  background: var(--fundo);
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px) clamp(24px, 3vw, 34px);
  min-width: 0;
}
/* Um filete de cor no topo separa quem é quem sem precisar de legenda. */
.fluxo-pista::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--txt-3);
  transition: background 0.4s var(--lento);
}
.fluxo-pista--robo::before {
  background: var(--brass);
}
.fluxo-pista.concluida::before {
  background: var(--acento);
}

.fluxo-pista-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.fluxo-pista-rot {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.fluxo-relogio {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--txt);
}
.fluxo-pista--robo .fluxo-relogio {
  color: var(--brass-txt);
}

/* ── Os passos ────────────────────────────────────────────────────────── */

.fluxo-trilho {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fluxo-no {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 20px;
  opacity: 0.34;
  transition: opacity 0.45s var(--lento);
}
.fluxo-no:last-child {
  padding-bottom: 0;
}
.fluxo-no.rodando,
.fluxo-no.pronto {
  opacity: 1;
}

/* A marca é um quadrado, não um círculo: a marca não usa bolha. */
.fluxo-no-marca {
  position: relative;
  z-index: 1;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-2);
  background: var(--fundo);
  transition: border-color 0.4s var(--lento), background 0.4s var(--lento);
}
.fluxo-no-ponto {
  width: 6px;
  height: 6px;
  background: transparent;
  transition: background 0.4s var(--lento), transform 0.4s var(--lento);
}
.fluxo-no.pronto .fluxo-no-marca {
  border-color: var(--brass);
}
.fluxo-no.pronto .fluxo-no-ponto {
  background: var(--brass);
}
.fluxo-no.rodando .fluxo-no-marca {
  border-color: var(--txt);
}
.fluxo-no.rodando .fluxo-no-ponto {
  background: var(--txt);
  animation: fluxo-pulso 1.1s ease-in-out infinite;
}

/* O fio que liga um passo ao seguinte. Preenche quando o passo termina:
   é o que dá a leitura de "andou". */
.fluxo-no-liga {
  position: absolute;
  left: 9px;
  top: 21px;
  bottom: -1px;
  width: 1px;
  background: var(--filete-2);
  overflow: hidden;
}
.fluxo-no-liga::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--lento);
}
.fluxo-no.pronto .fluxo-no-liga::after {
  transform: scaleY(1);
}

.fluxo-no-corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  flex: 1;
  min-width: 0;
}
.fluxo-no-rot {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--txt);
}
.fluxo-no-tempo {
  font-size: 0.8rem;
  color: var(--txt-3);
  white-space: nowrap;
}
.fluxo-no.rodando .fluxo-no-tempo {
  color: var(--txt-2);
}

/* Espera: o processo parado, aguardando alguém. É o tempo que ninguém
   contabiliza quando descreve a própria rotina, então recebe marca. */
.fluxo-no--espera .fluxo-no-rot::after {
  content: 'parado';
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, #c98f6a 55%, transparent);
  border-radius: var(--r);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c98f6a;
  vertical-align: middle;
}
.fluxo-no--espera .fluxo-no-liga {
  background: repeating-linear-gradient(
    180deg,
    var(--filete-2) 0 3px,
    transparent 3px 7px
  );
}

@keyframes fluxo-pulso {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.55);
    opacity: 0.5;
  }
}

/* ── Rodapé do bloco ──────────────────────────────────────────────────── */

.fluxo-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, 2.4vw, 28px);
}
.fluxo-veredito {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--txt-2);
  min-height: 1.55em;
}
.fluxo-toca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--filete-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--txt-2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s var(--lento), color 0.3s var(--lento);
}
.fluxo-toca:hover {
  border-color: var(--brass);
  color: var(--brass-txt);
}
.fluxo-toca-ico {
  width: 9px;
  height: 11px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 0, 40% 0, 40% 100%, 0 100%, 0 0, 60% 0, 100% 0, 100% 100%, 60% 100%);
}
.fluxo.pausado .fluxo-toca-ico {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.fluxo-nota {
  margin: clamp(16px, 2vw, 22px) 0 0;
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .fluxo-no,
  .fluxo-no-marca,
  .fluxo-no-ponto,
  .fluxo-no-liga::after,
  .fluxo-pista::before {
    transition: none;
  }
  .fluxo-no.rodando .fluxo-no-ponto {
    animation: none;
  }
}

@keyframes esteira-corre {
  to {
    background-position: 20px 0;
  }
}
@keyframes esteira-entra {
  from {
    opacity: 0;
    transform: translateX(-26px);
  }
}

/* ══ O robô atendendo ════════════════════════════════════
   A conversa é desenhada com as convenções do WhatsApp de propósito: balão
   claro de um lado, verde do outro, hora e tique duplo no pé. É o único
   lugar do site que foge da paleta da marca, e foge porque precisa — a
   cena só funciona se a pessoa reconhecer a tela em meio segundo.

   As cores ficam presas em variáveis locais, no próprio bloco, para não
   vazarem para o resto da folha. */

.conversa {
  --conversa-verde: #075e54;
  --conversa-tela: #efeae2;
  --conversa-recebida: #ffffff;
  --conversa-enviada: #d9fdd3;
  --conversa-txt: #111b21;
  --conversa-meta: #667781;
  --conversa-tique: #53bdeb;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(38px, 5vw, 60px);
}
@media (max-width: 900px) {
  .conversa {
    grid-template-columns: 1fr;
  }
}

/* ── A conversa ───────────────────────────────────────── */

.conversa-fone {
  border: 1px solid var(--filete-2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--conversa-tela);
}
.conversa-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--conversa-verde);
}
.conversa-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.conversa-avatar img {
  width: 20px;
  height: auto;
}
.conversa-quem b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.conversa-quem em {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}

/* A altura é fixa para a seção não pular de tamanho a cada mensagem que
   entra. A conversa rola dentro dela, como rolaria no telefone. */
.conversa-tela {
  height: clamp(300px, 42vh, 400px);
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.conversa-bolha {
  position: relative;
  max-width: 82%;
  padding: 7px 10px 6px;
  border-radius: 8px;
  background: var(--conversa-recebida);
  color: var(--conversa-txt);
  font-size: 0.92rem;
  line-height: 1.42;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
  animation: conversa-entra 0.28s ease-out both;
}
.conversa-bolha--cliente {
  align-self: flex-start;
  border-top-left-radius: 2px;
}
.conversa-bolha--robo {
  align-self: flex-end;
  background: var(--conversa-enviada);
  border-top-right-radius: 2px;
}
.conversa-txt {
  display: block;
}
.conversa-pe {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--conversa-meta);
}
.conversa-tique svg {
  width: 15px;
  height: 9px;
  display: block;
  fill: none;
  stroke: var(--conversa-tique);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes conversa-entra {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* Os três pontinhos. Sem eles a resposta aparece do nada e a cena perde o
   tempo de conversa, que é justamente o que se quer mostrar. */
.conversa-digitando {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 12px;
  min-height: 0;
}
.conversa-digitando span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--conversa-meta);
  opacity: 0.45;
  animation: conversa-pontos 1.1s ease-in-out infinite;
}
.conversa-digitando span:nth-child(2) {
  animation-delay: 0.16s;
}
.conversa-digitando span:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes conversa-pontos {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* ── O CRM ──────────────────────────────────────────────
   Este lado volta para a paleta da marca: é o sistema da empresa, não a
   tela do cliente. A troca de atmosfera entre os dois painéis ajuda a ler
   que são dois lugares diferentes. */

.crm {
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--txt) 3%, transparent);
  overflow: hidden;
}
.crm-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--filete);
}
.crm-rot {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.crm-estado {
  font-size: 0.76rem;
  color: var(--txt-3);
  transition: color 0.3s var(--lento);
}

.crm-campos {
  margin: 0;
  padding: 6px 18px 16px;
}
.crm-campo {
  padding: 12px 0;
  border-bottom: 1px solid var(--filete);
}
.crm-campo:last-child {
  border-bottom: 0;
}
.crm-campo dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.crm-campo dd {
  margin: 6px 0 0;
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--txt-3);
  transition: color 0.4s var(--lento);
}
.crm-preenchido dd {
  color: var(--txt);
  font-weight: 600;
}
/* Realce do instante em que o campo entrou. Momentaneo de proposito: se
   ficasse, o painel inteiro estaria destacado e nada se destacaria. */
.crm-agora {
  animation: crm-acende 1.4s var(--lento) both;
}
@keyframes crm-acende {
  0% {
    background: color-mix(in srgb, var(--brass) 34%, transparent);
    box-shadow: inset 2px 0 0 var(--brass);
  }
  100% {
    background: transparent;
    box-shadow: inset 2px 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversa-bolha,
  .conversa-digitando span,
  .crm-agora {
    animation: none;
  }
  .conversa-tela {
    scroll-behavior: auto;
  }
}

/* ══ Como funciona, em três quadros ═════════════════════════════════════
   Substituiu quatro parágrafos sobre governança de dado: corretos e
   ilegíveis para quem só quer saber como a informação chega na tela. Cada
   quadro tem número, glifo e uma frase — e o glifo é quem explica.

   O trilho horizontal entre eles diz que é sequência, não lista solta. Some
   quando empilha, porque aí a ordem já está na própria pilha. */

.etapas-viz {
  list-style: none;
  margin: clamp(40px, 5vw, 62px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 900px) {
  .etapas-viz {
    grid-template-columns: 1fr;
  }
}
.etapa-viz {
  position: relative;
  padding: 0 clamp(20px, 2.6vw, 42px) 0 0;
  min-width: 0;
}
.etapa-viz:last-child {
  padding-right: 0;
}
/* O trilho sai da caixa de um quadro e chega na do seguinte. */
.etapa-viz:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 45px;
  height: 1px;
  background: var(--filete-2);
}
@media (max-width: 900px) {
  .etapa-viz {
    padding: 0 0 28px;
  }
  .etapa-viz + .etapa-viz {
    padding-top: 28px;
    border-top: 1px solid var(--filete);
  }
  .etapa-viz:last-child {
    padding-bottom: 0;
  }
  .etapa-viz:not(:last-child)::before {
    display: none;
  }
}

.etapa-viz-topo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.etapa-viz-n {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--brass-txt);
}
.etapa-viz-caixa {
  flex: none;
  width: 92px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-2);
  background: var(--fundo);
}
.etapa-viz-glifo {
  width: 52px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: var(--txt);
}
.etapa-viz-acento {
  fill: var(--brass);
  stroke: var(--brass);
}
.etapa-viz-tit {
  font-size: 1.1rem;
  letter-spacing: -0.025em;
  line-height: 1.24;
}
.etapa-viz-txt {
  margin: 12px 0 0;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--txt-2);
  max-width: 34ch;
}

/* ── A garantia de suporte ─────────────────────────────────────────────
   Faixa própria, não um quarto quadro: não é etapa do processo, é o que
   vale depois que as três terminam. É também a objeção mais comum de quem
   nunca teve sistema — "e se quebrar?" — então tem escudo e destaque. */

.garantia {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(38px, 4.6vw, 58px);
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid color-mix(in srgb, var(--brass) 42%, transparent);
  background: color-mix(in srgb, var(--brass) 8%, transparent);
}
@media (max-width: 640px) {
  .garantia {
    flex-direction: column;
    align-items: flex-start;
  }
}
.garantia-caixa {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
.garantia-caixa .etapa-viz-glifo {
  width: 42px;
  height: 42px;
  color: var(--brass-txt);
}
.garantia-txt {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--txt-2);
  max-width: 74ch;
}
.garantia-txt b {
  display: block;
  font-weight: 600;
  color: var(--txt);
}

/* ══ Em breve ═══════════════════════════════════════════════════════════
   Os dois blocos da página de Conteúdos enquanto ela está em construção.
   Dizer "em breve" com desenho firme é diferente de dizer com desculpa: a
   moldura é a mesma dos outros blocos do site, e o selo em brass trata a
   espera como informação, não como falha. */

.breve {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 78px);
  background: var(--filete);
  border: 1px solid var(--filete);
}
@media (max-width: 700px) {
  .breve {
    grid-template-columns: 1fr;
  }
}
.breve-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(28px, 3.4vw, 44px) clamp(22px, 2.6vw, 34px);
  background: color-mix(in srgb, var(--fundo) 58%, transparent);
  backdrop-filter: blur(2px);
  /* O alvo de uma âncora precisa parar abaixo do cabeçalho fixo. */
  scroll-margin-top: 110px;
}
.breve-nome {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: var(--txt);
}
.breve-selo {
  flex: none;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--brass) 58%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--brass) 12%, transparent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-txt);
}

/* ══ Fecho da página de Automações ══════════════════════════════════════
   A última coisa da página estava sendo a mais apagada: preto liso, título
   pequeno e um botão com uma palavra. Aqui ela recebe o mesmo tratamento
   das outras faixas — fotografia por trás, grade de colunas visível — mais
   o monograma grande sangrando na quina, que é o único lugar do site onde
   a marca aparece em escala. */

.fecho-caixa {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 68px);
  align-items: center;
  padding: clamp(34px, 4.4vw, 62px);
  border: 1px solid var(--filete-2);
  background: color-mix(in srgb, var(--fundo) 62%, transparent);
  backdrop-filter: blur(2px);
}
@media (max-width: 900px) {
  .fecho-caixa {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* O monograma em escala, cortado pela borda. Fica atrás de tudo e bem
   apagado: é textura, não elemento de leitura. */
/* A torre é mais larga que alta; travar largura e altura no mesmo valor
   deformaria a marca. A largura manda e a altura acompanha. */
.fecho-marca {
  position: absolute;
  right: -46px;
  bottom: -56px;
  width: clamp(190px, 22vw, 280px);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
}
@media (max-width: 900px) {
  .fecho-marca {
    right: -60px;
    bottom: -70px;
    opacity: 0.04;
  }
}

.fecho-txt {
  position: relative;
  z-index: 1;
  min-width: 0;
}
/* Sem margem no topo: a etiqueta que ficava acima saiu, e o que sobrava era
   um deslocamento solto empurrando o bloco para baixo dentro da célula. */
.fecho-titulo {
  max-width: 20ch;
}
.fecho-lead {
  margin-top: 20px;
  max-width: 46ch;
}

.fecho-acao {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* O botão como destino, não como retângulo com uma palavra: ícone em caixa
   própria, o que a pessoa vai fazer, e por que aquele caminho. */
.fecho-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--bone);
  border-radius: var(--r);
  background: var(--bone);
  color: var(--field);
  transition: background 0.35s var(--lento), color 0.35s var(--lento),
    border-color 0.35s var(--lento);
}
.fecho-btn:hover {
  background: transparent;
  color: var(--bone);
}
.fecho-btn-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: var(--r);
  opacity: 0.9;
}
.fecho-btn-ico svg {
  width: 22px;
  height: 22px;
}
.fecho-btn-txt b {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fecho-btn-txt em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.82rem;
  opacity: 0.66;
}
.fecho-btn .seta {
  transition: transform 0.35s var(--lento);
}
.fecho-btn:hover .seta {
  transform: translateX(5px);
}
/* Em tela estreita a seta e o respiro largo espremem o texto em três linhas e
   o botão vira um bloco de 124px. Sem a seta e com menos folga, ele volta a
   ter proporção de botão — e ninguém precisa de uma seta para saber que um
   retângulo claro com "Falar no WhatsApp" é clicável. */
@media (max-width: 520px) {
  .fecho-btn {
    gap: 13px;
    padding: 15px 16px;
  }
  .fecho-btn .seta {
    display: none;
  }
  .fecho-btn-ico {
    width: 38px;
    height: 38px;
  }
}

.fecho-fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 26px 0 0;
  border-top: 1px solid var(--filete);
}
.fecho-fatos > div {
  padding: 20px 20px 0 0;
}
.fecho-fatos dt {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-txt);
}
.fecho-fatos dd {
  margin: 9px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--txt-2);
}

@media (prefers-reduced-motion: reduce) {
  .fecho-btn,
  .fecho-btn .seta {
    transition: none;
  }
}

/* ══ Emblema das soluções ═══════════════════════════════════════════════
   Abre a seção no lugar do parágrafo: dois blocos ligados por um trilho,
   um por frente. Reaproveita o desenho da trilha do método, então as duas
   seções da home falam a mesma língua. */

.emblema {
  display: flex;
  align-items: center;
  margin: clamp(26px, 3.4vw, 40px) 0 clamp(22px, 2.6vw, 30px);
}
.emblema-caixa {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-2);
  background: var(--fundo);
}
.emblema-trilho {
  width: clamp(40px, 7vw, 86px);
  height: 1px;
  background: var(--filete-2);
}
.emblema-glifo {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: var(--txt);
}
.emblema-acento {
  fill: var(--brass);
  stroke: none;
}
.emblema-tit {
  margin-top: 0;
}

/* Empilhado, o trilho horizontal deixa de fazer sentido: vira um filete
   entre as etapas, como nos outros blocos do site. */
@media (max-width: 860px) {
  .trilha {
    grid-template-columns: 1fr;
  }
  .trilha-etapa {
    padding: 0 0 28px;
  }
  .trilha-etapa + .trilha-etapa {
    padding-top: 28px;
    border-top: 1px solid var(--filete);
  }
  .trilha-etapa:last-child {
    padding-bottom: 0;
  }
  .trilha-etapa:not(:last-child)::before {
    display: none;
  }
  .trilha-txt,
  .trilha-saida {
    max-width: none;
  }
}

.chamada-titulo {
  margin-top: 26px;
}
.chamada-txt {
  font-size: 1rem;
  line-height: 1.72;
}

/* ══ A vitrine ══════════════════════════════════════════════════════════
   Um site sendo montado dentro de uma janela de navegador. A cena tem dois
   lados: o palco, onde a coisa nasce peça por peça, e a lista, que nomeia o
   que está acontecendo no instante em que acontece.

   A empresa do exemplo tem paleta própria — azul industrial e âmbar — presa
   em variáveis locais. É o segundo bloco do site que foge das cores da
   marca (o outro é a conversa do WhatsApp), e foge pelo mesmo motivo: um
   exemplo com a nossa cara desmentiria a frase "100% personalizado" na
   própria tela.

   Cada peça ocupa o seu espaço desde o começo, invisível, com um contorno
   tracejado no lugar. Assim a seção não pula de altura a cada peça que
   entra — e o estado inicial já conta a história certa: o site existe como
   esqueleto antes de existir como conteúdo. */

.vitrine {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: start;
  margin-top: clamp(38px, 5vw, 60px);
}
@media (max-width: 980px) {
  .vitrine {
    grid-template-columns: 1fr;
  }
}

.vitrine-palco {
  min-width: 0;
}

/* ── A janela ─────────────────────────────────────────── */

.nav-janela {
  --au-tinta: #0f2c47;
  /* Dois âmbares: o claro só aparece como fundo de botão, e o escuro é o
     que vira texto. O âmbar bonito de fundo dá 2,5:1 como letra sobre
     branco, o que é ilegível para muita gente. */
  --au-acento: #a35c0c;
  --au-acento-txt: #8a5008;
  --au-fundo: #ffffff;
  --au-suave: #eef2f7;
  --au-txt: #4a5a6d;
  --au-filete: #dde4ec;

  max-width: 760px;
  margin-inline: auto;
  border: 1px solid var(--filete-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--au-fundo);
  box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.8);
  transition: max-width 0.75s var(--lento);
}
/* O aperto para o telefone é o quadro que mais diz da cena inteira: o mesmo
   site, a mesma hora, se acomodando sozinho. Por isso ele é animado, e não
   uma troca seca de imagem. */
.nav-janela--celular {
  max-width: 330px;
}

.nav-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: #e9edf2;
  border-bottom: 1px solid var(--au-filete);
}
.nav-bolas {
  display: flex;
  gap: 6px;
  flex: none;
}
.nav-bolas i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.nav-bolas i:nth-child(1) {
  background: #ec6a5e;
}
.nav-bolas i:nth-child(2) {
  background: #f4bf4f;
}
.nav-bolas i:nth-child(3) {
  background: #61c554;
}

.nav-aba {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  max-width: 38%;
  padding: 5px 12px 5px 7px;
  border-radius: 6px 6px 0 0;
  background: var(--au-fundo);
  font-size: 0.66rem;
  color: var(--au-tinta);
}
.nav-aba-ico {
  width: 14px;
  height: 14px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--au-tinta);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
}
.nav-aba-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-campo {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 12px;
  border: 1px solid var(--au-filete);
  border-radius: 999px;
  background: var(--au-fundo);
}
.nav-cadeado {
  width: 11px;
  height: 11px;
  flex: none;
  color: #4f7a52;
}
.nav-url {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.68rem;
  color: var(--au-txt);
}
/* O cursor piscando é o que faz o endereço parecer digitado por alguém, e
   não escrito por um relógio. */
.nav-caret {
  width: 1px;
  height: 12px;
  flex: none;
  background: var(--au-tinta);
  animation: nav-pisca 1.06s steps(1) infinite;
}
@keyframes nav-pisca {
  50% {
    opacity: 0;
  }
}

/* ── O site de exemplo ────────────────────────────────── */

.nav-tela {
  background: var(--au-fundo);
  color: var(--au-tinta);
}

.mini {
  position: relative;
  padding: 0 clamp(14px, 2.4vw, 26px);
}
.mini::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--au-filete);
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 7px,
    rgba(15, 44, 71, 0.028) 7px 14px
  );
  transition: opacity 0.45s var(--lento);
}
.mini.pronta::after {
  opacity: 0;
}
.mini > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s var(--lento),
    transform 0.5s var(--lento);
}
.mini.pronta > * {
  opacity: 1;
  transform: none;
}
.mini.pronta > :nth-child(2) {
  transition-delay: 0.09s;
}
.mini.pronta > :nth-child(3) {
  transition-delay: 0.18s;
}

/* Cabeçalho */

.mini-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.5s var(--lento);
}
.mini-topo.pronta {
  border-bottom-color: var(--au-filete);
}
.mini-marca {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mini-marca-sig {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--au-tinta);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.mini-marca-nome {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--au-tinta);
}
.mini-marca-nome em {
  display: block;
  font-style: normal;
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--au-txt);
}
.mini-menu {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  font-size: 0.65rem;
  color: var(--au-txt);
}
.mini-menu > span:first-child {
  font-weight: 600;
  color: var(--au-tinta);
}
.mini-menu-bt {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--au-acento);
  color: #fff;
  font-weight: 600;
}
.mini-hamb {
  display: none;
  flex-direction: column;
  gap: 3px;
}
.mini-hamb i {
  width: 17px;
  height: 1.5px;
  background: var(--au-tinta);
}

/* Capa */

.mini-capa {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: center;
  padding-block: clamp(20px, 3vw, 34px);
  background-color: transparent;
  transition: background-color 0.55s var(--lento);
}
.mini-capa.pronta {
  background-color: var(--au-suave);
}
.mini-olho {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--au-acento-txt);
}
.mini-tit {
  margin: 9px 0 0;
  font-size: clamp(0.95rem, 2vw, 1.24rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--au-tinta);
}
.mini-txt {
  margin: 9px 0 0;
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--au-txt);
}
.mini-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}
.mini-bt {
  padding: 7px 14px;
  border-radius: 3px;
  background: var(--au-tinta);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 600;
}
.mini-bt--vazio {
  background: transparent;
  color: var(--au-tinta);
  border: 1px solid var(--au-filete);
}

/* A fotografia é uma das nossas, mas entra aqui monocromática e tingida de
   azul: dentro do exemplo ela precisa ser da Aurora, não nossa. */
.mini-capa-img {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  overflow: hidden;
  background: var(--au-tinta);
}
.mini-capa-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.94);
}
.mini-capa-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--au-tinta);
  mix-blend-mode: color;
  opacity: 0.9;
}
.mini-selo {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.94);
}
.mini-selo b {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--au-tinta);
}
.mini-selo em {
  display: block;
  font-style: normal;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--au-txt);
}

/* Cartões */

.mini-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-block: clamp(16px, 2.4vw, 26px);
}
.mini-cartao {
  padding: 13px;
  border: 1px solid var(--au-filete);
  border-radius: 4px;
}
.mini-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--au-acento) 14%, transparent);
  color: var(--au-acento-txt);
}
.mini-ic svg {
  width: 15px;
  height: 15px;
}
.mini-cartao b {
  display: block;
  margin-top: 9px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--au-tinta);
}
.mini-cartao span:last-child {
  display: block;
  margin-top: 5px;
  font-size: 0.63rem;
  line-height: 1.5;
  color: var(--au-txt);
}

/* Rodapé */

.mini-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 18px;
  padding-block: 14px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.74);
  transition: background-color 0.55s var(--lento);
}
.mini-rodape.pronta {
  background-color: var(--au-tinta);
}
.mini-rodape-marca {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.mini-rodape-marca em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.66;
}
.mini-rodape-info {
  font-size: 0.6rem;
}

/* ── Janela estreita ──────────────────────────────────────
   Vale tanto para o modo celular do roteiro quanto para quem já está num
   telefone de verdade: são o mesmo problema de largura. */

.nav-janela--celular .nav-aba {
  display: none;
}
.nav-janela--celular .mini-menu {
  display: none;
}
.nav-janela--celular .mini-hamb {
  display: flex;
}
.nav-janela--celular .mini-capa,
.nav-janela--celular .mini-cartoes {
  grid-template-columns: minmax(0, 1fr);
}
.nav-janela--celular .mini-capa-img {
  aspect-ratio: 16 / 9;
}
.nav-janela--celular .mini-rodape {
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 700px) {
  .nav-aba {
    display: none;
  }
  .mini-menu {
    display: none;
  }
  .mini-hamb {
    display: flex;
  }
  .mini-capa,
  .mini-cartoes {
    grid-template-columns: minmax(0, 1fr);
  }
  .mini-capa-img {
    aspect-ratio: 16 / 9;
  }
  .mini-rodape {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Os dois aparelhos ────────────────────────────────── */

.vitrine-aparelhos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.vitrine-aparelho {
  appearance: none;
  padding: 8px 16px;
  border: 1px solid var(--filete);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-2);
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color 0.3s var(--lento),
    border-color 0.3s var(--lento),
    background 0.3s var(--lento);
}
.vitrine-aparelho:hover {
  color: var(--txt);
  border-color: var(--filete-2);
}
.vitrine-aparelho.atual {
  background: var(--txt);
  border-color: var(--txt);
  color: var(--fundo);
}

/* ── A lista de etapas ────────────────────────────────── */

.vitrine-lado {
  min-width: 0;
}
.vitrine-rot {
  margin: 0 0 14px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.vitrine-passos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vitrine-passo {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--filete);
  opacity: 0.42;
  transition: opacity 0.4s var(--lento);
}
.vitrine-passo:last-child {
  border-bottom: 0;
}
.vitrine-passo.agora,
.vitrine-passo.feito {
  opacity: 1;
}
.vitrine-passo-marca {
  position: relative;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--filete-2);
  border-radius: 50%;
  transition:
    background 0.35s var(--lento),
    border-color 0.35s var(--lento);
}
/* O ponto pulsante marca a etapa em curso; o tique marca a concluída. Dois
   sinais diferentes porque são dois estados diferentes. */
.vitrine-passo-marca::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--brass-txt);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.35s var(--lento),
    transform 0.35s var(--lento);
}
.vitrine-passo-marca::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid var(--fundo);
  border-width: 0 1.6px 1.6px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.5);
  transition:
    opacity 0.3s var(--lento),
    transform 0.3s var(--lento);
}
.vitrine-passo.agora .vitrine-passo-marca {
  border-color: var(--brass-txt);
}
.vitrine-passo.agora .vitrine-passo-marca::after {
  opacity: 1;
  transform: none;
  animation: vitrine-pulso 1.5s var(--lento) infinite;
}
.vitrine-passo.feito .vitrine-passo-marca {
  background: var(--brass-txt);
  border-color: var(--brass-txt);
}
.vitrine-passo.feito .vitrine-passo-marca::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
@keyframes vitrine-pulso {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass-txt) 20%, transparent);
  }
}
.vitrine-passo-corpo {
  min-width: 0;
}
.vitrine-passo-rot {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--txt);
}
.vitrine-passo-txt {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--txt-2);
}

@media (prefers-reduced-motion: reduce) {
  .nav-janela,
  .mini::after,
  .mini > *,
  .mini-topo,
  .mini-capa,
  .mini-rodape,
  .vitrine-passo,
  .vitrine-passo-marca,
  .vitrine-passo-marca::before,
  .vitrine-passo-marca::after {
    transition: none;
  }
  .nav-caret,
  .vitrine-passo.agora .vitrine-passo-marca::after {
    animation: none;
  }
}

/* ══ Sob medida ═════════════════════════════════════════════════════════
   Seis itens, cada um com um quadro que mostra do que está falando. Eram
   seis parágrafos: corretos, e cansativos logo depois de uma cena inteira
   em movimento. O desenho carrega o sentido e a frase embaixo só confirma
   — daí ela ter caído para uma linha.

   Só o primeiro quadro se mexe, e devagar: a paleta trocando de cor é
   literalmente o assunto da seção. Se todos os seis animassem, nenhum seria
   olhado. */

.medida {
  list-style: none;
  margin: clamp(40px, 5vw, 62px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 46px) var(--coluna);
}
@media (max-width: 900px) {
  .medida {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .medida {
    grid-template-columns: minmax(0, 1fr);
  }
}

.medida-item {
  min-width: 0;
}
.medida-tit {
  margin: 20px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--txt);
}
.medida-txt {
  margin: 7px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--txt-2);
}

/* ── Os quadros ───────────────────────────────────────── */

.medida-viz {
  display: grid;
  place-items: center;
  height: 116px;
  padding: 14px;
  border: 1px solid var(--filete);
  border-radius: 3px;
  background: color-mix(in srgb, var(--txt) 3.5%, transparent);
  overflow: hidden;
}
/* Preso pela altura, não pela largura: o quadro tem altura fixa para os seis
   ficarem alinhados, e um desenho de largura cheia estouraria por baixo. */
.mv-svg {
  height: 84px;
  width: auto;
  max-width: 100%;
  color: var(--txt);
  opacity: 0.72;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* O acento em brass diz qual peça está sendo escolhida naquele quadro. */
.mv-acento {
  stroke: var(--brass-txt);
  stroke-opacity: 1;
}

.mv-cores {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mv-cores i {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: var(--brass);
  animation: mv-troca 9s linear infinite;
}
.mv-cores i:nth-child(2) {
  animation-delay: -2.25s;
}
.mv-cores i:nth-child(3) {
  animation-delay: -4.5s;
}
.mv-cores i:nth-child(4) {
  animation-delay: -6.75s;
}
.mv-cores b {
  margin-left: 6px;
  font-family: var(--fonte-editorial);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--txt);
}
@keyframes mv-troca {
  0%,
  18% {
    background: #b89a61;
  }
  25%,
  43% {
    background: #2f6f8f;
  }
  50%,
  68% {
    background: #6f8a6f;
  }
  75%,
  93% {
    background: #a8553a;
  }
  100% {
    background: #b89a61;
  }
}

.mv-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.mv-chips i {
  padding: 7px 12px;
  border: 1px solid var(--filete-2);
  border-radius: 999px;
  font-size: 0.74rem;
  font-style: normal;
  color: var(--txt-2);
}
.mv-chips i:first-child {
  border-color: var(--brass-txt);
  color: var(--brass-txt);
}

.mv-barra {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 16px;
  border: 1px solid var(--filete-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fundo) 70%, transparent);
}
.mv-barra svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--brass-txt);
}
.mv-barra em {
  font-style: normal;
  font-size: 0.86rem;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ══ Celular ════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {
  .hero {
    min-height: 0;
    padding-block: 104px 56px;
  }
  /* No celular o título precisa caber sem empurrar o botão principal para
     fora da primeira tela. */
  .hero-titulo {
    margin-top: 20px;
    font-size: clamp(2.05rem, 8.6vw, 2.6rem);
    max-width: none;
  }
  .hero-lead {
    margin-top: 18px;
    font-size: 0.98rem;
    line-height: 1.62;
  }
  .hero-acoes {
    margin-top: 26px;
  }
  .hero-acoes .btn {
    width: 100%;
  }
  .hero-fatos > div {
    padding-right: 0;
  }
}

/* Alvo de toque: estas regras precisam vencer os min-height menores
   declarados por bloco, então repetem os mesmos seletores e ficam por
   último na folha. */
@media (pointer: coarse) {
  .btn,
  .opc,
  .entrada,
  .menu-btn,
  .rotinas-abas .opc,
  .an-filtro-lista .opc,
  .lq-opcoes .opc {
    min-height: 48px;
  }
  /* Controles do relatório: compactos no desktop de propósito, porque são
     muitos lado a lado, mas no toque voltam ao mínimo de área de acerto. */
  .bi-item,
  .bi-limpar,
  .bi-chip,
  .fluxo-chip,
  .fluxo-toca,
  .vitrine-aparelho {
    min-height: 44px;
  }
  /* A barra empilhada de canal é clicável. Com 12px de altura ela é
     bonita no mouse e impossível no dedo. */
  .bi-empilhada {
    height: 44px;
    border-radius: 3px;
  }
}