@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(/fonts/plus-jakarta-sans-var-latin.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url(/fonts/anton-v25-latin-ext.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url(/fonts/bricolage-grotesque-var-latin.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --acento: #2350F5;
  --acento-forte: #1A3CC4;
  --acento-fraco: #E9EEFE;
  --acento-vivo: #8FA5FF;
  --escuro: #0A1440;
  --escuro-2: #15257A;
  --escuro-3: #070E30;
  --ok: #0F7A52;
  --ok-vivo: #2FCB8A;
  --ok-fraco: #E3F4EB;
  --tinta: #0E1530;
  --tinta-2: #4A557F;
  --tinta-3: #6B7493;
  --fundo: #F3F5FC;
  --carta: #FFFFFF;
  --superf: #F7F8FD;
  --linha: #E2E6F3;
  --linha-2: #C9D0E8;
  --claro: #FFFFFF;
  --claro-2: rgba(255,255,255,.78);
  --claro-3: rgba(255,255,255,.14);
  --claro-4: rgba(255,255,255,.08);
  --amarelo: #FFD23A;
  --amarelo-borda: #C99500;
  --amarelo-fraco: #FFF6D1;
  --vermelho: #FF4B3E;
  --marca:
    "Bricolage Grotesque",
    "Plus Jakarta Sans",
    "Segoe UI",
    sans-serif;
  --zap: #25D366;
  --zap-forte: #1EBE5A;
  --zap-texto: #0B2B16;
  --tv-moldura: #0A0F14;
  --tv-moldura-2: #1A222B;
  --tv-geral: #123A6B;
  --sh: 0 1px 2px rgba(10,20,64,.05), 0 6px 20px rgba(10,20,64,.07);
  --sh-alto: 0 18px 40px -14px rgba(10,20,64,.28);
  --sh2: 0 24px 60px -12px rgba(0,0,0,.55);
  --r-1: 12px;
  --r-2: 18px;
  --r-3: 999px;
  --texto:
    "Plus Jakarta Sans",
    "Segoe UI",
    system-ui,
    sans-serif;
  --display:
    "Anton",
    "Arial Narrow",
    sans-serif;
  --suave: cubic-bezier(.2, .7, .2, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}
h1,
h2 {
  font-family: var(--marca);
}
h3 {
  font-family: var(--texto);
}
a {
  color: var(--acento);
}
svg {
  display: block;
}
[hidden] {
  display: none !important;
}
.cx {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
main > section {
  overflow-x: clip;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: var(--r-1);
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .15s,
    background .15s,
    box-shadow .15s;
}
.btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.btn.zap {
  background: var(--zap);
  color: var(--zap-texto);
  box-shadow: 0 12px 28px -12px rgba(37, 211, 102, .9);
}
.btn.zap:hover {
  background: var(--zap-forte);
  transform: translateY(-2px);
}
.btn.fantasma {
  background: var(--claro-3);
  color: var(--claro);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.btn.fantasma:hover {
  background: rgba(255, 255, 255, .2);
}
.btn.escuro {
  background: var(--escuro);
  color: var(--claro);
}
.btn.escuro:hover {
  background: var(--acento-forte);
  transform: translateY(-2px);
}
.btn.pequeno {
  min-height: 42px;
  padding: 0 16px;
  font-size: 14px;
}
.btn.grande {
  min-height: 62px;
  padding: 0 34px;
  font-size: 18px;
}
.btn:focus-visible,
.topo a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}
.sobre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 12px;
}
.sobre::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.sobre.claro {
  color: var(--amarelo);
}
.secao {
  padding: 96px 0;
}
.secao h2,
.final h2,
.historia h2 {
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 14px;
  max-width: 780px;
}
.sub {
  font-size: 18px;
  color: var(--tinta-2);
  margin: 0;
  max-width: 640px;
}
.cabeca-secao {
  margin-bottom: 44px;
}
html.anima .surge {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--suave) var(--d, 0s), transform .8s var(--suave) var(--d, 0s);
}
html.anima .surge.visto {
  opacity: 1;
  transform: none;
}
.leitura {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 40;
  background: var(--amarelo);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  color: var(--claro);
  transition: background .25s, box-shadow .25s;
}
.topo.solido {
  background: rgba(10, 20, 64, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px -18px rgba(0, 0, 0, .6);
}
.topo .cx {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--marca);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--claro);
  text-decoration: none;
}
.marca-tv {
  flex: none;
  width: 32px;
  height: 32px;
}
.marca-tv svg {
  width: 100%;
  height: 100%;
  display: block;
}
.marca.logo {
  align-items: baseline;
  gap: 0;
  font-size: 30px;
  letter-spacing: -.035em;
  line-height: 1;
}
.marca.logo .marca-tv {
  width: .78em;
  height: .78em;
  margin: 0 .2em 0 0;
}
.topo-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.topo-nav a {
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--claro-2);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.topo-nav a:hover {
  color: var(--claro);
  background: var(--claro-4);
}
.topo-contato {
  font-size: 14px;
  font-weight: 600;
  color: var(--claro-2);
  text-align: right;
}
.topo-contato:empty {
  display: none;
}
.topo-zap {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.topo.solido .topo-zap {
  opacity: 1;
  pointer-events: auto;
}
.heroi {
  position: relative;
  overflow: hidden;
  color: var(--claro);
  padding: 128px 0 56px;
  background:
    linear-gradient(
      165deg,
      var(--escuro-2) 0%,
      var(--escuro) 60%,
      var(--escuro-3) 100%);
}
.heroi::before,
.heroi::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.heroi > .cx {
  position: relative;
  z-index: 1;
}
.heroi::before {
  width: 980px;
  height: 980px;
  right: -300px;
  top: -40px;
  background: rgba(35, 80, 245, .42);
  -webkit-mask: url(/marca/ofertela-simbolo.svg) center / contain no-repeat;
  mask: url(/marca/ofertela-simbolo.svg) center / contain no-repeat;
  transform: rotate(-12deg) translateY(calc(var(--rolar, 0) * .12px));
}
.heroi::after {
  left: 0;
  bottom: 0;
  width: 420px;
  height: 320px;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .2) 1.5px,
      transparent 2px) 0 0 / 16px 16px;
  -webkit-mask-image:
    radial-gradient(
      circle at 0% 100%,
      #000 0%,
      transparent 70%);
  mask-image:
    radial-gradient(
      circle at 0% 100%,
      #000 0%,
      transparent 70%);
}
.brilho {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}
.brilho-1 {
  width: 760px;
  height: 760px;
  right: -180px;
  top: -260px;
  background:
    radial-gradient(
      closest-side,
      rgba(35, 80, 245, .75),
      transparent);
  transform: translateY(calc(var(--rolar, 0) * .25px));
}
.brilho-2 {
  width: 520px;
  height: 520px;
  left: -220px;
  bottom: -200px;
  background:
    radial-gradient(
      closest-side,
      rgba(255, 210, 58, .14),
      transparent);
  transform: translateY(calc(var(--rolar, 0) * -.15px));
}
.heroi-grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-3);
  background: var(--claro-3);
  color: var(--claro);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.etiqueta .pt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok-vivo);
  box-shadow: 0 0 0 4px rgba(47, 203, 138, .25);
  animation: pulsa 2s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(47, 203, 138, .3);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(47, 203, 138, 0);
  }
}
.heroi h1 {
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 20px;
}
.heroi h1 em {
  font-style: normal;
  color: var(--amarelo);
}
.heroi-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--claro-2);
  margin: 0 0 30px;
  max-width: 540px;
}
.heroi-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.nota {
  font-size: 14px;
  color: var(--claro-2);
  margin: 16px 0 0;
}
.heroi-visual {
  position: relative;
  padding: 0 0 52px;
  --tv-u: 9.4px;
  transform: translateY(calc(var(--rolar, 0) * -.08px));
}
.inclina {
  position: relative;
  transform: perspective(1400px) rotateY(var(--ry, -4deg)) rotateX(var(--rx, 2deg));
  transition: transform .4s var(--suave);
}
.heroi-visual .tv,
.heroi-visual .tv-rotulo {
  width: 86%;
}
.heroi-visual .tv-pe {
  width: calc(86% * .26);
  margin: 0 0 0 calc(86% * .37);
}
.tv-rotulo {
  font-size: 13px;
  color: var(--claro-2);
  margin: 12px 0 0;
  text-align: center;
}
.numeros {
  list-style: none;
  margin: 64px 0 0;
  padding: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.numeros li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.numeros b {
  font-size: 46px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
}
.numeros li > span {
  font-size: 15px;
  font-weight: 600;
  color: var(--claro-2);
}
.tv {
  position: relative;
  background: var(--tv-moldura);
  border-radius: 18px;
  padding: 11px;
  box-shadow: var(--sh2), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.tv-pe {
  width: 26%;
  height: 12px;
  margin: 0 auto;
  background: linear-gradient(var(--tv-moldura), var(--tv-moldura-2));
  border-radius: 0 0 10px 10px;
}
.tv-tela {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  font-size: var(--tv-u);
  background: var(--tv-geral);
}
.tv-camada {
  --tv-fundo: var(--tv-geral);
  --tv-preco: var(--amarelo);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--claro);
  background: var(--tv-fundo);
  opacity: 0;
  transition: opacity .6s;
}
.tv-camada.on {
  opacity: 1;
}
.tv-topo {
  flex: none;
  height: 15%;
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 0 2.4em;
  background: rgba(0, 0, 0, .28);
}
.tv-loja {
  padding: .35em .8em;
  border-radius: .4em;
  background: var(--claro);
  color: var(--escuro);
  font-weight: 800;
  font-size: .95em;
  letter-spacing: .04em;
  white-space: nowrap;
}
.tv-campanha {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.5em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tv-preco);
  letter-spacing: .01em;
  white-space: nowrap;
}
.tv-ate {
  padding: .3em .7em;
  border-radius: var(--r-3);
  background: rgba(255, 255, 255, .16);
  font-size: .85em;
  font-weight: 800;
  letter-spacing: .05em;
  white-space: nowrap;
}
.tv-hora {
  margin-left: auto;
  font-family: var(--display);
  font-size: 2.2em;
  line-height: 1;
}
.tv-corpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1.8em;
  padding: 1.6em 2.4em 1.2em;
}
.tv-destaque {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1.2em 1em 1em;
  border-radius: .9em;
  background: var(--claro);
  color: var(--tinta);
  text-align: center;
}
.tv-selo {
  position: absolute;
  top: .9em;
  left: .9em;
  padding: .3em .6em;
  border-radius: .4em;
  background: var(--vermelho);
  color: var(--claro);
  font-size: .78em;
  font-weight: 800;
  letter-spacing: .04em;
}
.tv-desenho {
  flex: 1;
  min-height: 0;
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.4em;
}
.tv-desenho svg,
.s-desenho svg {
  max-width: 100%;
  max-height: 100%;
}
.tv-nome {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55em;
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: .3em;
}
.tv-destaque s {
  font-size: .9em;
  color: var(--tinta-3);
}
.tv-preco {
  font-family: var(--display);
  color: var(--vermelho);
  font-size: 4.6em;
  line-height: .95;
  letter-spacing: -.01em;
}
.tv-preco small,
.tv-lista span small {
  margin-right: .15em;
  font-family: var(--texto);
  font-weight: 800;
}
.tv-preco small {
  font-size: .3em;
  vertical-align: .9em;
}
.tv-preco sup {
  font-size: .45em;
  vertical-align: .7em;
}
.tv-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: .55em;
  min-height: 0;
}
.tv-lista li {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: 0 .9em;
  border-radius: .5em;
  background: rgba(255, 255, 255, .08);
  min-height: 0;
}
.tv-lista b {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-lista i {
  flex: none;
  font-style: normal;
  padding: .2em .5em;
  border-radius: var(--r-3);
  background: var(--tv-preco);
  color: var(--tinta);
  font-size: .8em;
  font-weight: 800;
}
.tv-lista span {
  flex: none;
  font-family: var(--display);
  font-size: 1.9em;
  line-height: 1;
  color: var(--tv-preco);
}
.tv-lista span small {
  font-size: .42em;
  vertical-align: .8em;
}
.tv-lista span sup {
  font-size: .55em;
  vertical-align: .55em;
}
.tv-pe-tela {
  flex: none;
  height: 8%;
  display: flex;
  align-items: center;
  gap: 1.6em;
  padding: 0 2.4em;
  background: rgba(0, 0, 0, .28);
  font-size: .8em;
  color: rgba(255, 255, 255, .75);
}
.tv-pe-tela span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-tempo {
  flex: none;
  width: 22%;
  height: .45em;
  border-radius: var(--r-3);
  background: rgba(255, 255, 255, .2);
  overflow: hidden;
}
.tv-tempo i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tv-preco);
  border-radius: inherit;
}
.tv-camada.on .tv-tempo i {
  animation: tvTempoUm var(--tempo, 5s) linear both;
}
@keyframes tvTempoUm {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
#cTv .tv-camada {
  animation: tvRoda 15s infinite;
}
#cTv .tv-camada:nth-child(1) {
  animation-delay: -.6s;
}
#cTv .tv-camada:nth-child(2) {
  animation-delay: 4.4s;
}
#cTv .tv-camada:nth-child(3) {
  animation-delay: 9.4s;
}
@keyframes tvRoda {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  37% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#cTv .tv-tempo i {
  animation: tvTempo 15s linear infinite;
}
#cTv .tv-camada:nth-child(1) .tv-tempo i {
  animation-delay: -.6s;
}
#cTv .tv-camada:nth-child(2) .tv-tempo i {
  animation-delay: 4.4s;
}
#cTv .tv-camada:nth-child(3) .tv-tempo i {
  animation-delay: 9.4s;
}
@keyframes tvTempo {
  0% {
    width: 0;
  }
  35% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
.cel {
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 21%;
  aspect-ratio: 9 / 18.5;
  font-size: calc(var(--tv-u) * .95);
  padding: .7em;
  border-radius: 2.4em;
  background: var(--tv-moldura);
  box-shadow: var(--sh2), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  animation: celFlutua 6s ease-in-out infinite;
}
@keyframes celFlutua {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.cel-tela {
  height: 100%;
  border-radius: 1.8em;
  background: var(--fundo);
  color: var(--tinta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .7em;
  padding: 1em .8em;
  position: relative;
}
.cel-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .85em;
  font-weight: 800;
}
.cel-barra i {
  width: 2.2em;
  height: .9em;
  border-radius: .3em;
  background: var(--tinta);
  opacity: .8;
}
.cel-app {
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.cel-cartao {
  display: flex;
  flex-direction: column;
  gap: .4em;
  padding: .9em;
  border-radius: 1em;
  background: var(--carta);
  box-shadow: var(--sh);
}
.cel-cartao b {
  font-size: 1em;
  font-weight: 800;
  color: var(--acento-forte);
}
.cel-cartao > span {
  font-size: .8em;
  color: var(--tinta-2);
}
.cel-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35em;
  margin: .3em 0;
}
.cel-mini i {
  height: 2.4em;
  border-radius: .4em;
  background: var(--tv-geral);
  box-shadow: inset 0 -.7em 0 var(--amarelo);
}
.cel-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  height: 2.6em;
  margin-top: .2em;
  border-radius: .7em;
  background: var(--ok);
  color: var(--claro);
  font-size: 1em;
  font-weight: 800;
}
.heroi .cel-botao {
  animation: celBotao 5s ease-in-out infinite;
}
@keyframes celBotao {
  0%, 60%, 100% {
    transform: scale(1);
  }
  70% {
    transform: scale(.94);
  }
  78% {
    transform: scale(1);
  }
}
.cel-feito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4em;
  padding: .7em .8em;
  border-radius: 1em;
  background: var(--carta);
  box-shadow: var(--sh);
  font-size: .85em;
}
.cel-feito b {
  font-weight: 800;
  color: var(--tinta-2);
}
.cel-feito span {
  padding: .2em .6em;
  border-radius: var(--r-3);
  background: var(--ok-fraco);
  color: var(--ok);
  font-weight: 800;
  font-size: .9em;
}
.cel-ok {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .6em .7em;
  border-radius: .8em;
  background: var(--ok-fraco);
  color: var(--ok);
  font-size: .82em;
  font-weight: 800;
  animation: celOk 5s ease-in-out infinite;
}
.cel-ok svg,
.st-publicado svg {
  width: 1.3em;
  height: 1.3em;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
@keyframes celOk {
  0%, 72% {
    opacity: 0;
    transform: translateY(.6em);
  }
  80%, 96% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.historia {
  position: relative;
  height: 420vh;
  color: var(--claro);
  background:
    radial-gradient(
      900px 600px at 80% 40%,
      rgba(35, 80, 245, .45),
      transparent 70%),
    linear-gradient(
      180deg,
      var(--escuro-3) 0%,
      var(--escuro) 100%);
}
.palco-fixo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.historia-grade {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.historia h2 {
  font-size: 38px;
  margin-bottom: 26px;
}
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.etapas li {
  opacity: .42;
  transition: opacity .4s;
}
.etapas li.on {
  opacity: 1;
}
.etapas button {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .3s;
}
.etapas li.on button {
  background: var(--claro-4);
}
.etapa-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  font-weight: 800;
  font-size: 15px;
  transition:
    background .3s,
    border-color .3s,
    color .3s;
}
.etapas li.on .etapa-n {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--escuro);
}
.etapas b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 4px;
}
.etapas small {
  display: block;
  font-size: 15px;
  color: var(--claro-2);
  line-height: 1.5;
  margin-top: 4px;
}
.etapas-barra {
  display: none;
}
.palco-caixa {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 460;
}
.palco {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 460px;
  transform-origin: 0 0;
  transform: scale(var(--escala, 1));
}
.palco > * {
  position: absolute;
  transition: opacity .6s var(--suave), transform .8s var(--suave);
}
.st-erp {
  left: 70px;
  top: 40px;
  width: 500px;
  border-radius: 14px;
  background: var(--carta);
  color: var(--tinta);
  box-shadow: var(--sh2);
  overflow: hidden;
  transform-origin: 0 0;
}
.st-janela-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--superf);
  border-bottom: 1px solid var(--linha);
}
.st-janela-topo i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--linha-2);
}
.st-janela-topo span {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-2);
}
.st-tabela {
  padding: 6px 16px 4px;
  font-size: 14px;
}
.st-linha {
  display: grid;
  grid-template-columns: 60px 1fr 64px 64px;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--linha);
  font-variant-numeric: tabular-nums;
}
.st-linha:last-child {
  border-bottom: 0;
}
.st-linha.cab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.st-linha span:first-child {
  color: var(--tinta-3);
}
.st-linha:not(.cab) span:nth-child(3) {
  color: var(--tinta-3);
  text-decoration: line-through;
}
.st-linha b {
  color: var(--vermelho);
  font-weight: 800;
}
.st-erp-pe {
  padding: 10px 16px 14px;
}
.st-sinc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-3);
  background: var(--acento-fraco);
  color: var(--acento-forte);
  font-size: 13px;
  font-weight: 800;
}
.st-sinc i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
  animation: pulsa 1.4s ease-in-out infinite;
}
.historia[data-etapa="0"] .st-linha:not(.cab) {
  animation: linhaEntra .5s var(--suave) both;
  animation-delay: calc(var(--i) * .12s + .15s);
}
@keyframes linhaEntra {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.historia:not([data-etapa="0"]) .st-erp {
  opacity: 0;
  transform: translate(-40px, -10px) scale(.6);
}
.st-tv {
  left: 60px;
  top: 50px;
  width: 520px;
  --tv-u: 9.2px;
  opacity: 0;
  transform: translateY(40px) scale(.94);
  transform-origin: 0 0;
}
.st-tv .tv-camada {
  opacity: 1;
}
.st-tv .tv-lista li,
.st-tv .tv-destaque > * {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .45s var(--suave), transform .45s var(--suave);
}
.st-tv .tv-destaque > .tv-desenho {
  transform: scale(.6);
}
.historia:not([data-etapa="0"]) .st-tv {
  opacity: 1;
  transform: none;
}
.historia:not([data-etapa="0"]) .st-tv .tv-lista li,
.historia:not([data-etapa="0"]) .st-tv .tv-destaque > * {
  opacity: 1;
  transform: none;
}
.st-tv .tv-lista li:nth-child(1) {
  transition-delay: .25s;
}
.st-tv .tv-lista li:nth-child(2) {
  transition-delay: .35s;
}
.st-tv .tv-lista li:nth-child(3) {
  transition-delay: .45s;
}
.st-tv .tv-lista li:nth-child(4) {
  transition-delay: .55s;
}
.st-tv .tv-lista li:nth-child(5) {
  transition-delay: .65s;
}
.st-tv .tv-lista li:nth-child(6) {
  transition-delay: .75s;
}
.st-tv .tv-destaque > .tv-desenho {
  transition-delay: .5s;
}
.st-tv .tv-destaque > :not(.tv-desenho) {
  transition-delay: .2s;
}
.st-tv .tv-tempo i {
  width: 55%;
}
.st-foto {
  left: 186px;
  top: 128px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-3);
  background: var(--amarelo);
  color: var(--escuro);
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--sh-alto);
  opacity: 0;
  transform: scale(.6);
}
.st-foto svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.historia[data-etapa="1"] .st-foto {
  opacity: 1;
  transform: none;
  transition-delay: .9s;
}
.historia[data-etapa="2"] .st-tv {
  transform: translateX(-46px) scale(.9);
  opacity: .55;
}
.historia[data-etapa="3"] .st-tv {
  transform: translate(78px, -34px) scale(.7);
}
.st-cel {
  left: 432px;
  top: 46px;
  width: 178px;
  height: 360px;
  padding: 9px;
  border-radius: 30px;
  background: var(--tv-moldura);
  box-shadow: var(--sh2), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  font-size: 12px;
  opacity: 0;
  transform: translateX(70px) rotate(4deg);
}
.st-cel .cel-tela {
  border-radius: 22px;
  gap: 10px;
  padding: 14px 12px;
}
.st-cel .cel-mini i {
  height: 30px;
}
.st-aprovar {
  position: relative;
}
.st-aprovar svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}
.st-publicado {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--ok-fraco);
  color: var(--ok);
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s, transform .4s;
}
.st-toque {
  position: absolute;
  left: 50%;
  top: 214px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 2px rgba(15, 26, 32, .25);
  opacity: 0;
}
.historia[data-etapa="2"] .st-cel {
  opacity: 1;
  transform: none;
}
.historia[data-etapa="2"] .st-toque {
  animation: toque 1s .7s ease-out both;
}
@keyframes toque {
  0% {
    opacity: 0;
    transform: scale(1.6);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}
.historia[data-etapa="2"] .st-aprovar {
  animation: aprova .4s 1.05s both;
}
@keyframes aprova {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
    background: var(--ok-vivo);
  }
}
.historia[data-etapa="2"] .st-aprovar span {
  animation: some .2s 1.2s both;
}
.historia[data-etapa="2"] .st-aprovar svg {
  display: block;
  animation: aparece .3s 1.25s both;
}
@keyframes some {
  to {
    opacity: 0;
    width: 0;
  }
}
@keyframes aparece {
  from {
    opacity: 0;
    transform: scale(.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.historia[data-etapa="2"] .st-publicado {
  opacity: 1;
  transform: none;
  transition-delay: 1.5s;
}
.historia[data-etapa="3"] .st-cel {
  opacity: 0;
  transform: translateX(80px) rotate(6deg);
}
.st-saida {
  opacity: 0;
  transform: translateY(50px) scale(.9);
  box-shadow: var(--sh2);
  color: var(--tinta);
}
.st-saida b {
  font-family: var(--display);
  font-weight: 400;
  color: var(--vermelho);
  line-height: 1;
}
.st-saida b small {
  font-size: .5em;
}
.st-encarte {
  left: 52px;
  top: 236px;
  width: 150px;
  height: 200px;
  padding: 8px;
  border-radius: 6px;
  background: var(--claro);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-encarte .t {
  display: block;
  padding: 6px 0;
  border-radius: 4px;
  background: var(--vermelho);
  color: var(--claro);
  text-align: center;
  font-style: normal;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .08em;
}
.st-encarte .g {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}
.st-encarte .g i {
  border-radius: 4px;
  background: var(--fundo);
  box-shadow: inset 0 -10px 0 var(--amarelo);
}
.st-encarte .g .d {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  background: var(--amarelo-fraco);
  box-shadow: none;
}
.st-encarte .g .d b {
  font-size: 30px;
}
.st-placa {
  left: 224px;
  top: 300px;
  width: 196px;
  height: 140px;
  border-radius: 8px;
  background: var(--claro);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.st-placa .t {
  width: 100%;
  padding: 5px 0;
  background: var(--vermelho);
  color: var(--claro);
  font-style: normal;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .08em;
}
.st-placa span {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.st-placa b {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 62px;
}
.st-post {
  left: 446px;
  top: 226px;
  width: 128px;
  height: 220px;
  padding: 8px;
  border-radius: 22px;
  background: var(--tv-moldura);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-post .img {
  height: 62%;
  border-radius: 14px;
  background: var(--tv-geral);
  display: grid;
  place-items: center;
  border: 4px solid var(--claro);
}
.st-post .img b {
  color: var(--amarelo);
  font-size: 40px;
}
.st-post i {
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .75);
}
.st-post i.c {
  width: 60%;
}
.st-mesmo {
  left: 230px;
  top: 248px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-3);
  background: var(--ok-vivo);
  color: var(--escuro);
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--sh-alto);
  opacity: 0;
  transform: translateY(-10px);
}
.st-mesmo svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.historia[data-etapa="3"] .st-saida {
  opacity: 1;
  transform: none;
}
.historia[data-etapa="3"] .st-encarte {
  transform: rotate(-5deg);
  transition-delay: .15s;
}
.historia[data-etapa="3"] .st-placa {
  transition-delay: .3s;
}
.historia[data-etapa="3"] .st-post {
  transform: rotate(4deg);
  transition-delay: .45s;
}
.historia[data-etapa="3"] .st-mesmo {
  opacity: 1;
  transform: none;
  transition-delay: .9s;
}
.historia[data-etapa="3"] .st-saida b {
  animation: precoPisca 1.2s 1.1s ease-in-out both;
}
@keyframes precoPisca {
  0%, 100% {
    text-shadow: none;
  }
  40% {
    text-shadow: 0 0 18px rgba(255, 210, 58, .9);
  }
}
.experimente {
  background: var(--fundo);
}
.sim {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.sim-controle {
  position: sticky;
  top: 96px;
  padding: 28px;
  border-radius: var(--r-2);
  background: var(--carta);
  box-shadow: var(--sh-alto);
  border: 1px solid var(--linha);
}
.sim-rotulo {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 10px;
}
.sim-produtos {
  display: grid;
  gap: 8px;
  margin-bottom: 26px;
}
.sim-produtos button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--r-1);
  border: 1.5px solid var(--linha);
  background: var(--carta);
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    border-color .2s,
    background .2s,
    transform .15s;
}
.sim-produtos button:hover {
  border-color: var(--linha-2);
}
.sim-produtos button[aria-checked=true] {
  border-color: var(--acento);
  background: var(--acento-fraco);
}
.sim-produtos .mini {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--superf);
  display: grid;
  place-items: center;
  padding: 4px;
  flex: none;
}
.sim-produtos .mini svg {
  max-width: 100%;
  max-height: 100%;
}
.sim-produtos small {
  margin-left: auto;
  color: var(--tinta-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sim-valor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sim-valor span {
  font-family: var(--display);
  font-size: 52px;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.sim-valor i {
  font-style: normal;
  padding: 5px 10px;
  border-radius: var(--r-3);
  background: var(--vermelho);
  color: var(--claro);
  font-size: 14px;
  font-weight: 800;
}
.sim-controle input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.sim-controle input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background:
    linear-gradient(
      90deg,
      var(--vermelho) 0%,
      var(--amarelo) var(--cheio, 50%),
      var(--linha) var(--cheio, 50%));
}
.sim-controle input[type=range]::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: var(--linha);
}
.sim-controle input[type=range]::-moz-range-progress {
  height: 10px;
  border-radius: 5px;
  background: var(--amarelo);
}
.sim-controle input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--carta);
  border: 4px solid var(--escuro);
  box-shadow: var(--sh-alto);
}
.sim-controle input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--carta);
  border: 4px solid var(--escuro);
}
.sim-controle input[type=range]:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 4px;
  border-radius: 8px;
}
.sim-escala {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tinta-3);
  font-weight: 600;
  margin-top: 2px;
}
.sim-nota {
  display: flex;
  gap: 10px;
  margin: 22px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-1);
  background: var(--superf);
  font-size: 14px;
  color: var(--tinta-2);
}
.sim-nota svg {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: var(--ok);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sim-saidas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.sim-saida {
  margin: 0;
}
.sim-saida figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--tinta-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sim-saida figcaption::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok-vivo);
}
.sim-arte {
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-2);
  background: var(--carta);
  border: 1px solid var(--linha);
  box-shadow: var(--sh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5%;
  position: relative;
}
.s-desenho {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.s-preco {
  font-family: var(--display);
  line-height: .95;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.s-preco small {
  font-family: var(--texto);
  font-weight: 800;
  font-size: .32em;
  vertical-align: .9em;
  margin-right: .12em;
}
.s-preco sup {
  font-size: .45em;
  vertical-align: .7em;
}
.s-nome {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
}
.pisca {
  animation: pisca .55s var(--suave);
}
@keyframes pisca {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.14);
    text-shadow: 0 0 16px rgba(255, 210, 58, .95);
  }
  100% {
    transform: scale(1);
  }
}
.arte-tv {
  background: var(--escuro);
  padding: 4%;
}
.s-tv {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.6cqw;
  border: 2cqw solid var(--tv-moldura);
  background: var(--tv-geral);
  display: grid;
  grid-template-columns: 42% 1fr;
  grid-template-rows: auto 1fr auto auto;
  column-gap: 3.4cqw;
  padding: 2.8cqw 3.4cqw;
  color: var(--claro);
}
.s-tv .s-selo {
  grid-column: 1 / -1;
  justify-self: start;
  padding: .5cqw 2.2cqw;
  border-radius: 1cqw;
  background: var(--vermelho);
  font-size: 2.8cqw;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 1.6cqw;
}
.s-tv .s-desenho {
  grid-row: 2 / 5;
  background: var(--claro);
  border-radius: 2.2cqw;
  padding: 2.2cqw;
}
.s-tv .s-desenho svg {
  max-height: 21cqw;
}
.s-tv .s-nome {
  align-self: end;
  font-size: 4.3cqw;
}
.s-tv s {
  font-size: 3.1cqw;
  color: rgba(255, 255, 255, .65);
}
.s-tv .s-preco {
  font-size: 12.5cqw;
  color: var(--amarelo);
}
.arte-encarte {
  background: var(--superf);
}
.s-encarte {
  height: 100%;
  aspect-ratio: 3 / 4;
  background: var(--claro);
  border-radius: 1.2cqw;
  box-shadow: var(--sh-alto);
  padding: 2.3cqw;
  display: flex;
  flex-direction: column;
  gap: 1.7cqw;
  transform: rotate(-2deg);
}
.s-encarte .t {
  display: block;
  padding: 1.4cqw 0;
  border-radius: 1cqw;
  background: var(--vermelho);
  color: var(--claro);
  text-align: center;
  font-style: normal;
  font-family: var(--display);
  font-size: 3.7cqw;
  letter-spacing: .06em;
}
.s-grade {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.6fr 1fr 1fr;
  gap: 1.4cqw;
  min-height: 0;
}
.s-grade > i {
  border-radius: 1cqw;
  background: var(--fundo);
  box-shadow: inset 0 -2.3cqw 0 var(--amarelo);
}
.s-celula {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.7cqw;
  padding: 1.7cqw;
  border-radius: 1cqw;
  background: var(--amarelo-fraco);
  min-height: 0;
}
.s-celula .s-desenho {
  grid-row: 1 / 3;
}
.s-celula .s-desenho svg {
  max-height: 15cqw;
}
.s-celula .s-nome {
  font-size: 2.9cqw;
  align-self: end;
}
.s-celula .s-preco {
  font-size: 8cqw;
  color: var(--vermelho);
  align-self: start;
}
.arte-placa {
  background: var(--superf);
}
.s-placa {
  width: 86%;
  border-radius: 2.2cqw;
  background: var(--claro);
  box-shadow: var(--sh-alto);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 2.8cqw;
}
.s-placa .t {
  width: 100%;
  padding: 1.7cqw 0;
  background: var(--vermelho);
  color: var(--claro);
  font-style: normal;
  font-family: var(--display);
  font-size: 5.7cqw;
  letter-spacing: .08em;
}
.s-placa .s-nome {
  font-size: 4.3cqw;
  margin: 2.3cqw 2.3cqw 0;
}
.s-placa s {
  font-size: 3.4cqw;
  color: var(--tinta-3);
}
.s-placa .s-preco {
  font-size: 18cqw;
  color: var(--vermelho);
}
.arte-post {
  background: var(--acento-fraco);
}
.s-post {
  height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 5.7cqw;
  border: 2cqw solid var(--tv-moldura);
  background: var(--fundo);
  padding: 2.3cqw;
  display: flex;
  flex-direction: column;
  gap: 1.7cqw;
  box-shadow: var(--sh-alto);
}
.s-post-img {
  position: relative;
  flex: 1.3;
  border-radius: 2.8cqw;
  background: var(--tv-geral);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.3cqw;
  min-height: 0;
}
.s-post-img .s-desenho svg {
  height: 17cqw;
  width: auto;
}
.s-post-img .s-preco {
  position: absolute;
  right: 1.7cqw;
  bottom: 1.7cqw;
  padding: .6cqw 1.7cqw;
  border-radius: 1.7cqw;
  background: var(--amarelo);
  color: var(--tinta);
  font-size: 6.3cqw;
}
.s-post p {
  margin: 0;
  padding: 1.7cqw 2.3cqw;
  border-radius: 2.8cqw 2.8cqw 2.8cqw .6cqw;
  background: var(--carta);
  font-size: 2.7cqw;
  line-height: 1.35;
  color: var(--tinta-2);
  box-shadow: var(--sh);
}
.s-post p b {
  color: var(--tinta);
}
.setores {
  color: var(--claro);
  background:
    radial-gradient(
      800px 500px at 90% 60%,
      rgba(35, 80, 245, .5),
      transparent 70%),
    var(--escuro);
}
.setores .sub {
  color: var(--claro-2);
}
.setores-grade {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.setores-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 30px;
}
.setores-chips button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-3);
  border: 0;
  background: var(--claro-4);
  color: var(--claro);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background .2s, box-shadow .2s;
}
.setores-chips button i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .4);
}
.setores-chips button:hover {
  background: var(--claro-3);
}
.setores-chips button[aria-selected=true] {
  background: var(--claro);
  color: var(--escuro);
  box-shadow: none;
}
.lista-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lista-check li {
  position: relative;
  padding-left: 32px;
  color: var(--claro-2);
  font-size: 16px;
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(47, 203, 138, .18) no-repeat center / 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FCB8A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.setores-visual {
  --tv-u: 10.4px;
}
.setores-visual .tv {
  padding: 12px;
  border-radius: 20px;
}
.consulta {
  background: var(--carta);
}
.consulta-grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.consulta-texto .sub {
  margin-bottom: 30px;
}
.consulta-visual {
  display: flex;
  justify-content: center;
}
.terminal {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.term-tela {
  position: relative;
  width: 100%;
  height: 430px;
  border-radius: 24px;
  border: 12px solid var(--tv-moldura);
  background:
    linear-gradient(
      170deg,
      var(--tv-geral),
      var(--escuro));
  color: var(--claro);
  overflow: hidden;
  box-shadow: var(--sh2);
}
.term-topo {
  padding: 14px 16px;
  background: rgba(0, 0, 0, .25);
  text-align: center;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--amarelo);
}
.term-parado,
.term-produto {
  position: absolute;
  left: 0;
  right: 0;
  top: 58px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  transition: opacity .4s, transform .4s var(--suave);
}
.term-parado svg {
  width: 96px;
  height: 96px;
  stroke: var(--claro);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  opacity: .9;
  animation: respira 2.4s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% {
    opacity: .55;
    transform: scale(.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.term-parado b {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 800;
}
.term-produto {
  gap: 6px;
  opacity: 0;
  transform: translateY(20px);
}
.term-produto .s-desenho {
  width: 150px;
  height: 120px;
  padding: 12px;
  border-radius: 16px;
  background: var(--claro);
}
.term-produto .s-desenho svg {
  max-height: 96px;
}
.term-produto b {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
}
.term-selo {
  padding: 4px 12px;
  border-radius: var(--r-3);
  background: var(--vermelho);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
}
.term-produto s {
  font-size: 15px;
  color: rgba(255, 255, 255, .65);
}
.term-preco {
  font-family: var(--display);
  font-size: 74px;
  line-height: .95;
  color: var(--amarelo);
}
.term-preco small {
  font-family: var(--texto);
  font-weight: 800;
  font-size: .28em;
  vertical-align: .9em;
  margin-right: .12em;
}
.term-preco sup {
  font-size: .42em;
  vertical-align: .7em;
}
.term-laser {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 30%;
  height: 3px;
  border-radius: 2px;
  background: var(--vermelho);
  box-shadow: 0 0 14px 4px rgba(214, 40, 40, .75);
  opacity: 0;
}
.terminal[data-estado=lendo] .term-laser {
  animation: laser .9s ease-in-out both;
}
@keyframes laser {
  0% {
    opacity: 0;
    top: 25%;
  }
  15% {
    opacity: 1;
  }
  50% {
    top: 75%;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 35%;
  }
}
.terminal[data-estado=lendo] .term-parado {
  opacity: .3;
}
.terminal[data-estado=produto] .term-parado {
  opacity: 0;
  transform: translateY(-20px);
}
.terminal[data-estado=produto] .term-produto {
  opacity: 1;
  transform: none;
}
.term-leitor {
  width: 120px;
  height: 34px;
  margin-top: -2px;
  border-radius: 0 0 14px 14px;
  background: var(--tv-moldura-2);
  position: relative;
}
.term-leitor::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 8px;
  height: 6px;
  border-radius: 3px;
  background: var(--vermelho);
  opacity: .8;
  box-shadow: 0 0 10px rgba(214, 40, 40, .8);
}
.porque {
  background: var(--fundo);
}
.beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.beneficios li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 28px;
  border-radius: var(--r-2);
  background: var(--carta);
  border: 1px solid var(--linha);
  box-shadow: var(--sh);
  transition:
    transform .25s var(--suave),
    box-shadow .25s,
    opacity .8s var(--suave);
}
.beneficios li:hover,
html.anima .beneficios li.surge.visto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-alto);
}
.beneficios .ic,
.funcao .ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--acento-fraco);
  color: var(--acento);
  margin-bottom: 10px;
  flex: none;
}
.beneficios .ic svg,
.funcao .ic svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.beneficios b {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.beneficios li > span:last-child {
  color: var(--tinta-2);
}
.secao-funcoes {
  background: var(--carta);
}
.secao-funcoes .funcao {
  background: var(--superf);
}
.funcoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.funcao {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border-radius: var(--r-2);
  background: var(--carta);
  border: 1px solid var(--linha);
  transition: border-color .2s;
}
.funcao:hover {
  border-color: var(--acento);
}
.funcao .ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin: 0;
}
.funcao .ic svg {
  width: 22px;
  height: 22px;
}
.funcao b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}
.funcao span {
  font-size: 15px;
  color: var(--tinta-2);
}
.erps-caixa {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.erps-caixa h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--tinta-2);
}
.erps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.erp {
  padding: 8px 16px;
  border-radius: var(--r-3);
  background: var(--acento-fraco);
  color: var(--acento-forte);
  font-weight: 700;
  font-size: 15px;
}
.erp.breve {
  background: var(--carta);
  border: 1px dashed var(--linha-2);
  color: var(--tinta-3);
  font-weight: 600;
}
.erp.implantacao small {
  font-weight: 600;
  font-size: 13px;
  opacity: .8;
  margin-left: 4px;
}
.perguntas {
  background: var(--fundo);
}
.perguntas-grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}
.faq {
  display: grid;
  gap: 10px;
}
.faq details {
  border-radius: var(--r-1);
  background: var(--carta);
  border: 1px solid var(--linha);
  transition: box-shadow .2s;
}
.faq details[open] {
  box-shadow: var(--sh-alto);
  border-color: transparent;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-1);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acento-fraco) no-repeat center / 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6A7C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .25s var(--suave);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--tinta-2);
  font-size: 16px;
}
.final {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  text-align: center;
  color: var(--claro);
  background: var(--escuro);
}
.brilho-3 {
  width: 900px;
  height: 500px;
  left: 50%;
  top: -240px;
  margin-left: -450px;
  background:
    radial-gradient(
      closest-side,
      rgba(35, 80, 245, .85),
      transparent);
}
.final .cx {
  position: relative;
}
.final h2 {
  margin: 0 auto 14px;
  font-size: 46px;
}
.final p {
  font-size: 19px;
  color: var(--claro-2);
  margin: 0 0 32px;
}
.rodape {
  padding: 28px 0 40px;
  font-size: 14px;
  color: var(--tinta-3);
  background: var(--fundo);
}
.rodape .cx {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
.rodape #cRodapeMarca {
  font-weight: 800;
  color: var(--tinta-2);
}
.cta-fixo {
  display: none;
}
html.apresentar .secao,
html.apresentar .final {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
html.apresentar .secao > .cx,
html.apresentar .final > .cx {
  width: 100%;
}
html.apresentar .cta-fixo {
  display: none !important;
}
.apresentacao {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-3);
  background: rgba(10, 20, 64, .9);
  color: var(--claro);
  box-shadow: var(--sh2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.apresentacao button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--claro-4);
  color: var(--claro);
  cursor: pointer;
}
.apresentacao button:hover {
  background: var(--claro-3);
}
.apresentacao svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.apresentacao span {
  min-width: 54px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.apresentacao small {
  margin-left: 6px;
  font-size: 12px;
  color: var(--claro-2);
}
@media (max-width: 1100px) {
  .heroi-grade,
  .historia-grade,
  .setores-grade,
  .consulta-grade,
  .perguntas-grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .heroi h1 {
    font-size: 46px;
    max-width: 760px;
  }
  .heroi-visual {
    max-width: 700px;
    --tv-u: calc(min(100vw - 48px, 700px) * .86 / 54);
  }
  .sim {
    grid-template-columns: minmax(0, 1fr);
  }
  .sim-controle {
    position: static;
  }
  .setores-visual {
    --tv-u: calc((min(100vw, 1180px) - 48px - 24px) / 54);
  }
  .consulta-grade {
    gap: 40px;
  }
  .consulta-visual {
    order: 2;
  }
  .topo-nav {
    display: none;
  }
  .topo-contato {
    margin-left: auto;
  }
  .historia-grade {
    gap: 18px;
  }
  .historia h2 {
    font-size: 30px;
    margin-bottom: 14px;
  }
  .etapas li:not(.on) {
    display: none;
  }
  .etapas li {
    opacity: 1;
  }
  .etapas button {
    padding: 0;
    background: none !important;
    cursor: default;
  }
  .etapas small {
    font-size: 15px;
  }
  .etapas-barra {
    display: block;
    height: 4px;
    margin-top: 16px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
  }
  .etapas-barra i {
    display: block;
    height: 100%;
    width: calc(var(--p, 0) * 100%);
    background: var(--amarelo);
  }
  .palco-caixa {
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 60px;
  }
  .cx {
    padding: 0 16px;
  }
  .topo .cx {
    min-height: 60px;
    gap: 12px;
  }
  .topo-zap {
    display: none;
  }
  .marca {
    font-size: 19px;
  }
  .marca-tv {
    width: 28px;
    height: 28px;
  }
  .marca.logo {
    font-size: 26px;
  }
  .topo-contato {
    font-size: 13px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .marca {
    flex: none;
  }
  .secao {
    padding: 64px 0;
  }
  .secao h2,
  .final h2 {
    font-size: 29px;
  }
  .sub {
    font-size: 16px;
  }
  .cabeca-secao {
    margin-bottom: 28px;
  }
  .heroi {
    padding: 92px 0 36px;
  }
  .heroi h1 {
    font-size: 33px;
    line-height: 1.08;
  }
  .heroi-sub {
    font-size: 17px;
    margin-bottom: 22px;
  }
  .heroi-acoes .btn {
    flex: 1 1 100%;
  }
  .heroi-visual {
    --tv-u: calc((100vw - 32px) * .86 / 54);
    padding-bottom: 36px;
  }
  .inclina {
    transform: none;
  }
  .tv {
    padding: 6px;
    border-radius: 12px;
  }
  .cel {
    width: 19%;
    bottom: 0;
  }
  .numeros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
    margin-top: 40px;
    padding-top: 26px;
  }
  .numeros b {
    font-size: 36px;
  }
  .numeros li > span {
    font-size: 14px;
  }
  .historia {
    height: 400vh;
  }
  .palco-fixo {
    padding: 60px 0 76px;
  }
  .palco-caixa {
    aspect-ratio: 560 / 460;
  }
  .palco {
    left: calc(-50px * var(--escala, 1));
  }
  .historia h2 {
    font-size: 25px;
  }
  .etapas b {
    font-size: 17px;
  }
  .etapas small {
    font-size: 14px;
  }
  .etapa-n {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .sim-controle {
    position: sticky;
    top: 68px;
    z-index: 5;
    padding: 12px 14px 8px;
  }
  .sim-controle > .sim-rotulo:first-child,
  .sim-nota,
  .sim-produtos small {
    display: none;
  }
  .sim-produtos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
  }
  .sim-produtos button {
    flex-direction: column;
    gap: 2px;
    min-height: 64px;
    padding: 6px 4px;
    font-size: 11.5px;
    text-align: center;
    line-height: 1.2;
  }
  .sim-produtos .mini {
    width: 30px;
    height: 30px;
    padding: 2px;
    background: none;
  }
  .sim-rotulo {
    margin-bottom: 4px;
    font-size: 11px;
  }
  .sim-valor {
    margin-bottom: 0;
  }
  .sim-valor span {
    font-size: 34px;
  }
  .sim-valor i {
    font-size: 12px;
    padding: 3px 8px;
  }
  .sim-escala {
    font-size: 12px;
  }
  .sim-saidas {
    gap: 12px;
  }
  .sim-arte {
    border-radius: var(--r-1);
  }
  .sim-saida figcaption {
    font-size: 13px;
    margin-top: 6px;
  }
  .setores-chips {
    margin: 22px 0 24px;
  }
  .setores-chips button {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }
  .setores-visual {
    --tv-u: calc((100vw - 32px - 12px) / 54);
  }
  .setores-visual .tv {
    padding: 6px;
    border-radius: 12px;
  }
  .terminal {
    width: 260px;
  }
  .term-tela {
    height: 380px;
  }
  .term-preco {
    font-size: 64px;
  }
  .beneficios {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .beneficios li {
    padding: 24px 22px;
  }
  .funcoes {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq summary {
    font-size: 16px;
    padding: 12px 16px;
  }
  .faq details p {
    padding: 0 16px 16px;
    font-size: 15px;
  }
  .final {
    padding: 72px 0;
  }
  .final .btn {
    width: 100%;
  }
  .cta-fixo {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -8px 24px rgba(10, 20, 64, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .cta-fixo .btn {
    width: 100%;
  }
  .rodape {
    padding-bottom: 96px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  #cTv .tv-camada {
    animation: none !important;
  }
  #cTv .tv-camada:first-child {
    opacity: 1;
  }
  .heroi-visual,
  .brilho,
  .inclina {
    transform: none !important;
  }
}