/* ==========================================================================
   Página /para-quem-vende/: só o que é desta página. Hero, faixa de confiança, perfis, faixas de produto, mockups,
   depoimentos, FAQ e faixa final vêm de components/pagina-produto.css (e os títulos de seção também de
   pages/home.css), carregados antes deste arquivo. Regras escopadas em .pqv-page. Mobile first.
   ========================================================================== */

/* Com prefers-reduced-motion, o salto do "Ver tarifas" não rola animado: o main.css põe scroll-behavior: smooth no
   html e no body do site todo (mesma solução de pages/contato.css). */
@media (prefers-reduced-motion: reduce) {
  html:has(.pqv-page),
  body:has(.pqv-page) {
    scroll-behavior: auto;
  }
}

/* Velocidade: os mockups desta página e as animações dela rodam 30% mais rápido que nas outras páginas de produto
   (o multiplicador de components/pagina-produto.css). Os tempos citados nos comentários deste arquivo são os de
   --mock-vel: 1. */
.pqv-page {
  --mock-vel: 0.7;
}

/* ---------- Fonte de reserva enquanto a Montserrat não chega ----------
   A Montserrat vem do Google Fonts com display=swap: até ela chegar, o texto aparece na fonte de reserva e, quando ela
   chega, muda de largura e de altura de linha. No hero isso mudava a altura da coluna de texto e deslocava o mockup.
   As duas reservas abaixo têm as métricas verticais da Montserrat (ascendente 0,968, descendente 0,251, entrelinha 0,
   divididas pelo size-adjust) e a largura dela, com uma regra por peso usado na página:
   - Montserrat Reserva: a Arial, ou a Helvetica, ou as fontes com as mesmas larguras (Liberation Sans, Arimo e Nimbus
     Sans);
   - Montserrat Reserva Roboto: a Roboto, para o Android, que não tem nenhuma das anteriores.
   Assim as linhas quebram nos mesmos lugares e a troca não desloca o hero. O unicode-range é o do bloco latino da
   Montserrat: o que ela não tem continua no sans-serif. Com a Montserrat carregada, nenhuma reserva é usada.
   O main.css põe a pilha da Montserrat em *, e cinco seletores a repetem; aqui ela vai com as reservas no meio. */
@font-face {
  font-family: "Montserrat Reserva";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("LiberationSans-Regular"),
    local("Arimo"), local("Arimo-Regular"), local("Nimbus Sans"), local("NimbusSans-Regular");
  size-adjust: 111.5%;
  ascent-override: 86.82%;
  descent-override: 22.51%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("LiberationSans-Regular"),
    local("Arimo"), local("Arimo-Regular"), local("Nimbus Sans"), local("NimbusSans-Regular");
  size-adjust: 109.5%;
  ascent-override: 88.4%;
  descent-override: 22.92%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"),
    local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"),
    local("Nimbus Sans Bold"), local("NimbusSans-Bold");
  size-adjust: 105.86%;
  ascent-override: 91.44%;
  descent-override: 23.71%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"),
    local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"),
    local("Nimbus Sans Bold"), local("NimbusSans-Bold");
  size-adjust: 109.76%;
  ascent-override: 88.19%;
  descent-override: 22.87%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva";
  font-style: normal;
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"),
    local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"),
    local("Nimbus Sans Bold"), local("NimbusSans-Bold");
  size-adjust: 110.56%;
  ascent-override: 87.55%;
  descent-override: 22.7%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 111.6%;
  ascent-override: 86.74%;
  descent-override: 22.49%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva Roboto";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium");
  size-adjust: 106.5%;
  ascent-override: 90.89%;
  descent-override: 23.57%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva Roboto";
  font-style: normal;
  font-weight: 600;
  src: local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 111.72%;
  ascent-override: 86.65%;
  descent-override: 22.47%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva Roboto";
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 116%;
  ascent-override: 83.45%;
  descent-override: 21.64%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Reserva Roboto";
  font-style: normal;
  font-weight: 800;
  src: local("Roboto Black"), local("Roboto-Black");
  size-adjust: 115.42%;
  ascent-override: 83.87%;
  descent-override: 21.75%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*,
.pqv-page .legend,
.pqv-page .main-hero-pix .title,
.pqv-page .main-hero-pix .description,
.pqv-page .title-section,
.pqv-page .produto-tag {
  font-family: "Montserrat", "Montserrat Reserva", "Montserrat Reserva Roboto", sans-serif;
}

/* ---------- Abertura: o pagamento confirmado caindo no saldo ----------
   Duas peças de mockup montadas com a moldura, o badge, o valor e a lista de components/pagina-produto.css: a cobrança
   Pix atrás e, sobre o canto de baixo à direita, o saldo com a entrada nova em destaque (a animação vem logo abaixo).
   Até 991px o hero é o painel azul e as peças ficam abaixo do texto. */
.pqv-page .pqv-hero-visual {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
/* O detalhe verde das outras páginas de produto no canto da imagem do hero (.hero-imagem picture::before), a partir
   de 1200px. Lá ele fica na frente da foto; aqui fica atrás das peças, para não cobrir o texto do mockup. */
.pqv-page .pqv-hero-visual::before {
  display: none;
  content: url("../../images/bg-banner-left.png");
  position: absolute;
  top: -40px;
  left: -40px;
}
.pqv-page .pqv-hero-visual .mock-tela {
  position: relative;
  z-index: 1;
  max-width: none;
}
.pqv-page .pqv-hero-cobranca {
  width: 88%;
  margin: 0;
}
/* Os 32px que o saldo sobrepõe ficam vazios: a linha "Confirmado às 14:32" não é coberta. */
.pqv-page .pqv-hero-cobranca .mock-corpo {
  padding-bottom: 52px;
}
.pqv-page .pqv-hero-saldo {
  width: 88%;
  margin: -32px 0 0 auto;
  box-shadow: 0 24px 64px rgba(2, 30, 70, 0.18);
}
.pqv-page .pqv-hero-saldo .mock-valor {
  margin-bottom: 8px;
}
/* O extrato é uma grade de linhas iguais (a maior manda) e esconde o que passa dele: na animação abaixo, as linhas
   sobem uma altura e a de cima fica escondida. O respiro de 12px dos lados é o da entrada nova, que sai da coluna. */
.pqv-page .pqv-hero-extrato {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  overflow: hidden;
  margin: 0 -12px;
  padding: 0 12px;
}
.pqv-page .pqv-hero-extrato li:last-child {
  border-bottom: 0;
}
.pqv-page .pqv-hero-entrada {
  margin-left: auto;
  color: #0B6B3E;
  font-weight: 700;
  white-space: nowrap;
}
/* Entrada nova: o verde das marcas de pago, com a linha estendida até 12px para fora da coluna. Três classes para
   passar a .mock-meses li de components/pagina-produto.css. */
.pqv-page .pqv-hero-extrato .pqv-hero-novo {
  margin: 0 -12px;
  padding-right: 12px;
  padding-left: 12px;
  border-bottom-color: transparent;
  border-radius: 12px;
  background-color: rgba(36, 209, 122, 0.12);
}

@media (min-width: 992px) {
  .pqv-page .pqv-hero-visual {
    max-width: 540px;
  }
}

@media (min-width: 1200px) {
  .pqv-page .pqv-hero-visual::before {
    display: block;
  }
}

/* ---------- Abertura: animação ----------
   Loop de 7s na cena cobrança + saldo (1s = 14,286%). Até 1,6s a cobrança está em "Aguardando pagamento", sem o
   "Confirmado às 14:32", e o saldo em R$ 2.268,50, só com as duas entradas antigas. De 1,6 a 2s o badge vira (o de
   espera gira para fora até 1,8s e o de confirmado gira para dentro) e o "Confirmado às 14:32" aparece e desliza para
   o lugar. De 2,2 a 3s a entrada nova desce para o topo do extrato e empurra as outras, enquanto o saldo conta até
   R$ 2.418,40 em degraus de 0,2s, trocando por opacidade como o .mock-timer (2.268,50, 2.305,00, 2.350,00, 2.395,00 e
   2.418,40). O extrato reserva a linha desde o começo: as três linhas ficam uma altura acima (a de cima, escondida
   sobre ele) e descem juntas. Tudo fica parado de 3 a 6,2s. De 6,2 a 7s a cena volta ao começo por esmaecimento: um
   véu branco (.pqv-hero-veu) cobre o que muda (6,2 a 6,55s), tudo volta ao começo por baixo dele (6,6s) e ele sai
   (6,65 a 7s). O texto nunca fica semitransparente: o que entra e sai é giro ou deslocamento, a troca de valor é um
   degrau seco de opacidade (step-end: sem os quadros intermediários que o 0,1% entre dois keyframes teria) e o
   esmaecimento é o do véu. A altura das duas peças não muda em nenhum momento.
   Sem animação (sem JS, com prefers-reduced-motion ou pausado), a cena final: confirmado, entrada nova no extrato e
   R$ 2.418,40. O loop começa nessa mesma cena, na fase parada (atraso de -3s): quando o JS liga a animação, o hero não
   pula da cena final para o começo, e a primeira volta só começa depois de 3,2s parados.
   Só transform e opacity, que o navegador anima fora da thread principal (o hero está na tela na carga da página).
   A cena inteira (.pqv-hero-visual) é que é observada por parts/pagina-produto.js e liga o --mock-estado; as duas
   peças, também observadas como .mock-tela, herdam o dela em vez de ligar o próprio, para não andarem fora de passo. */
.pqv-page .pqv-hero-visual.is-visible {
  --mock-estado: running;
}
.pqv-page .pqv-hero-visual .mock-tela.is-visible {
  --mock-estado: inherit;
}
.pqv-page .pqv-hero-status,
.pqv-page .pqv-hero-cobranca .mock-confirmado,
.pqv-page .pqv-hero-saldo-muda {
  position: relative;
}
.pqv-page .pqv-hero-status .mock-badge-espera {
  opacity: 0;
}
.pqv-page .pqv-hero-conta {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
}
.pqv-page .pqv-hero-conta > span {
  grid-area: 1 / 1;
}
.pqv-page .pqv-hero-conta > span:not(:last-child) {
  opacity: 0;
}
/* Véu da volta ao começo: um por trecho que muda (o badge, a linha do "Confirmado" e o saldo com o extrato). É um
   elemento, e não um pseudo-elemento: com opacidade 0 as ferramentas de contraste não o contam por cima do texto. */
.pqv-page .pqv-hero-veu {
  position: absolute;
  z-index: 1;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-status .mock-badge-espera {
    animation: pqv-hero-espera calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-status .mock-badge-ok {
    animation: pqv-hero-ok calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-cobranca .mock-confirmado {
    animation: pqv-hero-confirmado calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-extrato li {
    animation: pqv-hero-extrato calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-conta > span:nth-child(1) {
    animation: pqv-hero-saldo1 calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-conta > span:nth-child(2) {
    animation: pqv-hero-saldo2 calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-conta > span:nth-child(3) {
    animation: pqv-hero-saldo3 calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-conta > span:nth-child(4) {
    animation: pqv-hero-saldo4 calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-conta > span:nth-child(5) {
    animation: pqv-hero-saldo5 calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-hero-visual.is-observado .pqv-hero-veu {
    animation: pqv-hero-veu calc(7s * var(--mock-vel)) calc(-3s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pqv-hero-espera {
  0%, 22.857% { opacity: 1; transform: perspective(240px) rotateX(0deg); animation-timing-function: ease-in; }
  25.714%, 94.229% { opacity: 1; transform: perspective(240px) rotateX(90deg); }
  94.286%, 100% { opacity: 1; transform: perspective(240px) rotateX(0deg); }
}
@keyframes pqv-hero-ok {
  0%, 25.714% { transform: perspective(240px) rotateX(-90deg); animation-timing-function: ease-out; }
  28.571%, 94.229% { transform: perspective(240px) rotateX(0deg); }
  94.286%, 100% { transform: perspective(240px) rotateX(-90deg); }
}
@keyframes pqv-hero-confirmado {
  0%, 22.857% { opacity: 0; transform: translateX(-8px); animation-timing-function: step-end; }
  22.9% { opacity: 1; transform: translateX(-8px); animation-timing-function: ease-out; }
  28.571%, 94.229% { opacity: 1; transform: translateX(0); animation-timing-function: step-end; }
  94.286%, 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes pqv-hero-extrato {
  0%, 31.429% { transform: translateY(-100%); animation-timing-function: ease-in-out; }
  42.857%, 94.229% { transform: translateY(0); }
  94.286%, 100% { transform: translateY(-100%); }
}
@keyframes pqv-hero-saldo1 {
  0%, 34.186% { opacity: 1; }
  34.286%, 94.229% { opacity: 0; }
  94.286%, 100% { opacity: 1; }
}
@keyframes pqv-hero-saldo2 {
  0%, 34.186% { opacity: 0; }
  34.286%, 37.043% { opacity: 1; }
  37.143%, 100% { opacity: 0; }
}
@keyframes pqv-hero-saldo3 {
  0%, 37.043% { opacity: 0; }
  37.143%, 39.9% { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@keyframes pqv-hero-saldo4 {
  0%, 39.9% { opacity: 0; }
  40%, 42.757% { opacity: 1; }
  42.857%, 100% { opacity: 0; }
}
@keyframes pqv-hero-saldo5 {
  0%, 42.757% { opacity: 0; }
  42.857%, 94.229% { opacity: 1; }
  94.286%, 100% { opacity: 0; }
}
@keyframes pqv-hero-veu {
  0%, 88.571% { opacity: 0; }
  93.571%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Títulos ---------- */
/* Títulos, o texto da faixa final e os títulos dos painéis quebram em linhas equilibradas, sem palavra sozinha na
   última linha. */
.pqv-page .title-section,
.pqv-page .cta-faixa .description-section {
  text-wrap: balance;
}

/* ---------- Tarifas (#tarifas) ----------
   Seção de largura total no azul-claro do painel dos três passos (#EEF4FE): título e subtítulo centralizados, os dois
   preços em cartões brancos lado a lado, o exemplo do mês num mockup, o que não é cobrado em pílulas e o fecho. */
.pqv-page .pqv-tarifas {
  padding-bottom: 72px;
  background-color: #EEF4FE;
}
.pqv-page .pqv-tarifas .description-section {
  margin-bottom: 40px;
}
/* Os cartões dividem as linhas da grade (subgrid): o "a partir de" do boleto fica numa linha que, no cartão do Pix,
   está vazia, e os dois números ficam na mesma altura. Um embaixo do outro, cada cartão tem as suas linhas e a do
   Pix fica sem altura. O filete do produto no alto (Pix em --color-1, boleto em --color-3) é um ::before no fluxo,
   na primeira linha, recortado pelos cantos do cartão: absoluto, as ferramentas de contraste o tomariam pelo fundo do
   texto do cartão e deixariam o contraste como "incompleto". */
.pqv-page .pqv-precos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 0 auto 48px;
}
.pqv-page .pqv-preco {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  overflow: hidden;
  padding: 32px 24px 28px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 12px 40px rgba(2, 30, 70, 0.08);
  text-align: left;
}
.pqv-page .pqv-preco::before {
  content: "";
  grid-area: 1 / 1;
  align-self: start;
  height: 4px;
  margin: -32px -24px 0;
  background-color: var(--color-1);
}
.pqv-page .pqv-preco-boleto::before {
  background-color: var(--color-3);
}
.pqv-page .pqv-preco-icone {
  grid-area: 1 / 1;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}
.pqv-page .pqv-preco-prefixo {
  grid-row: 2;
  align-self: end;
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.pqv-page .pqv-preco-valor {
  grid-row: 3;
  margin: 0;
  color: var(--color-3);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.pqv-page .pqv-preco-unidade {
  grid-row: 4;
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.pqv-page .pqv-preco-detalhe {
  grid-row: 5;
  margin: 12px 0 0;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Exemplo do mês: um mockup como os das faixas (moldura e lista de components/pagina-produto.css), mas sem
   aria-hidden. Cada linha tem o item, a conta e o valor; a dos não pagos fica com o fundo verde das entradas novas. */
.pqv-page .pqv-exemplo {
  max-width: 560px;
  margin: 0 auto 48px;
}
.pqv-page .pqv-exemplo-tela {
  max-width: none;
}
.pqv-page .pqv-exemplo-titulo {
  margin: 0 0 8px;
  line-height: 1.4;
}
.pqv-page .pqv-exemplo-conteudo {
  position: relative;
}
.pqv-page .pqv-exemplo-linhas {
  margin: 0;
}
.pqv-page .pqv-exemplo-linhas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(4.5rem, auto);
  align-items: baseline;
  column-gap: 12px;
  margin: 0 -12px;
  padding: 12px;
  border-bottom: 1px solid #EEF2F8;
}
.pqv-page .pqv-exemplo-item {
  color: var(--color-3);
  font-weight: 600;
}
.pqv-page .pqv-exemplo-conta {
  color: #5B6B82;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Valor: os da contagem empilhados na mesma célula, como o .mock-timer; sem animação fica só o último. */
.pqv-page .pqv-exemplo-valor {
  display: inline-grid;
  justify-items: end;
  color: var(--color-3);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.pqv-page .pqv-exemplo-valor > span {
  grid-area: 1 / 1;
}
.pqv-page .pqv-exemplo-valor > span:not(:last-child) {
  opacity: 0;
}
.pqv-page .pqv-exemplo-linhas .pqv-exemplo-zero {
  border-bottom-color: transparent;
  border-radius: 12px;
  background-color: rgba(36, 209, 122, 0.12);
}
.pqv-page .pqv-exemplo-total {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #D5DEEB;
}
.pqv-page .pqv-exemplo-nota {
  margin: 12px 0 0;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
/* Véu da volta ao começo (ver a animação abaixo): sem animação fica escondido. */
.pqv-page .pqv-exemplo-conteudo::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  bottom: 0;
  left: -12px;
  background-color: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* O que não é cobrado: pílulas brancas com o check verde, centralizadas, que quebram naturalmente (sem media query).
   Uma pílula só quebra o texto por dentro quando sozinha não cabe na largura (a mais longa, abaixo de uns 350px); o
     no HTML deixa uma quebra só, "Sem tarifa de / cancelamento ou baixa", e o check acompanha a primeira linha. */
.pqv-page .pqv-tarifas-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 40px;
}
.pqv-page .pqv-tarifas-lista li {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.pqv-page .pqv-tarifas-lista svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 0.5px;
  padding: 3px;
  border-radius: 50%;
  background-color: rgba(36, 209, 122, 0.16);
  color: #0B6B3E;
  stroke-width: 3;
}
.pqv-page .pqv-tarifas-fecho {
  margin: 0;
  color: var(--color-3);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 576px) {
  .pqv-page .pqv-precos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 992px) {
  .pqv-page .pqv-tarifas {
    padding-bottom: 112px;
  }
  .pqv-page .pqv-tarifas .description-section {
    margin-bottom: 48px;
  }
  .pqv-page .pqv-preco {
    padding: 40px 36px 36px;
  }
  .pqv-page .pqv-preco::before {
    margin: -40px -36px 0;
  }
  .pqv-page .pqv-preco-valor {
    font-size: 3.25rem;
  }
  .pqv-page .pqv-tarifas-fecho {
    font-size: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .pqv-page .pqv-preco-valor {
    font-size: 3.5rem;
  }
}

/* Exemplo do mês: loop de 6s (1s = 16,667%). As linhas entram uma a uma, de 0,4 em 0,4s, por um corte que abre da
   esquerda para a direita (0,2 a 0,5s, 0,6 a 0,9s e 1 a 1,3s), sem esmaecer o texto; a dos não pagos ganha o fundo
   verde enquanto entra. Os valores contam com a técnica do .mock-timer, trocando por opacidade em degraus secos
   (step-end) de 0,2s:
   os boletos de 0,6 a 1,2s (R$ 0,00, 3,98, 7,96, 11,94 e 13,93, de dois em dois boletos) e o Pix 0,4s depois (R$
   0,00, 2,97, 5,94, 7,92 e 8,91). O total entra por último, de 1,8 a 2,1s. Tudo fica parado até 5s; de 5 a 5,3s um
   véu branco cobre as linhas, que voltam ao começo por baixo dele, e sai de 5,4 a 5,7s. Sem animação (sem JS, com
   prefers-reduced-motion ou pausado), o exemplo fica completo. Depende de parts/pagina-produto.js (.is-observado). */
@media (prefers-reduced-motion: no-preference) {
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-linhas li:nth-child(1) {
    animation: pqv-exemplo-linha1 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-linhas li:nth-child(2) {
    animation: pqv-exemplo-linha2 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-linhas .pqv-exemplo-zero {
    animation: pqv-exemplo-linha3 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-total {
    animation: pqv-exemplo-total calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-valor > span:nth-child(1) {
    animation: pqv-exemplo-v1 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-valor > span:nth-child(2) {
    animation: pqv-exemplo-v2 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-valor > span:nth-child(3) {
    animation: pqv-exemplo-v3 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-valor > span:nth-child(4) {
    animation: pqv-exemplo-v4 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-valor > span:nth-child(5) {
    animation: pqv-exemplo-v5 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  /* O Pix conta 0,4s depois dos boletos: a volta ao primeiro valor cai aos 5,8s, com a linha ainda escondida. */
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-linhas li:nth-child(2) .pqv-exemplo-valor > span {
    animation-delay: calc(-5.6s * var(--mock-vel));
  }
  .pqv-page .pqv-exemplo-tela.is-observado .pqv-exemplo-conteudo::after {
    animation: pqv-exemplo-veu calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pqv-exemplo-linha1 {
  0%, 3.333% { clip-path: inset(0 100% 0 0); }
  8.333%, 88.333% { clip-path: inset(0 0 0 0); }
  88.4%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pqv-exemplo-linha2 {
  0%, 10% { clip-path: inset(0 100% 0 0); }
  15%, 88.333% { clip-path: inset(0 0 0 0); }
  88.4%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pqv-exemplo-linha3 {
  0%, 16.667% { clip-path: inset(0 100% 0 0); background-color: rgba(36, 209, 122, 0); }
  21.667%, 88.333% { clip-path: inset(0 0 0 0); background-color: rgba(36, 209, 122, 0.12); }
  88.4%, 100% { clip-path: inset(0 100% 0 0); background-color: rgba(36, 209, 122, 0); }
}
@keyframes pqv-exemplo-total {
  0%, 30% { clip-path: inset(0 100% 0 0); }
  35%, 88.333% { clip-path: inset(0 0 0 0); }
  88.4%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pqv-exemplo-v1 {
  0%, 9.9% { opacity: 1; }
  10%, 89.9% { opacity: 0; }
  90%, 100% { opacity: 1; }
}
@keyframes pqv-exemplo-v2 {
  0%, 9.9% { opacity: 0; }
  10%, 13.233% { opacity: 1; }
  13.333%, 100% { opacity: 0; }
}
@keyframes pqv-exemplo-v3 {
  0%, 13.233% { opacity: 0; }
  13.333%, 16.567% { opacity: 1; }
  16.667%, 100% { opacity: 0; }
}
@keyframes pqv-exemplo-v4 {
  0%, 16.567% { opacity: 0; }
  16.667%, 19.9% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@keyframes pqv-exemplo-v5 {
  0%, 19.9% { opacity: 0; }
  20%, 89.9% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes pqv-exemplo-veu {
  0%, 83.333% { opacity: 0; visibility: hidden; }
  88.333%, 90% { opacity: 1; visibility: visible; }
  95%, 100% { opacity: 0; visibility: hidden; }
}

/* ---------- Perfis ("Como você cobra?") ----------
   Só a aparência dos botões de components/pagina-produto.css, sem mudar o markup nem o JS. O ícone fica num círculo
   de 40px (o desenho com 20px, a proporção do de 48/24). No hover e no foco de teclado o botão sobe 2px, com sombra e
   borda azul. O ativo (aria-pressed="true", que parts/pagina-produto.js põe junto com o .active) ganha fundo #EEF4FE
   e o círculo do ícone azul com o traço branco; sem cor, ele continua distinto pela borda dupla (a borda mais o anel
   de 1px do componente, que também fica no hover e no foco) e pelo check no canto. O hover só vale onde existe
   hover de verdade: no toque ele gruda, e um perfil desmarcado com outro toque ficaria com a borda azul e a sombra,
   parecendo ativo. Transições de 150ms, desligadas com prefers-reduced-motion. */
.pqv-page .perfis .perfil-item {
  transition: transform 150ms, box-shadow 150ms, border-color 150ms, background-color 150ms;
}
.pqv-page .perfis .icone {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  transition: background-color 150ms, color 150ms;
}
.pqv-page .perfis .icone svg {
  width: 20px;
  height: 20px;
}
.pqv-page .perfis .perfil-item:focus-visible {
  border-color: var(--color-1);
  box-shadow: 0 8px 24px rgba(2, 30, 70, 0.10);
  transform: translateY(-2px);
}
.pqv-page .perfis .perfil-item[aria-pressed="true"] {
  border-color: var(--color-1);
  background-color: #EEF4FE;
}
.pqv-page .perfis .perfil-item[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-1), 0 8px 24px rgba(2, 30, 70, 0.10);
}
.pqv-page .perfis .perfil-item[aria-pressed="true"] .icone {
  background-color: var(--color-1);
  color: #ffffff;
}
@media (hover: hover) {
  .pqv-page .perfis .perfil-item:hover {
    border-color: var(--color-1);
    box-shadow: 0 8px 24px rgba(2, 30, 70, 0.10);
    transform: translateY(-2px);
  }
  .pqv-page .perfis .perfil-item[aria-pressed="true"]:hover {
    box-shadow: inset 0 0 0 1px var(--color-1), 0 8px 24px rgba(2, 30, 70, 0.10);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pqv-page .perfis .perfil-item,
  .pqv-page .perfis .icone {
    transition: none;
  }
}

/* ---------- Faixas de produto: a cena ----------
   Cada mockup fica numa .pqv-cena, o contêiner aria-hidden, com o palco atrás e o segundo elemento da faixa por
   cima. O palco é um painel de raio 32px no degradê #EEF4FE → branco a 160°, com um brilho radial na cor da faixa
   (azul nas faixas 1, 3 e 5; verde nas 2, 4 e 6), do tamanho do mockup e deslocado 24px para baixo e para a direita:
   o mockup fica por cima dele. A cena tem 24px a menos que a coluna e anda 12px para a esquerda, para o conjunto
   (mockup e palco) ficar centrado sem passar da coluna. O palco é um elemento, e não um ::before da cena: as
   ferramentas de contraste tomam um pseudo-elemento com fundo pelo fundo de todo texto de dentro e deixam o contraste
   como "incompleto".
   A cena é que é observada por parts/pagina-produto.js e liga o --mock-estado; o mockup de dentro, também observado,
   herda o dela em vez de ligar o próprio, e o segundo elemento usa a duração do loop do mockup: os dois rodam e param
   juntos. */
.pqv-page .pqv-cena {
  position: relative;
  left: -12px;
  isolation: isolate;
  width: calc(100% - 24px);
  max-width: 440px;
  margin: 0 auto;
}
.pqv-page .pqv-cena.is-visible {
  --mock-estado: running;
}
.pqv-page .pqv-cena .mock-tela.is-visible,
.pqv-page .pqv-cena .split-diagrama.is-visible {
  --mock-estado: inherit;
}
.pqv-page .pqv-cena .mock-tela,
.pqv-page .pqv-cena .split-diagrama {
  max-width: none;
}
/* O mockup tem a sua camada (z-index 0) por cima do palco. Na tela o palco (z-index -1) já fica atrás, mas as
   ferramentas de contraste só o ordenam abaixo do texto do mockup quando o mockup também é posicionado; sem isso, todo
   texto dele vira "incompleto" no contraste. */
.pqv-page .pqv-cena > .mock-tela {
  position: relative;
  z-index: 0;
}
.pqv-page .pqv-cena-regua,
.pqv-page .pqv-cena-boleto {
  max-width: 520px;
}
.pqv-page .pqv-cena-split {
  max-width: 400px;
}
/* A partir de 1200px as cenas crescem (sobrava coluna vazia ao lado delas): 520px, a régua e o boleto 580px, o split
   460px; o palco acompanha. */
@media (min-width: 1200px) {
  .pqv-page .pqv-cena {
    max-width: 520px;
  }
  .pqv-page .pqv-cena-regua,
  .pqv-page .pqv-cena-boleto {
    max-width: 580px;
  }
  .pqv-page .pqv-cena-split {
    max-width: 460px;
  }
}
.pqv-page .pqv-palco {
  position: absolute;
  z-index: -1;
  top: 24px;
  right: -24px;
  bottom: -24px;
  left: 24px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 100%, var(--pqv-brilho), transparent 70%),
    linear-gradient(160deg, #EEF4FE, #ffffff);
}
.pqv-page .produto:nth-of-type(odd) .pqv-palco {
  --pqv-brilho: rgba(8, 96, 219, 0.12);
}
.pqv-page .produto:nth-of-type(even) .pqv-palco {
  --pqv-brilho: rgba(36, 209, 122, 0.12);
}

/* Toast: cartão branco com sombra e o check verde dos mockups. Fica sobre um canto do mockup e sai um pouco dele. */
.pqv-page .pqv-toast {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 14px 36px rgba(2, 30, 70, 0.18), 0 2px 6px rgba(2, 30, 70, 0.06);
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}
/* Loja virtual: no canto de baixo à esquerda. */
.pqv-page .pqv-toast-pedido {
  bottom: 20px;
  left: -12px;
}
/* SaaS: no canto de cima à direita, um por contexto, empilhados; sem animação fica só o do primeiro, como o mockup. */
.pqv-page .pqv-toasts-contexto {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: -12px;
  justify-items: end;
  max-width: calc(100% - 24px);
}
.pqv-page .pqv-toasts-contexto .pqv-toast {
  position: relative;
  max-width: none;
}
.pqv-page .pqv-toasts-contexto .pqv-toast + .pqv-toast {
  visibility: hidden;
}
/* Escolas: notificação de celular no canto de cima à direita, com o ícone de app no lugar do check redondo. */
.pqv-page .pqv-toast-celular {
  top: -20px;
  right: -12px;
  max-width: min(300px, calc(100% - 24px));
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
}
.pqv-page .pqv-toast-app {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: #0B6B3E;
  color: #ffffff;
}
.pqv-page .pqv-toast-app svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* ERPs: o cartão de código atrás do diagrama, acima dele e saindo à esquerda, na janela escura do terminal da home.
   Fica no fluxo, e o diagrama cobre os 32px de baixo dele (só o respiro): a altura acompanha as linhas. A linha longa
   quebra com recuo onde não cabe (abaixo de 992px): de preferência antes de "percent", que vai inteiro com o fim da
   linha, e nunca dentro de "sua-plataforma". */
.pqv-page .pqv-codigo {
  position: relative;
  margin: 0 0 -32px -12px;
  padding: 14px 16px 44px;
  border-radius: 16px;
  background-color: #0B1F44;
  box-shadow: 0 16px 40px rgba(2, 30, 70, 0.22);
  color: #E6EDF7;
  font-size: 11px;
  line-height: 1.6;
}
.pqv-page .pqv-codigo,
.pqv-page .pqv-codigo * {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.pqv-page .pqv-codigo-linha {
  display: block;
  padding-left: 4ch;
  text-indent: -4ch;
  white-space: pre-wrap;
}
.pqv-page .pqv-codigo-metodo {
  color: #9ECBFF;
  font-weight: 700;
}
.pqv-page .pqv-codigo-chave {
  color: #9ECBFF;
}
.pqv-page .pqv-codigo-texto,
.pqv-page .pqv-codigo-resposta {
  color: #C3E88D;
}
.pqv-page .pqv-codigo-texto {
  white-space: nowrap;
}
.pqv-page .pqv-cena-diagrama {
  position: relative;
}

/* Condomínios: a coluna de chips no canto de baixo à direita da folha, com a unidade e o estado. Com bottom -32px o
   chip de cima fica sobre o código de barras, abaixo dos números da linha digitável, e o de baixo quase todo fora da
   folha, sobre o palco. A partir de 992px a coluna sai 40px da folha; para ela não passar da coluna, a cena do boleto
   reserva esses 40px (mais estreita e 20px para a esquerda). O terceiro lugar tem dois chips empilhados (em aberto e
   pago); sem animação fica o pago. */
.pqv-page .pqv-chips {
  position: absolute;
  z-index: 2;
  right: -12px;
  bottom: -32px;
  display: grid;
  justify-items: end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pqv-page .pqv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 10px 28px rgba(2, 30, 70, 0.16), 0 2px 6px rgba(2, 30, 70, 0.06);
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.pqv-page .pqv-chip-troca {
  justify-items: end;
}
.pqv-page .pqv-chip-aberto {
  visibility: hidden;
}
.pqv-page .pqv-marca-relogio {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pqv-page .pqv-marca-relogio svg {
  width: 14px;
  height: 14px;
}

/* PDV: o aviso verde que já existe fica 40% maior (fonte, respiro e ícone) e ganha sombra. Abaixo de 375px, 20% maior:
   com 40%, a 360px ele não cabe numa linha e cobre o "Pix PDV · Caixa 02". */
.pqv-page .mock-pdv-aviso {
  gap: 8px;
  padding: 13px 22px;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(2, 30, 70, 0.22);
}
.pqv-page .mock-pdv-aviso svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 374.98px) {
  .pqv-page .mock-pdv-aviso {
    gap: 7px;
    padding: 11px 19px;
    font-size: 0.9rem;
  }
  .pqv-page .mock-pdv-aviso svg {
    width: 17px;
    height: 17px;
  }
}

/* O toast do pedido, que sai da moldura para o lado do texto, só sai mais onde a coluna tem folga, para a cena não
   encostar na coluna do texto nem passar da própria: 28px a partir de 1400px; antes disso, 12px. */
@media (min-width: 992px) {
  .pqv-page .pqv-toast-pedido {
    bottom: 28px;
  }
  .pqv-page .pqv-toasts-contexto,
  .pqv-page .pqv-toast-celular {
    right: -28px;
  }
  .pqv-page .pqv-cena-boleto {
    left: -20px;
    width: calc(100% - 40px);
  }
  .pqv-page .pqv-chips {
    right: -40px;
  }
}

@media (min-width: 1200px) {
  .pqv-page .pqv-codigo {
    margin: 0 0 -32px -40px;
    font-size: 12px;
  }
}

@media (min-width: 1400px) {
  .pqv-page .pqv-toast-pedido {
    left: -28px;
  }
}

/* Segundo elemento de cada faixa: entra no clímax do loop do mockup e sai na volta dele, com a mesma duração e o
   mesmo --mock-estado. Entra e sai por um corte que abre (e depois fecha) a caixa com a sombra, sem nunca ficar
   semitransparente; parado (sem JS, com prefers-reduced-motion ou pausado), fica visível. Tempos de --mock-vel: 1.
   - Loja virtual (loop de 5s do checkout, 1s = 20%): sobe de 3,2 a 3,5s, com o "Pagamento confirmado", e sai de 4,6
     a 4,8s, antes da volta à primeira tela.
   - SaaS (loop de 6s dos contextos, 1,5s cada): um toast por contexto, com o valor dele, que desce de 0,05 a 0,25s
     depois da troca e sai de 1,1 a 1,3s; os atrasos são os dos contextos.
   - Escolas (loop de 6s da régua, 1s = 16,667%): desce de 3,6 a 3,9s, com o "Pago", e sai de 5,3 a 5,5s.
   - Condomínios (loop próprio de 6s, porque o boleto é parado): os chips entram de 0,8 em 0,8s (0,4, 1,2 e 2s), o
     "Em aberto" vira "Pago" aos 4s (gira para fora e o pago para dentro, até 4,3s) e os três saem de 5,4 a 5,7s. */
@media (prefers-reduced-motion: no-preference) {
  .pqv-page .pqv-cena.is-observado .pqv-toast-pedido {
    animation: pqv-toast-pedido calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-cena.is-observado .pqv-toasts-contexto .pqv-toast {
    animation: pqv-toast-contexto calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-cena.is-observado .pqv-toasts-contexto .pqv-toast:nth-child(2) {
    animation-delay: calc(-4.5s * var(--mock-vel));
  }
  .pqv-page .pqv-cena.is-observado .pqv-toasts-contexto .pqv-toast:nth-child(3) {
    animation-delay: calc(-3s * var(--mock-vel));
  }
  .pqv-page .pqv-cena.is-observado .pqv-toasts-contexto .pqv-toast:nth-child(4) {
    animation-delay: calc(-1.5s * var(--mock-vel));
  }
  .pqv-page .pqv-cena.is-observado .pqv-codigo-resposta {
    animation: pqv-codigo-resposta calc(5.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-cena.is-observado .pqv-toast-celular {
    animation: pqv-toast-celular calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-cena.is-observado .pqv-chips > li:nth-child(1) {
    animation: pqv-chip1 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-cena.is-observado .pqv-chips > li:nth-child(2) {
    animation: pqv-chip2 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-cena.is-observado .pqv-chip-troca .pqv-chip-aberto {
    animation: pqv-chip3-aberto calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pqv-page .pqv-cena.is-observado .pqv-chip-troca .pqv-chip:last-child {
    animation: pqv-chip3-pago calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pqv-toast-pedido {
  0%, 64% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); }
  70%, 92% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
  96%, 100% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); transform: translateY(0); }
}
@keyframes pqv-toast-contexto {
  0%, 0.833% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); transform: translateY(-8px); }
  4.167%, 18.333% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
  21.667%, 100% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(0); }
}
@keyframes pqv-codigo-resposta {
  0%, 16.364% { visibility: hidden; clip-path: inset(0 100% 0 0); }
  21.818%, 89.091% { visibility: visible; clip-path: inset(0 0 0 0); }
  94.545%, 100% { visibility: hidden; clip-path: inset(0 100% 0 0); }
}
@keyframes pqv-toast-celular {
  0%, 60% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); transform: translateY(-8px); }
  65%, 88.333% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
  91.667%, 100% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); transform: translateY(-8px); }
}
@keyframes pqv-chip1 {
  0%, 6.667% { visibility: hidden; clip-path: inset(-56px calc(100% + 56px) -56px -56px); transform: translateX(8px); }
  11.667%, 90% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateX(0); }
  95%, 100% { visibility: hidden; clip-path: inset(-56px -56px -56px calc(100% + 56px)); transform: translateX(0); }
}
@keyframes pqv-chip2 {
  0%, 20% { visibility: hidden; clip-path: inset(-56px calc(100% + 56px) -56px -56px); transform: translateX(8px); }
  25%, 90% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateX(0); }
  95%, 100% { visibility: hidden; clip-path: inset(-56px -56px -56px calc(100% + 56px)); transform: translateX(0); }
}
@keyframes pqv-chip3-aberto {
  0%, 33.333% { visibility: hidden; clip-path: inset(-56px calc(100% + 56px) -56px -56px); transform: perspective(240px) translateX(8px) rotateX(0deg); }
  38.333%, 66.667% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: perspective(240px) translateX(0) rotateX(0deg); animation-timing-function: ease-in; }
  69.167%, 100% { visibility: hidden; clip-path: inset(-56px -56px -56px -56px); transform: perspective(240px) translateX(0) rotateX(90deg); }
}
@keyframes pqv-chip3-pago {
  0%, 69.167% { visibility: hidden; clip-path: inset(-56px -56px -56px -56px); transform: perspective(240px) rotateX(-90deg); animation-timing-function: ease-out; }
  71.667%, 90% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: perspective(240px) rotateX(0deg); }
  95%, 100% { visibility: hidden; clip-path: inset(-56px -56px -56px calc(100% + 56px)); transform: perspective(240px) rotateX(0deg); }
}

/* ---------- Mockups do componente nesta página: trocas sem esmaecer o texto ----------
   Os mockups do checkout, do Pix Automático, da régua e do PDV vêm de components/pagina-produto.css com as trocas
   por esmaecimento do componente. Fora da tela a animação para onde estiver (só roda com o mockup visível), e um mockup
   parado no meio de um esmaecimento fica com texto em contraste baixo. Aqui as mesmas trocas, nos mesmos tempos, viram
   deslocamento, giro ou corte, como no split (mais abaixo): o checkout passa de uma tela para a outra deslizando; os
   badges de espera e de confirmado giram; os contextos do Pix Automático rolam; os textos da régua abrem da esquerda
   para a direita; e o aviso verde do PDV desce (e sobe) sem esmaecer, com o carimbo crescendo. Só muda o nome das
   animações (duração, repetição e --mock-estado continuam os do componente); sem animação, cada mockup fica como no
   componente. O timer do checkout (09:59 a 09:56) continua trocando por degrau de opacidade, mas seco (step-end), sem
   os quadros intermediários que o 0,1% entre dois keyframes do componente teria. */
/* Sem JS, a cena não fica observada, e os mockups que animam mesmo sem .is-observado (checkout, contextos e PDV)
   ficam no estado sem animação, como as animações novas: parados no primeiro quadro, mostrariam a tela 1 do checkout
   sob o toast "Pedido #10482 liberado" e o PDV aguardando, com o aviso escondido. */
.pqv-page .pqv-cena:not(.is-observado) .mock-checkout *,
.pqv-page .pqv-cena:not(.is-observado) .mock-contexto,
.pqv-page .pqv-cena:not(.is-observado) .mock-pdv * {
  animation: none;
}
/* A pilha de contextos corta em cima e embaixo (para a rolagem), mas não dos lados: o valor do contexto pode encostar
   no respiro do mockup nas telas estreitas. */
.pqv-page .mock-contextos {
  clip-path: inset(0 -100vw);
}
.pqv-page .mock-checkout-tela2 .mock-empilha {
  perspective: 240px;
}

@media (prefers-reduced-motion: no-preference) {
  .pqv-page .mock-checkout-tela1 {
    animation-name: pqv-co-tela1;
  }
  .pqv-page .pqv-cena .mock-checkout-tela2 .mock-timer > span {
    animation-timing-function: step-end;
  }
  .pqv-page .mock-checkout-tela2 {
    animation-name: pqv-co-tela2;
  }
  .pqv-page .mock-checkout-tela2 .mock-badge-espera {
    animation-name: pqv-co-espera;
  }
  .pqv-page .mock-checkout-tela2 .mock-expira {
    animation-name: pqv-co-expira;
  }
  .pqv-page .mock-checkout-tela2 .mock-badge-ok {
    animation-name: pqv-co-ok;
  }
  .pqv-page .mock-contexto {
    animation-name: pqv-contexto;
  }
  .pqv-page .mock-notificacoes.is-observado .mock-notificacoes-item:nth-child(2) > span:not(:first-child) {
    animation-name: pqv-regua-item2;
  }
  .pqv-page .mock-notificacoes.is-observado .mock-notificacoes-item:nth-child(3) > span:not(:first-child) {
    animation-name: pqv-regua-item3;
  }
  .pqv-page .mock-notificacoes.is-observado .mock-notificacoes-pago > span:not(:first-child) {
    animation-name: pqv-regua-item4;
  }
  .pqv-page .mock-notificacoes.is-observado .mock-notificacoes-avisos {
    animation-name: pqv-regua-avisos;
  }
  .pqv-page .mock-pdv .mock-badge-espera {
    animation-name: pqv-pdv-espera;
  }
  .pqv-page .mock-pdv .mock-badge-ok {
    animation-name: pqv-pdv-ok;
  }
  .pqv-page .mock-pdv-aviso {
    animation-name: pqv-pdv-aviso;
  }
  .pqv-page .mock-carimbo {
    animation-name: pqv-pdv-carimbo;
  }
}

/* Checkout, loop de 5s (1s = 20%): a tela 2 entra pela direita empurrando a tela 1 de 1,45 a 1,55s e volta para a
   direita no fim (4,85 a 5s), com a tela 1 voltando pela esquerda. O badge de espera gira para fora de 3,1 a 3,2s e o
   de confirmado para dentro de 3,2 a 3,3s; o "Expira em" fecha da direita para a esquerda de 3,1 a 3,2s. */
@keyframes pqv-co-tela1 {
  0%, 29% { visibility: visible; opacity: 1; transform: translateX(0); }
  31%, 97% { visibility: hidden; opacity: 1; transform: translateX(-110%); }
  100% { visibility: visible; opacity: 1; transform: translateX(0); }
}
@keyframes pqv-co-tela2 {
  0%, 29% { visibility: hidden; opacity: 1; transform: translateX(110%); }
  31%, 97% { visibility: visible; opacity: 1; transform: translateX(0); }
  100% { visibility: hidden; opacity: 1; transform: translateX(110%); }
}
@keyframes pqv-co-espera {
  0%, 62% { visibility: visible; opacity: 1; transform: rotateX(0deg); }
  64%, 100% { visibility: hidden; opacity: 1; transform: rotateX(90deg); }
}
@keyframes pqv-co-expira {
  0%, 62% { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); }
  64%, 100% { visibility: hidden; opacity: 1; clip-path: inset(0 100% 0 0); }
}
@keyframes pqv-co-ok {
  0%, 64% { visibility: hidden; opacity: 1; transform: rotateX(-90deg); }
  66%, 100% { visibility: visible; opacity: 1; transform: rotateX(0deg); }
}
/* Contextos do Pix Automático, loop de 6s com 1,5s por contexto (os atrasos são os do componente): o contexto sai para
   cima de 1,25 a 1,5s enquanto o seguinte sobe de baixo, e fica escondido (e sem visibilidade) até a vez dele. */
@keyframes pqv-contexto {
  0%, 20.833% { visibility: visible; opacity: 1; transform: translateY(0); }
  25% { visibility: visible; opacity: 1; transform: translateY(-100%); }
  25.01% { visibility: hidden; opacity: 1; transform: translateY(-100%); }
  25.05%, 95.833% { visibility: hidden; opacity: 1; transform: translateY(100%); }
  100% { visibility: visible; opacity: 1; transform: translateY(0); }
}
/* Régua, loop de 6s (1s = 16,667%): os textos de cada passo abrem da esquerda para a direita nos mesmos tempos do
   componente (0,8 a 1,1s, 1,9 a 2,2s, 3,1 a 3,4s e os avisos de 3,4 a 3,6s) e fecham juntos de 5,6 a 5,8s. */
@keyframes pqv-regua-item2 {
  0%, 13.333% { visibility: hidden; opacity: 1; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  18.333%, 93.333% { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
  96.667%, 100% { visibility: hidden; opacity: 1; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
@keyframes pqv-regua-item3 {
  0%, 31.667% { visibility: hidden; opacity: 1; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  36.667%, 93.333% { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
  96.667%, 100% { visibility: hidden; opacity: 1; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
@keyframes pqv-regua-item4 {
  0%, 51.667% { visibility: hidden; opacity: 1; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  56.667%, 93.333% { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
  96.667%, 100% { visibility: hidden; opacity: 1; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
@keyframes pqv-regua-avisos {
  0%, 56.667% { visibility: hidden; opacity: 1; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  60%, 93.333% { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
  96.667%, 100% { visibility: hidden; opacity: 1; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
/* PDV, loop de 3,5s (1s = 28,571%): o badge de espera gira para fora de 1,4 a 1,5s e o de recebido para dentro de 1,5
   a 1,6s; o aviso desce de 1,4 a 1,6s e o carimbo cresce no mesmo tempo. Na volta (3,3 a 3,5s) o aviso sobe, o
   carimbo some e os badges giram de volta. */
@keyframes pqv-pdv-espera {
  0%, 40% { visibility: visible; opacity: 1; transform: perspective(240px) rotateX(0deg); }
  42.857%, 97.143% { visibility: hidden; opacity: 1; transform: perspective(240px) rotateX(90deg); }
  97.2% { visibility: hidden; opacity: 1; transform: perspective(240px) rotateX(-90deg); }
  100% { visibility: visible; opacity: 1; transform: perspective(240px) rotateX(0deg); }
}
@keyframes pqv-pdv-ok {
  0%, 42.857% { visibility: hidden; opacity: 1; transform: perspective(240px) rotateX(-90deg); }
  45.714%, 94.286% { visibility: visible; opacity: 1; transform: perspective(240px) rotateX(0deg); }
  97.143%, 100% { visibility: hidden; opacity: 1; transform: perspective(240px) rotateX(90deg); }
}
@keyframes pqv-pdv-aviso {
  0%, 40% { visibility: hidden; opacity: 1; transform: translateY(-100%); }
  45.714%, 94.286% { visibility: visible; opacity: 1; transform: translateY(0); }
  100% { visibility: hidden; opacity: 1; transform: translateY(-100%); }
}
@keyframes pqv-pdv-carimbo {
  0%, 40% { visibility: hidden; opacity: 0.9; transform: translate(-50%, -50%) rotate(-12deg) scale(1.4); }
  45.714%, 94.286% { visibility: visible; opacity: 0.9; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  100% { visibility: hidden; opacity: 0.9; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}

/* ---------- Faixas de produto: o split com um cenário só ----------
   O diagrama de components/pagina-produto.css, com os destinos de um ERP ou plataforma e sem a etiqueta de cenário (o
   espaço que o diagrama reserva para ela sai). O cenário fica sempre à vista, sem texto semitransparente: em vez de
   esmaecer, os destinos crescem a partir do centro e, no fim, encolhem enquanto as setas se desfazem. O loop é de 5,5s,
   mais curto que o do Pix, para a cena não ficar muito tempo parada: setas de 0,2 a 0,6s, destinos de 0,6 a 1,1s, tudo
   parado até 4,9s e desmontado até 5,3s (1s = 18,182%). Assim, o mockup parado fora da tela nunca fica com texto em
   contraste baixo.
   Sem animação (sem JS, com prefers-reduced-motion ou pausado), o diagrama fica completo. */
.pqv-page .split-diagrama {
  max-width: 400px;
  padding-top: 0;
}
.pqv-page .split-cenario {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .pqv-page .split-diagrama.is-observado .split-cenario {
    animation-name: none;
  }
  .pqv-page .split-diagrama.is-observado .split-setas path[pathLength] {
    animation-name: pqv-split-seta;
    animation-duration: calc(5.5s * var(--mock-vel));
  }
  .pqv-page .split-diagrama.is-observado .split-ponta {
    animation-name: pqv-split-ponta;
    animation-duration: calc(5.5s * var(--mock-vel));
  }
  .pqv-page .split-diagrama.is-observado .split-destinos > .split-no:nth-child(1) {
    animation-name: pqv-split-d1;
    animation-duration: calc(5.5s * var(--mock-vel));
  }
  .pqv-page .split-diagrama.is-observado .split-cenario:not(.split-cenario-tres) .split-destinos > .split-no:nth-child(2) {
    animation-name: pqv-split-d2;
    animation-duration: calc(5.5s * var(--mock-vel));
  }
}

@keyframes pqv-split-seta {
  0%, 3.636% { stroke-dashoffset: 1; }
  10.909%, 89.091% { stroke-dashoffset: 0; }
  96.364%, 100% { stroke-dashoffset: 1; }
}
@keyframes pqv-split-ponta {
  0%, 9.697% { opacity: 0; }
  10.909%, 87.879% { opacity: 1; }
  89.091%, 100% { opacity: 0; }
}
@keyframes pqv-split-d1 {
  0%, 10.909% { transform: scale(0); }
  16.364%, 89.091% { transform: scale(1); }
  94.545%, 100% { transform: scale(0); }
}
@keyframes pqv-split-d2 {
  0%, 14.545% { transform: scale(0); }
  20%, 89.091% { transform: scale(1); }
  94.545%, 100% { transform: scale(0); }
}

/* ---------- Três passos (#como-funciona) ----------
   O painel claro arredondado do componente (.produto-painel: fundo, raio e respiros) com o mini-fluxo do QR Code do Pix
   (.mini-fluxo) maior. Até 767px os passos ficam um embaixo do outro, com o traço que liga os ícones na vertical;
   a partir de 768px, lado a lado, com o traço na horizontal, como no Pix. */
.pqv-page .pqv-painel {
  padding: 56px 24px;
  border-radius: 24px;
  background-color: #EEF4FE;
}
.pqv-page .pqv-painel .title-section {
  margin: 0 0 40px;
}
.pqv-page .pqv-fluxo {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
}
.pqv-page .pqv-fluxo::before {
  content: none;
}
.pqv-page .pqv-fluxo li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  text-align: left;
}
.pqv-page .pqv-fluxo .mini-fluxo-icone {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
}
.pqv-page .pqv-fluxo .mini-fluxo-icone svg {
  width: 28px;
  height: 28px;
}
/* Traço entre um ícone e o próximo: sai de baixo do ícone e desce até o seguinte, 32px abaixo. */
.pqv-page .pqv-fluxo li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 56px;
  bottom: -32px;
  left: 28px;
  border-left: 1px solid #C9D6EA;
}
.pqv-page .pqv-fluxo .mini-fluxo-rotulo {
  font-size: 1.125rem;
  font-weight: 700;
}
.pqv-page .pqv-fluxo-texto {
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .pqv-page .pqv-fluxo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  /* O traço do .mini-fluxo, no meio dos ícones de 64px. */
  .pqv-page .pqv-fluxo::before {
    content: "";
    top: 32px;
  }
  .pqv-page .pqv-fluxo li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .pqv-page .pqv-fluxo li:not(:last-child)::after {
    content: none;
  }
  .pqv-page .pqv-fluxo .mini-fluxo-icone {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
  }
  .pqv-page .pqv-fluxo .mini-fluxo-icone svg {
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 992px) {
  .pqv-page .pqv-painel {
    padding: 96px 64px;
  }
  .pqv-page .pqv-painel .title-section {
    margin-bottom: 56px;
  }
  .pqv-page .pqv-fluxo .mini-fluxo-rotulo {
    font-size: 1.25rem;
  }
  .pqv-page .pqv-fluxo-texto {
    font-size: 1.0625rem;
  }
}

/* ---------- Por que confiar (#por-que-confiar): painel escuro ----------
   Painel arredondado como o dos três passos (24px). Em vez do azul-marinho chapado do rodapé, um degradê a 160° do navy
   #0B1F44 para o --color-3, com um brilho do --color-1 a 28% no canto de cima à direita, no espírito do palco das
   faixas: no meio da página ele não se confunde com o fim dela. A partir de 992px, o h2 fica à esquerda (7/12) e o selo
   da autorização do Banco Central à direita (5/12); abaixo dos dois, a linha dos três números na largura toda do
   painel, com filetes entre eles; no pé, o atendimento. Até 991px, um embaixo do outro, na ordem do HTML, que é a de
   leitura: h2, selo, números e atendimento. */
.pqv-page .pqv-painel-escuro {
  padding: 56px 24px;
  border-radius: 24px;
  background-color: var(--color-3);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(8, 96, 219, 0.28), transparent 60%),
    linear-gradient(160deg, #0B1F44, var(--color-3));
  color: #ffffff;
}
.pqv-page .pqv-confianca-topo {
  row-gap: 32px;
}
.pqv-page .pqv-painel-escuro .title-section {
  max-width: 880px;
  margin: 0;
  color: #ffffff;
}
/* Selo: cartão branco com o escudo (#pqv-escudo, no sprite), a autorização como h3, a razão social e a consulta no
   Banco Central como botão secundário, com a seta de link externo. */
.pqv-page .pqv-selo {
  padding: 32px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 16px 40px rgba(2, 30, 70, 0.28);
  color: var(--color-3);
}
.pqv-page .pqv-selo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pqv-page .pqv-selo-icone svg {
  width: 24px;
  height: 24px;
}
.pqv-page .pqv-selo-titulo {
  margin: 0 0 8px;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}
.pqv-page .pqv-selo-razao {
  margin: 0 0 24px;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}
.pqv-page .pqv-selo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--color-1);
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-1);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.pqv-page .pqv-selo-link:hover {
  background-color: #EEF4FE;
  color: var(--color-1);
  text-decoration: none;
}
.pqv-page .pqv-selo-link:focus-visible {
  outline: 3px solid var(--color-3) !important;
  outline-offset: 3px;
}
.pqv-page .pqv-selo-link svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.pqv-page .pqv-numeros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 40px 0 0;
}
.pqv-page .pqv-numeros li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
.pqv-page .pqv-numeros strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.pqv-page .pqv-confianca-atendimento {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Os três números lado a lado a partir de 576px; a partir de 992px, em terços da largura do painel, separados por
   filetes, a 3rem (3,5rem a partir de 1200px), sem quebrar o número. */
@media (min-width: 576px) {
  .pqv-page .pqv-numeros {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 24px;
  }
  .pqv-page .pqv-numeros strong {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .pqv-page .pqv-numeros {
    gap: 24px 48px;
  }
  .pqv-page .pqv-numeros strong {
    font-size: 2.5rem;
  }
}

@media (min-width: 992px) {
  .pqv-page .pqv-painel-escuro {
    padding: 80px 64px;
  }
  .pqv-page .pqv-confianca-topo {
    align-items: center;
  }
  .pqv-page .pqv-numeros {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 56px;
  }
  .pqv-page .pqv-numeros li + li {
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .pqv-page .pqv-numeros strong {
    font-size: 3rem;
  }
  .pqv-page .pqv-confianca-atendimento {
    margin-top: 48px;
  }
}

@media (min-width: 1025px) {
  .pqv-page .pqv-painel .title-section,
  .pqv-page .pqv-painel-escuro .title-section {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}

/* Até 575px os dois painéis ficam com menos respiro e o título deles um pouco menor que os 2rem que o main.css força
   (com !important) em todo .title-section até 1024px; os passos ficam com ícones de 48px, e o selo com menos respiro. */
@media (max-width: 575.98px) {
  .pqv-page .pqv-painel,
  .pqv-page .pqv-painel-escuro {
    padding: 40px 20px;
  }
  .pqv-page .pqv-painel .title-section,
  .pqv-page .pqv-painel-escuro .title-section {
    font-size: 1.625rem !important;
    line-height: 1.25 !important;
  }
  .pqv-page .pqv-selo {
    padding: 24px;
  }
  .pqv-page .pqv-fluxo li {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
  }
  .pqv-page .pqv-fluxo .mini-fluxo-icone {
    width: 48px;
    height: 48px;
  }
  .pqv-page .pqv-fluxo .mini-fluxo-icone svg {
    width: 24px;
    height: 24px;
  }
  .pqv-page .pqv-fluxo li:not(:last-child)::after {
    top: 48px;
    left: 24px;
  }
}

@media (min-width: 1200px) {
  .pqv-page .pqv-numeros strong {
    font-size: 3.5rem;
  }
}

/* ---------- Plataformas (#plataformas): marquee de logos em CSS ----------
   Os logos da home, na mesma ordem e com os mesmos arquivos, em duas fileiras que andam em sentidos opostos. Cada
   fileira tem a lista dos seus logos e uma cópia dela com aria-hidden: o trilho anda metade da própria largura e
   recomeça sem emenda. A base é a grade parada (3 por linha, 5 a partir de 768px), com as cópias escondidas; o
   movimento só entra com prefers-reduced-motion: no-preference e sem o "Pausar animações" ligado (pausado, a página
   fica como com prefers-reduced-motion). O marquee para com o ponteiro em cima e com o foco do teclado nele.
   Medidas dos logos copiadas de pages/inicio.css: 40px de altura visível e, nos SVGs com margem em volta da marca
   (.logo-recortado), a caixa corta a margem de cima e de baixo. */
.pqv-page .pqv-plataformas .title-section {
  margin-bottom: 32px;
}
.pqv-page .pqv-marquee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 16px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto 40px;
}
.pqv-page .pqv-marquee:focus-visible {
  outline: 3px solid var(--color-3);
  outline-offset: 8px;
}
.pqv-page .pqv-marquee-fileira,
.pqv-page .pqv-marquee-trilho,
.pqv-page .pqv-marquee-lista {
  display: contents;
}
.pqv-page .pqv-marquee-lista[aria-hidden="true"] {
  display: none;
}
.pqv-page .pqv-marquee-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pqv-page .pqv-marquee li {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.pqv-page .pqv-marquee img {
  width: auto;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
}
.pqv-page .pqv-marquee .logo-recortado {
  height: auto;
  object-fit: cover;
}
.pqv-page .pqv-marquee .logo-nuvemshop {
  width: 267px;
  aspect-ratio: 267 / 40;
}
.pqv-page .pqv-marquee .logo-vtex {
  width: 153px;
  aspect-ratio: 153 / 40;
}
.pqv-page .pqv-marquee .logo-woo {
  width: 152px;
  aspect-ratio: 152 / 40;
}
/* SVG do Shoppub: só a marca, os 111 de cima das 148 unidades de altura (embaixo há uma frase numa fonte que o
   navegador não tem). */
.pqv-page .pqv-marquee .logo-shoppub {
  width: 190px;
  height: auto;
  aspect-ratio: 528 / 111;
  object-fit: cover;
  object-position: top;
}

@media (min-width: 768px) {
  .pqv-page .pqv-marquee {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px 24px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: none;
  }
  /* As bordas das fileiras esmaecem; a máscara fica nelas e não no .pqv-marquee, para não cortar o contorno do foco. */
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee-fileira {
    display: block;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee-trilho {
    display: flex;
    width: max-content;
    animation: pqv-marquee 45s linear infinite;
  }
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee-reversa .pqv-marquee-trilho {
    animation-direction: reverse;
  }
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee:hover .pqv-marquee-trilho,
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee:focus-within .pqv-marquee-trilho {
    animation-play-state: paused;
  }
  /* Cada lista leva o espaço depois do último logo (padding), então as duas metades do trilho têm a mesma largura. */
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee-lista,
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee-lista[aria-hidden="true"] {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
  }
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee li {
    flex: 0 0 auto;
  }
  /* Teto de largura dos logos: até 767px, 128px; depois, 172px, o das colunas da grade parada. */
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee img {
    max-width: 128px;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee-lista,
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee-lista[aria-hidden="true"] {
    gap: 56px;
    padding-right: 56px;
  }
  .pqv-page:not(.animacoes-pausadas) .pqv-marquee img {
    max-width: 172px;
  }
}

@keyframes pqv-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.pqv-page .pqv-plataformas-texto {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
/* Link no meio do texto (o dev.paghiper.com): sublinhado, como os links das respostas da FAQ. */
.pqv-page .pqv-plataformas-texto a {
  color: var(--color-1);
  font-weight: 600;
  text-decoration: underline;
}
.pqv-page .pqv-plataformas-texto a:hover {
  color: #064AAB;
}
.pqv-page .pqv-plataformas-texto a:focus-visible {
  outline: 3px solid var(--color-3) !important;
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .pqv-page .pqv-plataformas .title-section {
    margin-bottom: 48px;
  }
  .pqv-page .pqv-marquee {
    margin-bottom: 48px;
  }
  .pqv-page .pqv-plataformas-texto {
    font-size: 1.125rem;
  }
}