*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--altura-topo);
}
body {
  margin: 0;
  background: var(--off-white);
  color: var(--azul-profundo);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
}
body.menu-aberto {
  overflow: hidden;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--track-titulo);
  font-weight: 700;
  text-wrap: balance;
}
h2 {
  font-size: var(--t-secao);
}
h3 {
  font-size: var(--t-h3);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  border: 0;
}
svg {
  width: var(--s-5);
  height: var(--s-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--laranja-ativo);
  color: var(--azul-profundo);
}
:focus-visible {
  outline: var(--foco);
  outline-offset: 5px;
}
.icones {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.wrap {
  width: min(calc(100% - var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.sec {
  padding-block: var(--s-9);
}
.sec--claro {
  --fg: var(--azul-profundo);
  --fg-suave: var(--texto-suave);
  --linha: var(--linha-sobre-claro);
  background: var(--off-white);
  color: var(--fg);
}
.sec--escuro {
  --fg: var(--off-white);
  --fg-suave: var(--texto-suave-sobre-azul);
  --linha: var(--linha-sobre-azul);
  background: var(--azul-profundo);
  color: var(--fg);
}
.sec p {
  color: var(--fg-suave);
}
.pular-conteudo {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  padding: var(--s-4);
  background: var(--off-white);
  color: var(--azul-profundo);
  transform: translateY(-160%);
}
.pular-conteudo:focus {
  transform: translateY(0);
}
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--altura-botao);
  padding: var(--s-4) var(--s-5);
  background: var(--laranja-ativo);
  color: var(--azul-profundo);
  font-size: var(--t-pequeno);
  font-weight: 600;
  border-radius: var(--r-botao);
  transition:
    background var(--dur-curta),
    transform var(--dur-curta) var(--ease);
  line-height: 1.4;
}
.botao:hover {
  background: var(--acao-hover);
}
.botao:hover svg {
  transform: translate(var(--s-1), calc(var(--s-1) * -1));
}
.botao svg {
  width: var(--s-5);
  transition: transform var(--dur-curta) var(--ease);
}
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 44px;
  font-size: var(--t-pequeno);
  font-weight: 600;
}
.link-seta svg {
  width: var(--s-5);
  transition: transform var(--dur-curta) var(--ease);
}
.link-seta:hover svg {
  transform: translateX(var(--s-2));
}
.link-seta--claro {
  color: var(--off-white);
}
.topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  color: var(--off-white);
  border-bottom: 1px solid var(--linha-sobre-azul);
}
.topo__barra {
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.topo__logo {
  display: block;
  width: var(--logo-largura);
}
.navegacao {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  font-size: var(--t-mini);
  font-weight: 500;
}
.navegacao > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--dur-curta);
}
.navegacao > a:hover {
  color: var(--laranja-ativo);
}
.navegacao .topo__contato {
  gap: var(--s-5);
  border: 1px solid var(--linha-sobre-azul);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-botao);
}
.topo__contato svg {
  width: var(--s-4);
}
.menu-botao {
  display: none;
}
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-altura);
  padding-top: calc(var(--altura-topo) + var(--s-7));
  background: var(--azul-profundo);
  color: var(--off-white);
  overflow: hidden;
  isolation: isolate;
}
.hero__midia,
.hero__sombra {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__midia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}
.hero__sombra {
  z-index: -1;
  background: var(--hero-overlay);
}
.hero__contexto {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-mini);
  color: var(--texto-suave-sobre-azul);
  margin-bottom: var(--s-6);
}
.ponto {
  display: inline-block;
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-chip);
  background: var(--verde-conexao);
  flex-shrink: 0;
}
.hero h1 {
  font-size: var(--t-hero);
  letter-spacing: var(--track-hero);
  line-height: 1.06;
  max-width: var(--hero-titulo-largura);
  font-weight: var(--peso-hero);
}
.hero__frase {
  display: block;
}
.js .hero__frase {
  animation: entrada-hero var(--dur-imagem) var(--ease-entrada) both;
}
.js .hero__frase.revelada {
  animation: none;
}
.js .hero__frase:nth-child(2) {
  animation-delay: var(--dur-curta);
}
@keyframes entrada-hero {
  from {
    opacity: 0;
    transform: translateY(var(--revelar-distancia));
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0% 0);
  }
}
.hero__lead {
  max-width: 43ch;
  margin-block: var(--s-5) var(--s-6);
  font-size: var(--t-corpo);
  color: var(--texto-suave-sobre-azul);
}
.hero .botao {
  min-width: var(--cta-largura);
}
.hero__conteudo {
  padding-bottom: var(--s-8);
}
.hero__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-5);
  margin-top: auto;
  border-top: 1px solid var(--linha-sobre-azul);
  font-size: var(--t-mini);
}
.explorar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
}
.explorar > span {
  font-size: var(--t-h3);
  color: var(--laranja-ativo);
}
.hero__legenda {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  color: var(--texto-suave-sobre-azul);
}
.controle-movimento {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--controle-fundo);
  border: 1px solid var(--linha-sobre-azul);
  border-radius: var(--r-chip);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-mini);
  color: var(--off-white);
}
.controle-movimento__icone {
  font-size: var(--t-corpo);
  width: var(--s-4);
}
.faixa-pilares {
  background: var(--azul-profundo);
  color: var(--off-white);
}
.faixa-pilares > .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: var(--s-6);
}
.faixa-pilares span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-pequeno);
  padding-inline: var(--s-6);
  border-left: 1px solid var(--linha-sobre-azul);
}
.faixa-pilares span:first-child {
  border: 0;
  padding-left: 0;
}
.faixa-pilares span:last-child {
  padding-right: 0;
}
.faixa-pilares svg {
  color: var(--laranja-ativo);
  width: var(--s-6);
  height: var(--s-6);
}
.sec__cabeca {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  margin-bottom: var(--s-8);
}
.sec__cabeca > p {
  max-width: 48ch;
  font-size: var(--t-corpo);
}
.triade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.triade__visual {
  background: var(--azul-profundo);
  color: var(--off-white);
  padding: var(--s-6);
  border-radius: var(--r-balao);
  overflow: visible;
}
.triade__assinatura {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-pequeno);
  font-family: var(--fonte-titulo);
  font-weight: 600;
}
.triade__assinatura .triade__logo {
  width: var(--triade-logo-largura);
  height: auto;
  object-fit: contain;
}
.triade__mais {
  margin-left: auto;
  font-size: var(--t-h3);
  color: var(--texto-suave-sobre-azul);
}
.triade__barras {
  position: relative;
  display: flex;
  align-items: end;
  gap: var(--s-3);
  height: var(--grafico-altura);
  margin-top: var(--s-7);
  border-bottom: 2px solid var(--verde-conexao);
}
.barra {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s-4);
  border-radius: var(--r-botao) var(--r-botao) 0 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-pequeno);
  font-weight: 700;
  transform-origin: bottom;
  position: relative;
  overflow: hidden;
  transition:
    height var(--dur-grafico) var(--ease-entrada),
    flex-grow var(--dur-grafico) var(--ease-entrada),
    box-shadow var(--dur-grafico) var(--ease-entrada),
    opacity var(--dur-media),
    transform var(--dur-longa) var(--ease-entrada);
}
.barra svg {
  width: var(--s-6);
  height: var(--s-6);
}
.barra--marketing {
  height: var(--barra-marketing);
  background: var(--laranja-ativo);
  color: var(--azul-profundo);
}
.barra--vendas {
  height: var(--barra-vendas);
  background: var(--verde-conexao);
  color: var(--azul-profundo);
}
.barra--experiencia {
  height: var(--barra-experiencia);
  background: var(--off-white);
  color: var(--azul-profundo);
}
.triade__visual > p {
  font-size: var(--t-mini);
  color: var(--texto-suave-sobre-azul);
  margin-top: var(--s-4);
}
.js .triade__visual.animar .barra {
  transform: scaleY(0.15);
  opacity: 0;
}

.abas {
  position: relative;
  display: none;
  border-bottom: 1px solid var(--linha-sobre-claro);
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.js .abas {
  display: flex;
}
.abas button {
  padding: var(--s-3) 0;
  background: transparent;
  font-size: var(--t-pequeno);
  font-weight: 500;
  min-height: 48px;
  position: relative;
  color: var(--texto-suave);
}
.abas button[aria-selected="true"] {
  color: var(--azul-profundo);
}

.pilar__verbo {
  display: block;
  margin-bottom: var(--s-3);
  font-size: var(--t-mini);
  color: var(--laranja-texto);
  font-weight: 600;
}
.painel-pilar {
  min-height: var(--painel-altura);
}
.painel-pilar h3 {
  font-size: var(--t-pilar);
  line-height: 1.16;
}
.painel-pilar p {
  margin-top: var(--s-4);
  font-size: var(--t-pequeno);
  max-width: 48ch;
}
.lista-simples {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0;
}
.lista-simples li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-pequeno);
  margin-bottom: var(--s-2);
}
.lista-simples li::before {
  content: "↗";
  color: var(--verde-texto);
}
.triade__explorar > .link-seta {
  border-bottom: 1px solid var(--linha-sobre-claro);
}
.manifesto {
  min-height: var(--manifesto-altura);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--azul-profundo);
  color: var(--off-white);
  isolation: isolate;
}
.manifesto__foto {
  position: absolute;
  inset: calc(var(--parallax-folga) * -1) 0;
  z-index: -2;
}
.manifesto__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 42%;
}
.manifesto__sombra {
  position: absolute;
  inset: 0;
  background: var(--manifesto-overlay);
  z-index: -1;
}
.manifesto__conteudo {
  padding-block: var(--s-8);
}
.manifesto h2 {
  font-size: var(--t-manifesto);
  font-weight: 600;
  max-width: 16ch;
}
.manifesto p {
  max-width: 42ch;
  font-size: var(--t-corpo);
  color: var(--texto-suave-sobre-azul);
  margin-block: var(--s-5);
}
.manifesto__detalhe {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  font-family: var(--fonte-titulo);
  font-size: var(--t-flecha);
  line-height: 1;
  color: var(--laranja-ativo);
}
.parallax {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.pratica__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.pratica__texto > p {
  max-width: 40ch;
  margin-top: var(--s-5);
}
.pratica__texto .pratica__nota {
  font-size: var(--t-mini);
  margin-top: var(--s-7);
}
.alternador {
  position: relative;
  isolation: isolate;
  display: none;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--linha-sobre-claro);
  border-radius: var(--r-chip);
  margin-top: var(--s-4);
}
.js .alternador {
  display: inline-flex;
}
.alternador button {
  position: relative;
  z-index: 1;
  transition: color var(--dur-media) var(--ease);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: transparent;
  border-radius: var(--r-chip);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-mini);
  min-height: 44px;
}
.alternador button[aria-pressed="true"] {
  color: var(--off-white);
}
.alternador button span {
  color: var(--verde-conexao);
}
.conversa {
  padding: var(--s-6);
  border: 1px solid var(--linha-sobre-claro);
  border-radius: var(--r-grande);
  background: var(--branco);
}
.conversa__topo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-mini);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--linha-sobre-claro);
}
.conversa__topo > svg {
  margin-left: auto;
  width: var(--s-5);
  color: var(--texto-suave);
}
.mensagem {
  max-width: 88%;
  margin-top: var(--s-5);
  font-size: var(--t-pequeno);
}
.mensagem > span {
  display: block;
  font-size: var(--t-mini);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.mensagem > p {
  padding: var(--s-4);
  border-radius: var(--r-balao);
  background: var(--off-white);
  color: var(--azul-profundo);
}
.mensagem--vendedor {
  margin-left: auto;
}
.mensagem--vendedor > span {
  text-align: right;
  color: var(--verde-texto);
}
.mensagem--vendedor > p {
  border-radius: var(--r-balao-inv);
  background: var(--azul-profundo);
  color: var(--off-white);
}
.conversa .conversa__efeito {
  font-size: var(--t-mini);
  padding-left: var(--s-4);
  border-left: 2px solid var(--verde-conexao);
  margin-top: var(--s-5);
  margin-left: var(--s-6);
  min-height: var(--efeito-altura);
}
.conversa .conversa__rodape {
  font-size: var(--t-mini);
  border-top: 1px solid var(--linha-sobre-claro);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
}
.conversa[data-versao="1"] .mensagem--vendedor > span {
  color: var(--texto-suave);
}
.conversa[data-versao="1"] .mensagem--vendedor > p {
  background: var(--off-white);
  color: var(--azul-profundo);
}
.solucoes__grade {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-8);
}
.solucoes__intro > p {
  margin-top: var(--s-5);
  max-width: 37ch;
}
.solucoes__foto {
  height: var(--foto-solucoes-altura);
  margin-top: var(--s-7);
  overflow: hidden;
  border-radius: var(--r-balao);
  max-width: var(--foto-solucoes-largura);
}
.solucoes__foto img {
  width: 100%;
  height: calc(100% + var(--parallax-folga) * 2);
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
  margin-top: calc(var(--parallax-folga) * -1);
}
.frentes {
  border-top: 1px solid var(--linha-sobre-azul);
}
.frente {
  border-bottom: 1px solid var(--linha-sobre-azul);
}
.frente summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--altura-frente);
  padding-block: var(--s-5);
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: var(--t-frente);
  font-weight: 600;
  line-height: 1.3;
}
.frente summary::-webkit-details-marker {
  display: none;
}
.frente__icone {
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: var(--t-h3);
  color: var(--laranja-ativo);
  transition: transform var(--dur-media) var(--ease);
}
.frente[data-expandido="true"] .frente__icone,
html:not(.js) .frente[open] .frente__icone {
  transform: rotate(45deg);
}
.frente__conteudo {
  padding-bottom: var(--s-6);
}
.frente__conteudo > p {
  font-size: var(--t-pequeno);
  max-width: 50ch;
}
.frente__para {
  display: block;
  font-size: var(--t-mini);
  color: var(--texto-suave-sobre-azul);
  margin-top: var(--s-4);
}
.frente__conteudo .link-seta {
  margin-top: var(--s-4);
  font-size: var(--t-mini);
}
.contato__grade {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.contato__simbolo {
  width: var(--s-7);
  height: var(--s-7);
  object-fit: contain;
  margin-bottom: var(--s-5);
}
.contato h2 {
  font-size: var(--t-contato);
}
.contato__grade > div > p {
  margin-top: var(--s-5);
  max-width: 43ch;
}
.contato__acao {
  padding-top: var(--s-7);
}
.contato__mensagem {
  margin-top: var(--s-5);
}
.contato__mensagem > .botao {
  display: flex;
  list-style: none;
  width: 100%;
  cursor: pointer;
}
.contato__mensagem > .botao::-webkit-details-marker {
  display: none;
}
.mensagem-contato {
  padding-top: var(--s-5);
}
.mensagem-contato label {
  font-size: var(--t-mini);
  font-weight: 500;
}
.mensagem-contato textarea {
  display: block;
  width: 100%;
  resize: vertical;
  font-family: var(--fonte-texto);
  font-size: var(--t-pequeno);
  line-height: var(--lh-corpo);
  padding: var(--s-3);
  margin-top: var(--s-2);
  border: 1px solid var(--linha-sobre-claro);
  border-radius: var(--r-botao);
  background: var(--branco);
  color: var(--azul-profundo);
}
.contato__acao .contato__aviso {
  font-size: var(--t-mini);
  max-width: 48ch;
  margin-top: var(--s-4);
}
.copiar-mensagem {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: transparent;
  padding: var(--s-2) 0;
  min-height: 44px;
  font-size: var(--t-mini);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: var(--s-1);
}
.copiar-mensagem svg {
  width: var(--s-4);
}
.contato__acao .contato__status {
  min-height: var(--s-5);
  font-size: var(--t-mini);
  color: var(--verde-texto);
  margin-top: var(--s-2);
}
.rodape {
  background: var(--azul-950);
  color: var(--off-white);
  padding-block: var(--s-7) var(--s-5);
}
.rodape__principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
}
.rodape__principal img {
  width: var(--logo-largura);
}
.rodape__principal > p {
  font-family: var(--fonte-titulo);
  font-size: var(--t-pequeno);
  line-height: 1.5;
  margin-left: auto;
  margin-right: var(--s-8);
}
.voltar-topo {
  width: var(--s-7);
  height: var(--s-7);
  border: 1px solid var(--linha-sobre-azul);
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  font-size: var(--t-h3);
}
.rodape__base {
  border-top: 1px solid var(--linha-sobre-azul);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  font-size: var(--t-mini);
  color: var(--texto-suave-sobre-azul);
}

/* Transições coordenadas: o indicador acompanha o conteúdo e a forma. */
.triade__visual[data-pilar="marketing"] .barra--marketing {
  height: var(--barra-marketing-ativa);
}
.triade__visual[data-pilar="vendas"] .barra--vendas {
  height: var(--barra-vendas-ativa);
}
.triade__visual[data-pilar="experiencia"] .barra--experiencia {
  height: var(--barra-experiencia-ativa);
}
.triade__visual[data-pilar="marketing"] .barra--marketing,
.triade__visual[data-pilar="vendas"] .barra--vendas,
.triade__visual[data-pilar="experiencia"] .barra--experiencia {
  flex-grow: var(--barra-expansao);
  box-shadow: var(--sombra-barra);
}
.barra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--barra-brilho);
  transform: translateX(-130%);
  transition: transform var(--dur-grafico) var(--ease-suave);
  pointer-events: none;
}
.triade__visual[data-pilar="marketing"] .barra--marketing::after,
.triade__visual[data-pilar="vendas"] .barra--vendas::after,
.triade__visual[data-pilar="experiencia"] .barra--experiencia::after {
  transform: translateX(130%);
}
.barra > svg {
  transition: transform var(--dur-grafico) var(--ease-elastica);
}
.triade__visual[data-pilar="marketing"] .barra--marketing > svg,
.triade__visual[data-pilar="vendas"] .barra--vendas > svg,
.triade__visual[data-pilar="experiencia"] .barra--experiencia > svg {
  transform: translateY(calc(var(--s-1) * -1)) rotate(-8deg);
}
.triade__cursor {
  display: none;
  position: absolute;
  bottom: calc(var(--sinal-grafico-tamanho) / -2);
  left: var(--cursor-x, 16%);
  width: var(--sinal-grafico-tamanho);
  height: var(--sinal-grafico-tamanho);
  background: var(--off-white);
  border: var(--sinal-grafico-borda) solid var(--azul-profundo);
  border-radius: var(--r-chip);
  transform: translateX(-50%);
  transition: left var(--dur-grafico) var(--ease-entrada);
}
.js .triade__cursor {
  display: block;
}
.abas__indicador {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: var(--indicador-altura);
  width: var(--indicador-largura, 0px);
  background: var(--laranja-ativo);
  transform: translateX(var(--indicador-x, 0px));
  transition:
    transform var(--dur-painel) var(--ease-entrada),
    width var(--dur-painel) var(--ease-entrada);
  pointer-events: none;
}
.paineis-pilares {
  position: relative;
}
.js .paineis-pilares {
  min-height: var(--painel-altura);
}
.painel-fantasma {
  position: absolute !important;
  inset: 0 auto auto 0;
  width: 100%;
  pointer-events: none;
}
.alternador__indicador {
  position: absolute;
  z-index: 0;
  top: var(--s-1);
  bottom: var(--s-1);
  left: 0;
  width: var(--indicador-largura, 0px);
  transform: translateX(var(--indicador-x, 0px));
  border-radius: var(--r-chip);
  background: var(--azul-profundo);
  transition:
    transform var(--dur-painel) var(--ease-entrada),
    width var(--dur-painel) var(--ease-entrada);
  pointer-events: none;
}
.conversa {
  position: relative;
}
.conversa__resposta {
  position: relative;
  min-height: var(--conversa-resposta-altura);
}
.digitando {
  position: absolute;
  top: var(--s-6);
  right: 0;
  display: flex;
  gap: var(--s-2);
  align-items: center;
  min-height: var(--s-7);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-balao-inv);
  background: var(--azul-profundo);
  pointer-events: none;
}
.digitando i {
  width: var(--digitando-tamanho);
  height: var(--digitando-tamanho);
  border-radius: var(--r-chip);
  background: var(--verde-conexao);
  animation: digitacao var(--digitando-ciclo) var(--ease) infinite alternate;
}
.digitando i:nth-child(2) {
  animation-delay: var(--dur-curta);
}
.digitando i:nth-child(3) {
  animation-delay: calc(var(--dur-curta) * 2);
}
@keyframes digitacao {
  from {
    opacity: 0.4;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(calc(var(--s-1) * -1));
  }
}
.solucoes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.solucoes__ambiente {
  position: absolute;
  inset: calc(var(--parallax-folga) * -1) 0;
  z-index: -2;
}
.solucoes__ambiente img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solucoes__sombra {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.solucoes__sombra {
  background: var(--solucoes-overlay);
}
.solucoes__foto {
  position: relative;
  height: var(--foto-solucoes-altura-premium);
}
.solucoes__foto img {
  position: relative;
}
.solucoes__foto .foto-fantasma {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.frente {
  transition: border-color var(--dur-media);
}
.frente[data-expandido="true"] {
  border-bottom-color: var(--verde-conexao);
}
.frente summary > span:first-child {
  transition: transform var(--dur-media) var(--ease);
}
.frente summary:hover > span:first-child {
  transform: translateX(var(--s-2));
}
.frente__conteudo {
  display: flow-root;
}
.parallax {
  backface-visibility: hidden;
}

@media (min-width: 1500px) {
  .hero {
    min-height: var(--hero-altura-ampla);
  }
}
@media (max-width: 959px) {
  .navegacao {
    gap: var(--s-5);
  }
  .hero h1 {
    font-size: var(--t-hero-tablet);
  }
  .hero__legenda > span {
    display: none;
  }
  .triade,
  .sec__cabeca,
  .pratica__grade,
  .solucoes__grade,
  .contato__grade {
    gap: var(--s-6);
  }
  .sec__cabeca {
    align-items: start;
  }
  .barra {
    padding: var(--s-3);
    font-size: var(--t-mini);
  }
  .painel-pilar h3 {
    font-size: var(--t-h3);
  }
  .abas {
    gap: var(--s-4);
  }
  .abas button {
    font-size: var(--t-mini);
  }
  .manifesto h2 {
    font-size: var(--t-hero-tablet);
  }
  .frente summary {
    font-size: var(--t-h3);
  }
}
@media (max-width: 719px) {
  :root {
    --altura-topo: var(--altura-topo-mobile);
  }
  .topo__logo {
    width: var(--logo-mobile);
  }
  .js .menu-botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 44px;
    height: 44px;
    background: transparent;
    z-index: 22;
  }
  .menu-botao span {
    width: var(--s-5);
    height: 2px;
    background: var(--off-white);
    transition: transform var(--dur-curta);
  }
  .menu-aberto .menu-botao span:first-child {
    transform: translateY(5px) rotate(45deg);
  }
  .menu-aberto .menu-botao span:last-child {
    transform: translateY(-5px) rotate(-45deg);
  }
  .navegacao {
    display: flex;
    align-items: stretch;
    position: absolute;
    top: var(--altura-topo);
    left: 0;
    right: 0;
    background: var(--azul-profundo);
    flex-direction: column;
    gap: 0;
    padding: var(--s-4) var(--gutter) var(--s-6);
    border-bottom: 1px solid var(--linha-sobre-azul);
  }
  .js .navegacao {
    display: none;
  }
  .js .menu-aberto .navegacao {
    display: flex;
  }
  .navegacao > a {
    padding: var(--s-4) 0;
    font-size: var(--t-corpo);
  }
  .navegacao .topo__contato {
    margin-top: var(--s-3);
    justify-content: space-between;
  }
  .menu-aberto .topo {
    background: var(--azul-profundo);
  }
  .hero {
    min-height: var(--hero-altura-mobile);
    padding-top: calc(var(--altura-topo) + var(--s-7));
  }
  .hero__sombra {
    background: var(--hero-overlay-mobile);
  }
  .hero__midia video {
    object-position: 65% center;
  }
  .hero__contexto {
    font-size: var(--t-mini);
    margin-bottom: var(--s-5);
  }
  .hero h1 {
    font-size: var(--t-hero-mobile);
    font-weight: var(--peso-hero);
    max-width: none;
  }
  .hero__lead {
    font-size: var(--t-pequeno);
    max-width: 36ch;
    margin-top: var(--s-5);
  }
  .hero .botao {
    width: 100%;
    min-width: 0;
    gap: var(--s-3);
    font-size: var(--t-mini);
  }
  .hero__conteudo {
    padding-bottom: var(--s-7);
  }
  .hero__base {
    padding-block: var(--s-4);
    gap: var(--s-3);
    align-items: center;
  }
  .explorar {
    font-size: var(--t-mini);
    gap: var(--s-2);
  }
  .controle-movimento {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .controle-movimento__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
  }
  .faixa-pilares > .wrap {
    padding-block: var(--s-4);
  }
  .faixa-pilares span {
    flex-direction: column-reverse;
    align-items: start;
    font-size: var(--t-faixa-mobile);
    line-height: 1.5;
    gap: var(--s-2);
    padding-inline: var(--s-3);
  }
  .faixa-pilares svg {
    width: var(--s-5);
    height: var(--s-5);
  }
  .sec__cabeca,
  .triade,
  .pratica__grade,
  .solucoes__grade,
  .contato__grade {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .sec__cabeca {
    gap: var(--s-5);
    margin-bottom: var(--s-7);
  }
  .sec__cabeca p {
    font-size: var(--t-pequeno);
  }
  .triade__visual {
    padding: var(--s-5);
  }
  .triade__barras {
    height: var(--grafico-altura-mobile);
  }
  .barra {
    padding: var(--s-4);
    font-size: var(--t-mini);
  }
  .abas {
    justify-content: space-between;
    gap: var(--s-3);
  }
  .abas button {
    font-size: var(--t-pequeno);
  }
  .painel-pilar {
    min-height: var(--painel-altura-mobile);
  }
  .painel-pilar h3 {
    font-size: var(--t-pilar);
  }
  .manifesto {
    min-height: var(--manifesto-altura-mobile);
  }
  .manifesto__sombra {
    background: var(--manifesto-overlay-mobile);
  }
  .manifesto__foto img {
    object-position: 60% center;
  }
  .manifesto h2 {
    font-size: var(--t-manifesto-mobile);
  }
  .manifesto p {
    max-width: 32ch;
    font-size: var(--t-pequeno);
  }
  .manifesto__detalhe {
    font-size: var(--t-flecha-mobile);
    bottom: var(--s-5);
  }
  .pratica__texto > p {
    font-size: var(--t-pequeno);
  }
  .pratica__texto .pratica__nota {
    margin-top: var(--s-5);
  }
  .conversa {
    padding: var(--s-5);
  }
  .conversa__topo {
    font-size: var(--t-mini);
  }
  .mensagem {
    max-width: 94%;
  }
  .conversa .conversa__efeito {
    margin-left: var(--s-4);
  }
  .solucoes__foto {
    display: none;
  }
  .solucoes__intro > p {
    font-size: var(--t-pequeno);
  }
  .frente summary {
    font-size: var(--t-h3);
  }
  .contato__acao {
    padding-top: 0;
  }
  .contato__grade > div > p {
    font-size: var(--t-pequeno);
  }
  .contato__mensagem > .botao {
    gap: var(--s-3);
    font-size: var(--t-mini);
  }
  .rodape__principal {
    flex-wrap: wrap;
    gap: var(--s-5);
  }
  .rodape__principal img {
    width: var(--logo-mobile);
  }
  .rodape__principal > p {
    order: 3;
    flex-basis: 100%;
    margin: 0;
  }
  .rodape__base {
    flex-direction: column;
    gap: var(--s-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .parallax {
    transform: none !important;
    will-change: auto;
  }
  .js .triade__visual.animar .barra {
    transform: none;
    opacity: 1;
  }
}
html.movimento-pausado {
  scroll-behavior: auto;
}
.movimento-pausado *,
.movimento-pausado *::before,
.movimento-pausado *::after {
  animation: none !important;
  transition: none !important;
}
.movimento-pausado .parallax {
  transform: none !important;
  will-change: auto;
}
.movimento-pausado .triade__visual.animar .barra {
  transform: none;
  opacity: 1;
}

html:not(.js) .topo {
  position: relative;
  background: var(--azul-profundo);
}
html:not(.js) .hero {
  padding-top: var(--s-7);
}
@media (max-width: 719px) {
  html:not(.js) .topo__barra {
    height: auto;
    flex-wrap: wrap;
    padding-block: var(--s-5);
  }
  html:not(.js) .navegacao {
    position: static;
    flex-basis: 100%;
    padding: 0;
  }
}

html:not(.js) .pratica__nota {
  display: none;
}

@media (max-width: 719px) {
  :root {
    --parallax-limite: var(--parallax-limite-mobile);
    --triade-logo-largura: 190px;
  }
  .js .paineis-pilares {
    min-height: var(--painel-altura-mobile);
  }
  .conversa__resposta {
    min-height: var(--conversa-resposta-altura-mobile);
  }
  .hero__frase {
    text-wrap: balance;
  }
}