/* ==========================================================================
   Página /pix-automatico/: só o que é desta página. Hero, faixa de confiança, faixas, mockups, 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.
   Vários blocos são cópias dos da /para-quem-vende/ (pages/para-quem-vende.css), com o prefixo pa- no lugar de pqv-:
   as fontes de reserva, a cena com palco e segundo elemento, a seção de tarifas e o painel "Por que confiar". Regras
   escopadas em .pa-page. Mobile first.
   ========================================================================== */

/* Com prefers-reduced-motion, o salto do "Ver como funciona" 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(.pa-page),
  body:has(.pa-page) {
    scroll-behavior: auto;
  }
}

/* Velocidade: os mockups desta página rodam 30% mais rápido que nas outras páginas de produto (o multiplicador de
   components/pagina-produto.css), como na /para-quem-vende/. Os tempos citados nos comentários deste arquivo são os de
   --mock-vel: 1. */
.pa-page {
  --mock-vel: 0.7;
}

/* ---------- Fonte de reserva enquanto a Montserrat não chega ----------
   As reservas da /para-quem-vende/ (pages/para-quem-vende.css), copiadas com os mesmos valores. 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, o que deslocaria o hero. As duas reservas 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:
   - 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.
   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;
}
*,
.pa-page .legend,
.pa-page .main-hero-pix .title,
.pa-page .main-hero-pix .description,
.pa-page .title-section,
.pa-page .produto-tag {
  font-family: "Montserrat", "Montserrat Reserva", "Montserrat Reserva Roboto", sans-serif;
}

/* Largura máxima do título, da descrição e do chip do hero no desktop. A reserva e a Montserrat quebram as linhas no
   mesmo lugar em quase toda largura de caixa, mas não em faixas estreitas; nelas a coluna de texto muda de altura
   quando a Montserrat chega e desloca o hero. Com o teto, a caixa fica sempre fora delas:
   - a descrição de 18px quebra diferente com a caixa de 480 a 483px e o título de 2,4rem, de 479 a 489px: a partir
     de 992px, os dois ficam com 476px;
   - a descrição de 20px quebra diferente com a caixa de 521 a 536px: a partir de 1200px, fica com 516px;
   - o chip quebra diferente com a caixa de 614 a 651px: a partir de 1200px, fica com 600px. */
@media (min-width: 992px) {
  .pa-page .main-hero-pix .title,
  .pa-page .main-hero-pix .description {
    max-width: 476px;
  }
}

@media (min-width: 1200px) {
  .pa-page .main-hero-pix .title {
    max-width: none;
  }
  .pa-page .main-hero-pix .description {
    max-width: 516px;
  }
  .pa-page .main-hero-pix .hero-chip {
    max-width: 600px;
  }
}

/* ---------- 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. */
.pa-page .title-section,
.pa-page .produto-titulo,
.pa-page .cta-faixa .description-section {
  text-wrap: balance;
}

/* ---------- Celular do cliente (app do banco) ----------
   A moldura do celular da home (pages/inicio.css, cena "Checkout" do Pix): navy #0B1F44, cantos arredondados, moldura
   fina e o entalhe no topo. A tela é a de um app de banco sem marca: "Seu banco", com o ícone de banco genérico do
   sprite. O conteúdo vai do topo para baixo e deixa um respiro vazio embaixo: é onde a outra peça da cena se apoia. A
   partir de 576px o celular tem a altura mínima de um celular. */
.pa-page .pa-celular {
  position: relative;
  width: 228px;
  padding: 8px;
  border-radius: 34px;
  background-color: #0B1F44;
  box-shadow: 0 24px 56px rgba(2, 30, 70, 0.22);
}
.pa-page .pa-celular-tela {
  position: relative;
  overflow: hidden;
  padding: 32px 14px 64px;
  border-radius: 26px;
  background-color: #F6F8FB;
  color: var(--color-3);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
/* main.css põe peso 600 em todo elemento; dentro do celular o peso vem do contexto, como nos mockups. */
.pa-page .pa-celular-tela * {
  font-weight: inherit;
}
.pa-page .pa-celular-tela p {
  margin: 0;
}
.pa-page .pa-celular-entalhe {
  position: absolute;
  top: 0;
  left: 50%;
  width: 84px;
  height: 20px;
  border-radius: 0 0 12px 12px;
  background-color: #0B1F44;
  transform: translateX(-50%);
}
.pa-page .pa-banco {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #E3EAF5;
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pa-page .pa-banco-icone {
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background-color: var(--color-3);
  color: #ffffff;
}
.pa-page .pa-banco-icone svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 576px) {
  .pa-page .pa-celular {
    width: 240px;
  }
  .pa-page .pa-celular-tela {
    min-height: 470px;
  }
}

/* Tela "Pagar e autorizar": quem recebe (o nome e o CNPJ da empresa e a PagHiper como instituição), o valor de hoje, o
   dos meses seguintes, a caixa da autorização e o botão. */
.pa-page .pa-autorizar {
  display: grid;
  gap: 10px;
}
.pa-page .pa-recebedor {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #E3EAF5;
  border-radius: 12px;
  background-color: #ffffff;
  color: #5B6B82;
  font-size: 0.6875rem;
}
.pa-page .pa-recebedor strong {
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pa-page .pa-autorizar-hoje {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  color: #5B6B82;
  font-size: 0.75rem;
}
.pa-page .pa-autorizar-hoje strong {
  color: var(--color-3);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}
.pa-page .pa-autorizar-depois {
  color: #5B6B82;
}
.pa-page .pa-autorizar-caixa {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #D5DEEB;
  border-radius: 10px;
  background-color: #ffffff;
  color: var(--color-3);
  font-weight: 600;
}
/* A caixa vazia (borda cinza) e, por cima dela, o preenchimento navy com o check: marcada. */
.pa-page .pa-caixa {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 2px solid #B8C4D6;
  border-radius: 5px;
  background-color: #ffffff;
}
.pa-page .pa-caixa-marca {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: var(--color-3);
  color: #ffffff;
}
.pa-page .pa-caixa-marca svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.pa-page .pa-autorizar-botao {
  display: block;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 999px;
  background-color: var(--color-3);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
}

/* O contexto fixo do mockup do Pix Automático (a academia, no hero e na linha do tempo das tentativas): um só. O
   componente troca os contextos por opacidade (pix-mock-contexto) mesmo sem .is-observado; aqui não há troca. */
.pa-page .mock-contexto {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF2F8;
  animation: none;
}

/* ---------- Abertura: o celular do cliente e a lista de meses ----------
   Duas peças: atrás, o celular do cliente na tela "Pagar e autorizar"; na frente, a lista de meses do mockup do
   Pix Automático do componente (.mock-meses), com o primeiro contexto dele fixo no alto e sem a nota "Autorizado pelo
   cliente em 12/06", e o toast "+R$ 89,90 no seu saldo" no canto de cima dela. Com a coluna estreita, o celular fica em
   cima, à esquerda, e a lista embaixo, à direita, sobre o respiro vazio do pé do celular; com 440px ou mais de coluna
   (container query na .hero-imagem), lado a lado, com a lista na altura de baixo do celular e sobre a borda direita
   dele. Até 991px o hero é o painel azul e as peças ficam abaixo do texto. */
.pa-page .hero-imagem {
  container-type: inline-size;
}
.pa-page .pa-hero-visual {
  position: relative;
  display: grid;
  max-width: 560px;
  margin: 0 auto;
}
.pa-page .pa-hero-celular {
  justify-self: start;
}
.pa-page .pa-hero-frente {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(340px, 100% - 24px);
  margin-top: -56px;
}
.pa-page .pa-hero-meses {
  max-width: none;
  box-shadow: 0 24px 64px rgba(2, 30, 70, 0.18);
}
/* O contexto em duas linhas: o nome ao lado do ícone e o valor embaixo dele. Com a coluna de 169 a 240px, as duas
   fontes quebram o nome no mesmo lugar. */
.pa-page .pa-hero-meses .mock-contexto {
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "icone nome" "icone valor";
  row-gap: 2px;
}
.pa-page .pa-hero-meses .mock-contexto-icone {
  grid-area: icone;
}
.pa-page .pa-hero-meses .mock-contexto-nome {
  grid-area: nome;
}
.pa-page .pa-hero-meses .mock-contexto-valor {
  grid-area: valor;
}
.pa-page .pa-hero-meses .mock-meses {
  margin: 0;
}
/* Gap de 10px entre a marca, o mês e o status: "Pago automaticamente" cabe numa linha a partir de 360px, como na
   reserva. */
.pa-page .pa-hero-meses .mock-meses li {
  gap: 10px;
}
.pa-page .pa-hero-meses .mock-meses li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
/* Out: a marca e o status de agendado e de pago empilhados no mesmo lugar (.mock-empilha); sem animação fica o pago.
   O agendado sai por opacidade 0, que a animação troca por 1 de uma vez (ele aparece e some girando). */
.pa-page .pa-mes-marca,
.pa-page .pa-mes-status {
  align-items: center;
}
.pa-page .pa-mes-marca .mock-marca-agenda,
.pa-page .pa-mes-status .mock-mes-status:first-child {
  opacity: 0;
}
/* Toast do saldo: no canto de cima à direita da lista, saindo dela 12px para a direita. */
.pa-page .pa-hero-toast {
  top: -20px;
  right: -12px;
  transform-origin: 100% 50%;
}

@container (min-width: 440px) {
  .pa-page .pa-hero-celular,
  .pa-page .pa-hero-frente {
    grid-area: 1 / 1;
  }
  .pa-page .pa-hero-frente {
    align-self: end;
    width: min(340px, 100% - 180px);
    margin: 0 0 -24px;
  }
}
/* De 440 a 519px de coluna (o hero de 992 a 1199px), o celular fica com a largura do celular estreito e a lista mais
   compacta, para "Pago automaticamente" caber numa linha e a lista cobrir só a borda do celular. */
@container (min-width: 440px) and (max-width: 519.98px) {
  .pa-page .pa-hero-celular {
    width: 228px;
  }
  .pa-page .pa-hero-meses .mock-corpo {
    padding: 20px;
  }
  .pa-page .pa-hero-meses .mock-mes-status {
    font-size: 0.8125rem;
  }
}

/* ---------- Abertura: animação ----------
   Loop de 6s na cena celular + lista (1s = 16,667%). Até 0,6s a caixa da autorização está vazia, o Out "agendado" e o
   toast escondido. De 0,6 a 0,9s a caixa é marcada (o preenchimento cresce do centro); de 1,2 a 1,5s o botão "Pagar e
   autorizar" afunda e volta; de 1,5 a 1,8s o Out vira: o relógio e o "agendado" giram para fora até 1,65s e o check e o
   "Pago automaticamente" giram para dentro; de 1,8 a 2,1s o toast "+R$ 89,90 no seu saldo" cresce do canto da lista.
   Tudo fica parado de 2,1 a 5,2s. De 5,2 a 5,9s a cena volta ao começo na ordem inversa: o toast encolhe (até 5,4s), o
   Out gira de volta (5,4 a 5,7s) e a caixa se esvazia (5,7 a 5,9s). Nada esmaece: o que entra e sai é giro ou escala,
   e a altura das peças não muda. Sem animação (sem JS, com prefers-reduced-motion ou pausado), a cena final: caixa
   marcada, Out pago e o toast. O loop começa nessa mesma cena, na fase parada (atraso de -2,6s): quando o JS liga a
   animação, o hero não pula da cena final para o começo, e a primeira volta começa 2,6s depois. 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
   (.pa-hero-visual) é que é observada por parts/pagina-produto.js e liga o --mock-estado. */
.pa-page .pa-hero-visual.is-visible {
  --mock-estado: running;
}

@media (prefers-reduced-motion: no-preference) {
  .pa-page .pa-hero-visual.is-observado .pa-caixa-marca {
    animation: pa-hero-caixa calc(6s * var(--mock-vel)) calc(-2.6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-hero-visual.is-observado .pa-autorizar-botao {
    animation: pa-hero-botao calc(6s * var(--mock-vel)) calc(-2.6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-hero-visual.is-observado .pa-mes-marca .mock-marca-agenda,
  .pa-page .pa-hero-visual.is-observado .pa-mes-status .mock-mes-status:first-child {
    animation: pa-hero-agendado calc(6s * var(--mock-vel)) calc(-2.6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-hero-visual.is-observado .pa-mes-marca .mock-marca-ok,
  .pa-page .pa-hero-visual.is-observado .pa-mes-status .mock-mes-status:last-child {
    animation: pa-hero-pago calc(6s * var(--mock-vel)) calc(-2.6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-hero-visual.is-observado .pa-hero-toast {
    animation: pa-hero-toast calc(6s * var(--mock-vel)) calc(-2.6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pa-hero-caixa {
  0%, 10% { transform: scale(0); animation-timing-function: ease-out; }
  15%, 95% { transform: scale(1); animation-timing-function: ease-in; }
  98.333%, 100% { transform: scale(0); }
}
@keyframes pa-hero-botao {
  0%, 20% { transform: scale(1); animation-timing-function: ease-in; }
  22.5% { transform: scale(0.96); animation-timing-function: ease-out; }
  25%, 100% { transform: scale(1); }
}
@keyframes pa-hero-agendado {
  0%, 25% { opacity: 1; transform: perspective(240px) rotateX(0deg); animation-timing-function: ease-in; }
  27.5%, 92.49% { opacity: 1; transform: perspective(240px) rotateX(90deg); }
  92.5% { opacity: 1; transform: perspective(240px) rotateX(-90deg); animation-timing-function: ease-out; }
  95%, 100% { opacity: 1; transform: perspective(240px) rotateX(0deg); }
}
@keyframes pa-hero-pago {
  0%, 27.5% { transform: perspective(240px) rotateX(-90deg); animation-timing-function: ease-out; }
  30%, 90% { transform: perspective(240px) rotateX(0deg); animation-timing-function: ease-in; }
  92.5%, 100% { transform: perspective(240px) rotateX(90deg); }
}
@keyframes pa-hero-toast {
  0%, 30% { transform: scale(0); animation-timing-function: ease-out; }
  35%, 86.667% { transform: scale(1); animation-timing-function: ease-in; }
  90%, 100% { transform: scale(0); }
}

/* ---------- Faixa de confiança ---------- */
/* Os quatro itens são frases inteiras; até 575px um embaixo do outro, como no componente. */

/* ---------- O que é ---------- */
.pa-page .pa-o-que-e-texto {
  max-width: 760px;
  margin: 0 auto 40px;
  color: var(--color-3);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}
/* Três destaques em cartões pequenos, na mesma linha a partir de 768px: o ícone no círculo do componente, o título e a
   frase. */
.pa-page .pa-destaques {
  row-gap: 16px;
  max-width: 1040px;
  margin: 0 auto 32px;
}
.pa-page .pa-destaque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 24px;
  box-shadow: none;
}
.pa-page .pa-destaque .icone {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.pa-page .pa-destaque .icone svg {
  width: 20px;
  height: 20px;
}
.pa-page .pa-destaque-titulo {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.pa-page .pa-destaque-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}
.pa-page .pa-o-que-e-nota {
  margin: 0;
  color: var(--color-3);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 992px) {
  .pa-page .pa-o-que-e-texto {
    margin-bottom: 48px;
    font-size: 1.1875rem;
  }
  .pa-page .pa-destaques {
    margin-bottom: 40px;
  }
  .pa-page .pa-o-que-e-nota {
    font-size: 1.1875rem;
  }
}

/* ---------- Faixas (como funciona, o que o cliente vê, quando o débito falha e integração) ----------
   As faixas de produto do componente (.produto, dentro de .produtos nas três primeiras: é antes da primeira delas que
   parts/pagina-produto.js põe o botão "Pausar animações"). O título é um h2 com o tamanho do título das faixas
   (.produto-titulo). O fundo alterna por classe, e não pela posição (o componente pinta as faixas ímpares): as faixas 2
   e 4 levam o #F6F9FE, e a das tarifas, logo depois da terceira, fica separada dela pelo fundo. */
.pa-page .produto:nth-of-type(n) {
  background-color: transparent;
}
.pa-page .produto.pa-faixa-clara {
  background-color: #F6F9FE;
}
.pa-page .pa-faixa .produto-titulo {
  margin-bottom: 24px;
}
/* Listas das faixas: cada item com um marcador verde do check e o começo em negrito. */
.pa-page .pa-lista {
  display: grid;
  gap: 16px;
  margin: 0;
}
.pa-page .pa-lista li {
  position: relative;
  padding-left: 32px;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.pa-page .pa-lista li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(36, 209, 122, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6B3E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pa-page .pa-lista strong {
  font-weight: 700;
}

@media (min-width: 992px) {
  .pa-page .pa-lista li {
    font-size: 1.0625rem;
  }
}

/* Como funciona: os três passos do mini-fluxo do componente um embaixo do outro, com o traço vertical ligando os
   ícones (como a /para-quem-vende/ abaixo de 768px), o número e o título do passo em negrito e o texto embaixo. O passo 2,
   o da cena ao lado, fica em destaque: o ícone no azul e o fundo claro. */
.pa-page .pa-fluxo {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin: 0;
}
.pa-page .pa-fluxo::before {
  content: none;
}
.pa-page .pa-fluxo li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  text-align: left;
}
.pa-page .pa-fluxo .mini-fluxo-icone {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
}
.pa-page .pa-fluxo .mini-fluxo-icone svg {
  width: 24px;
  height: 24px;
}
.pa-page .pa-fluxo li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: -28px;
  left: 24px;
  border-left: 1px solid #C9D6EA;
}
.pa-page .pa-fluxo .mini-fluxo-rotulo {
  padding-top: 2px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.pa-page .pa-fluxo-texto {
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.pa-page .pa-fluxo-destaque .mini-fluxo-icone {
  border-color: var(--color-1);
  background-color: var(--color-1);
  color: #ffffff;
}

@media (min-width: 992px) {
  .pa-page .pa-fluxo .mini-fluxo-rotulo {
    font-size: 1.1875rem;
  }
  .pa-page .pa-fluxo-texto {
    font-size: 1.0625rem;
  }
}

/* ---------- Cenas das faixas ----------
   Como nas faixas da /para-quem-vende/: cada mockup fica numa .pa-cena, o contêiner aria-hidden, com o palco atrás e o
   segundo elemento por cima. O palco é um painel de raio 32px no degradê #EEF4FE → branco a 160°, com um brilho radial
   (azul ou verde), deslocado 24px para baixo e para a direita; é um elemento, e não um ::before da cena, porque as
   ferramentas de contraste tomam um pseudo-elemento com fundo pelo fundo de todo texto de dentro. A cena tem 24px a
   menos que a coluna e anda 12px para a esquerda, para o conjunto ficar centrado sem passar da coluna. A cena é que é
   observada por parts/pagina-produto.js e liga o --mock-estado; o mockup de dentro herda o dela. A coluna da cena é um
   contêiner (container query): as cenas de duas peças ficam uma sobre a outra na coluna estreita e lado a lado na
   larga. */
.pa-page .pa-faixa .produto-visual {
  container-type: inline-size;
}
.pa-page .pa-cena {
  position: relative;
  left: -12px;
  isolation: isolate;
  width: calc(100% - 24px);
  max-width: 440px;
  margin: 0 auto;
}
.pa-page .pa-cena.is-visible {
  --mock-estado: running;
}
.pa-page .pa-cena .mock-tela {
  max-width: none;
}
/* O mockup tem a sua camada (z-index 0) por cima do palco: as ferramentas de contraste só ordenam o palco (z-index -1)
   abaixo do texto do mockup quando o mockup também é posicionado. */
.pa-page .pa-cena > .mock-tela,
.pa-page .pa-cena > .pa-celular {
  position: relative;
  z-index: 0;
}
.pa-page .pa-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(--pa-brilho, rgba(8, 96, 219, 0.12)), transparent 70%),
    linear-gradient(160deg, #EEF4FE, #ffffff);
}
.pa-page .pa-cena-menu .pa-palco,
.pa-page .pa-cena-falha .pa-palco {
  --pa-brilho: rgba(36, 209, 122, 0.12);
}

@media (min-width: 1200px) {
  .pa-page .pa-cena {
    max-width: 520px;
  }
}

/* Toast: cartão branco com sombra e o check verde dos mockups, sobre um canto do mockup e saindo um pouco dele. */
.pa-page .pa-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;
}
.pa-page .pa-toast .mock-marca-ok {
  flex-basis: 24px;
}
/* Notificação de celular: o ícone do app no lugar do check redondo. */
.pa-page .pa-toast-celular {
  max-width: min(300px, calc(100% - 24px));
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
}
.pa-page .pa-toast-app,
.pa-page .pa-toast-icone {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--color-3);
  color: #ffffff;
}
.pa-page .pa-toast-icone {
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pa-page .pa-toast-app svg,
.pa-page .pa-toast-icone svg {
  width: 16px;
  height: 16px;
}

/* Como funciona, passo 2: a cobrança Pix com o QR Code na tela do lojista e, ao lado, o celular do cliente em "Pagar e
   autorizar", na frente dela. Na coluna estreita, o celular fica embaixo, à direita, sobre o respiro do pé da cobrança;
   com 464px ou mais de coluna, ao lado dela, abaixo do cabeçalho e longe do QR. O badge de espera e o de pago ficam
   empilhados; sem animação fica o pago. */
.pa-page .pa-cena-passo2 {
  display: grid;
}
/* margin 0: o .mock-tela do componente se centra com margin auto, o que tiraria a cobrança do canto da cena. */
.pa-page .pa-qr-tela {
  justify-self: start;
  width: min(300px, 100% - 24px);
  margin: 0;
}
/* O badge fica embaixo do título, à esquerda: no cabeçalho, ao lado do título, o lugar do "Aguardando pagamento" não
   cabe na largura da cobrança. */
.pa-page .pa-qr-tela .mock-cabecalho {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}
.pa-page .pa-qr-tela .pa-qr-status {
  justify-items: start;
  margin-left: 0;
}
.pa-page .pa-qr-tela .pa-qr-status .mock-badge {
  justify-self: start;
}
.pa-page .pa-qr-status .mock-badge-espera {
  opacity: 0;
}
.pa-page .pa-qr-tela .mock-qrcode {
  margin-bottom: 0;
}
.pa-page .pa-passo2-celular {
  justify-self: end;
  margin: -32px -12px 0 0;
}

@container (min-width: 464px) {
  .pa-page .pa-qr-tela,
  .pa-page .pa-passo2-celular {
    grid-area: 1 / 1;
    align-self: start;
  }
  .pa-page .pa-qr-tela {
    width: calc(100% - 204px);
  }
  .pa-page .pa-passo2-celular {
    margin: 104px -12px 0 0;
  }
}

/* Passo 2, loop de 6s (1s = 16,667%): a caixa do celular é marcada de 0,8 a 1,1s, o botão afunda e volta de 1,4 a
   1,7s, e o badge da cobrança vira de "Aguardando pagamento" para "Pago" de 1,7 a 2s (o de espera gira para fora até
   1,85s e o de pago para dentro). Tudo fica parado até 5,2s; a volta é inversa: o badge gira de volta de 5,2 a 5,5s e a
   caixa se esvazia de 5,6 a 5,8s. */
@media (prefers-reduced-motion: no-preference) {
  .pa-page .pa-cena-passo2.is-observado .pa-caixa-marca {
    animation: pa-passo2-caixa calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-passo2.is-observado .pa-autorizar-botao {
    animation: pa-passo2-botao calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-passo2.is-observado .pa-qr-status .mock-badge-espera {
    animation: pa-passo2-espera calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-passo2.is-observado .pa-qr-status .mock-badge-ok {
    animation: pa-passo2-pago calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pa-passo2-caixa {
  0%, 13.333% { transform: scale(0); animation-timing-function: ease-out; }
  18.333%, 93.333% { transform: scale(1); animation-timing-function: ease-in; }
  96.667%, 100% { transform: scale(0); }
}
@keyframes pa-passo2-botao {
  0%, 23.333% { transform: scale(1); animation-timing-function: ease-in; }
  25.833% { transform: scale(0.96); animation-timing-function: ease-out; }
  28.333%, 100% { transform: scale(1); }
}
@keyframes pa-passo2-espera {
  0%, 28.333% { opacity: 1; transform: perspective(240px) rotateX(0deg); animation-timing-function: ease-in; }
  30.833%, 89.16% { opacity: 1; transform: perspective(240px) rotateX(90deg); }
  89.167% { opacity: 1; transform: perspective(240px) rotateX(-90deg); animation-timing-function: ease-out; }
  91.667%, 100% { opacity: 1; transform: perspective(240px) rotateX(0deg); }
}
@keyframes pa-passo2-pago {
  0%, 30.833% { transform: perspective(240px) rotateX(-90deg); animation-timing-function: ease-out; }
  33.333%, 86.667% { transform: perspective(240px) rotateX(0deg); animation-timing-function: ease-in; }
  89.167%, 100% { transform: perspective(240px) rotateX(90deg); }
}

/* O que o cliente vê: o celular no menu "Pix Automático" do app, com a autorização ativa, o próximo débito e o
   histórico, e a notificação do débito agendado sobre o pé do celular, que fica vazio, saindo dele para a direita. Este
   celular tem 256px em toda largura, mais que os outros, para cada débito caber numa linha com o marcador. O pé vazio
   é o padding de baixo da tela: a notificação (duas linhas em toda largura) fica a 28px da base do celular e a 21px da
   última linha. */
.pa-page .pa-cena-menu .pa-menu-celular {
  width: 256px;
  margin: 0 auto;
}
.pa-page .pa-menu-celular .pa-celular-tela {
  padding-bottom: 100px;
}
.pa-page .pa-menu-titulo {
  margin-bottom: 14px !important;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
}
.pa-page .pa-menu-secao {
  margin-bottom: 8px !important;
  color: #5B6B82;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pa-page .pa-menu-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #E3EAF5;
  border-radius: 12px;
  background-color: #ffffff;
}
.pa-page .pa-menu-item .mock-contexto-icone {
  width: 32px;
  height: 32px;
}
.pa-page .pa-menu-item .mock-contexto-icone svg {
  width: 18px;
  height: 18px;
}
.pa-page .pa-menu-item-texto {
  display: grid;
  gap: 2px;
  color: #5B6B82;
  font-size: 0.6875rem;
}
.pa-page .pa-menu-item-texto strong {
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pa-page .pa-menu-item,
.pa-page .pa-menu-lista:not(:last-child) {
  margin-bottom: 14px;
}
/* Próximo débito e histórico: um débito por linha, no traço do item da autorização (borda, raio e fundo), com o
   marcador da lista de meses do componente: o relógio no agendado e o check no pago. */
.pa-page .pa-menu-lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pa-page .pa-menu-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #E3EAF5;
  border-radius: 12px;
  background-color: #ffffff;
  color: #5B6B82;
  font-size: 0.6875rem;
}
.pa-page .pa-menu-linha strong {
  color: var(--color-3);
  font-weight: 700;
}
/* Abaixo de 320px de tela, o teto da largura da notificação não desce com a cena: fica nos 224px que ela tem a 320px.
   Com o teto de 100% - 24px, a 280px ela ia a quatro linhas e cobria o histórico. */
.pa-page .pa-cena-menu .pa-toast-celular {
  right: -12px;
  bottom: 28px;
  max-width: min(300px, max(calc(100% - 24px), 224px));
}

/* Loop de 6s (1s = 16,667%): a notificação desce de 0,8 a 1,1s (um corte que abre de cima para baixo e 8px de
   deslocamento, sem esmaecer), fica até 4,6s e sobe de 4,6 a 4,8s. Parada (sem JS, com prefers-reduced-motion ou
   pausado), fica visível. */
@media (prefers-reduced-motion: no-preference) {
  .pa-page .pa-cena-menu.is-observado .pa-toast-celular {
    animation: pa-menu-notificacao calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pa-menu-notificacao {
  0%, 13.333% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); transform: translateY(-8px); }
  18.333%, 76.667% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
  80%, 100% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); transform: translateY(-8px); }
}

/* Quando o débito falha: a linha do tempo da régua de notificação do componente (.mock-notificacoes-regua e
   .mock-notificacoes-item: marcador, traço até o próximo, data, rótulo e detalhe), com o contexto fixo no alto. A falha
   tem o marcador âmbar dos badges de espera; as novas tentativas, o azul dos canais da régua; o pago, o verde. Abaixo
   da tela, a alternativa do link de pagamento. */
.pa-page .pa-falha-tela .mock-notificacoes-regua {
  row-gap: 16px;
}
.pa-page .pa-marca-alerta,
.pa-page .pa-marca-tentativa {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.pa-page .pa-marca-alerta {
  background-color: #FFF4D6;
  color: #8A5A00;
}
.pa-page .pa-marca-alerta svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.pa-page .pa-marca-tentativa {
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pa-page .pa-marca-tentativa svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}
.pa-page .pa-tentativa-falha .mock-notificacoes-rotulo {
  color: #8A5A00;
}
.pa-page .pa-cena-falha .pa-toast-alternativa {
  position: relative;
  max-width: none;
  margin: -20px 12px 0 auto;
  width: fit-content;
}

/* Loop de 7s (1s = 14,286%): o trilho (marcadores e traços) fica sempre no lugar, e os textos de cada passo abrem da
   esquerda para a direita, como os da régua da /para-quem-vende/: a falha de 0,4 a 0,7s, as novas tentativas de 1,2 a
   1,5s e de 2 a 2,3s, e o pago de 2,8 a 3,1s; a alternativa do link entra de 3,4 a 3,7s. Tudo fica até 6,2s e fecha
   junto de 6,2 a 6,5s. Parado, a linha do tempo completa. */
@media (prefers-reduced-motion: no-preference) {
  .pa-page .pa-cena-falha.is-observado .mock-notificacoes-item:nth-child(1) > span:not(:first-child) {
    animation: pa-falha-passo1 calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-falha.is-observado .mock-notificacoes-item:nth-child(2) > span:not(:first-child) {
    animation: pa-falha-passo2 calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-falha.is-observado .mock-notificacoes-item:nth-child(3) > span:not(:first-child) {
    animation: pa-falha-passo3 calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-falha.is-observado .mock-notificacoes-item:nth-child(4) > span:not(:first-child) {
    animation: pa-falha-passo4 calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-falha.is-observado .pa-toast-alternativa {
    animation: pa-falha-alternativa calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pa-falha-passo1 {
  0%, 5.714% { visibility: hidden; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  10%, 88.571% { visibility: visible; clip-path: inset(0 0 0 0); transform: translateY(0); }
  92.857%, 100% { visibility: hidden; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
@keyframes pa-falha-passo2 {
  0%, 17.143% { visibility: hidden; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  21.429%, 88.571% { visibility: visible; clip-path: inset(0 0 0 0); transform: translateY(0); }
  92.857%, 100% { visibility: hidden; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
@keyframes pa-falha-passo3 {
  0%, 28.571% { visibility: hidden; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  32.857%, 88.571% { visibility: visible; clip-path: inset(0 0 0 0); transform: translateY(0); }
  92.857%, 100% { visibility: hidden; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
@keyframes pa-falha-passo4 {
  0%, 40% { visibility: hidden; clip-path: inset(0 100% 0 0); transform: translateY(6px); }
  44.286%, 88.571% { visibility: visible; clip-path: inset(0 0 0 0); transform: translateY(0); }
  92.857%, 100% { visibility: hidden; clip-path: inset(0 0 0 100%); transform: translateY(0); }
}
@keyframes pa-falha-alternativa {
  0%, 48.571% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); }
  52.857%, 88.571% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
  92.857%, 100% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); transform: translateY(0); }
}

/* Integração: a lista de notificações do sistema (o rótulo em negrito, o valor e a hora) e, embaixo dela, à direita,
   as plataformas em chips, sobre o respiro do pé da tela. */
.pa-page .pa-notificacoes {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pa-page .pa-notificacoes li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #EEF2F8;
}
.pa-page .pa-notificacoes li:last-child {
  border-bottom: 0;
}
.pa-page .pa-marca-autorizacao {
  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);
}
.pa-page .pa-marca-autorizacao svg {
  width: 14px;
  height: 14px;
}
.pa-page .pa-notificacao-texto {
  display: grid;
  gap: 1px;
  color: #5B6B82;
  font-size: 0.8125rem;
}
.pa-page .pa-notificacao-texto strong {
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 700;
}
.pa-page .pa-notificacao-hora {
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pa-page .pa-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: -18px -12px 0 0;
  padding: 0;
  list-style: none;
}
.pa-page .pa-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  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;
}

/* Loop de 6s (1s = 16,667%): as notificações chegam da mais antiga para a mais nova, de baixo para cima (06:02 de 0,4 a
   0,7s, 06:04 de 1 a 1,3s e 14:32 de 1,6 a 1,9s), cada uma abrindo da esquerda para a direita; os chips entram da
   direita, de 0,3 em 0,3s, a partir de 2,2s. Tudo fica até 5,4s e fecha junto de 5,4 a 5,7s. Parada, a lista
   completa com os chips. */
@media (prefers-reduced-motion: no-preference) {
  .pa-page .pa-cena-notificacoes.is-observado .pa-notificacoes li:nth-child(3) {
    animation: pa-notificacao1 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-notificacoes.is-observado .pa-notificacoes li:nth-child(2) {
    animation: pa-notificacao2 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-notificacoes.is-observado .pa-notificacoes li:nth-child(1) {
    animation: pa-notificacao3 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-notificacoes.is-observado .pa-chip:nth-child(1) {
    animation: pa-chip1 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-notificacoes.is-observado .pa-chip:nth-child(2) {
    animation: pa-chip2 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-cena-notificacoes.is-observado .pa-chip:nth-child(3) {
    animation: pa-chip3 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pa-notificacao1 {
  0%, 6.667% { visibility: hidden; clip-path: inset(0 100% 0 0); }
  11.667%, 90% { visibility: visible; clip-path: inset(0 0 0 0); }
  95%, 100% { visibility: hidden; clip-path: inset(0 0 0 100%); }
}
@keyframes pa-notificacao2 {
  0%, 16.667% { visibility: hidden; clip-path: inset(0 100% 0 0); }
  21.667%, 90% { visibility: visible; clip-path: inset(0 0 0 0); }
  95%, 100% { visibility: hidden; clip-path: inset(0 0 0 100%); }
}
@keyframes pa-notificacao3 {
  0%, 26.667% { visibility: hidden; clip-path: inset(0 100% 0 0); }
  31.667%, 90% { visibility: visible; clip-path: inset(0 0 0 0); }
  95%, 100% { visibility: hidden; clip-path: inset(0 0 0 100%); }
}
@keyframes pa-chip1 {
  0%, 36.667% { visibility: hidden; clip-path: inset(-56px -56px -56px calc(100% + 56px)); transform: translateX(-8px); }
  41.667%, 90% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateX(0); }
  95%, 100% { visibility: hidden; clip-path: inset(-56px calc(100% + 56px) -56px -56px); transform: translateX(0); }
}
@keyframes pa-chip2 {
  0%, 41.667% { visibility: hidden; clip-path: inset(-56px -56px -56px calc(100% + 56px)); transform: translateX(-8px); }
  46.667%, 90% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateX(0); }
  95%, 100% { visibility: hidden; clip-path: inset(-56px calc(100% + 56px) -56px -56px); transform: translateX(0); }
}
@keyframes pa-chip3 {
  0%, 46.667% { visibility: hidden; clip-path: inset(-56px -56px -56px calc(100% + 56px)); transform: translateX(-8px); }
  51.667%, 90% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateX(0); }
  95%, 100% { visibility: hidden; clip-path: inset(-56px calc(100% + 56px) -56px -56px); transform: translateX(0); }
}
.pa-page .pa-canais {
  display: grid;
  gap: 20px;
  margin: 0 0 24px;
}
.pa-page .pa-canal-titulo {
  margin: 0 0 4px;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.pa-page .pa-canal-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ---------- Tarifas (#tarifas) ----------
   A seção de tarifas da /para-quem-vende/, com um cartão só: largura total no azul-claro #EEF4FE, título e subtítulo
   centralizados, o preço num cartão branco com o filete azul no alto, o exemplo do mês num mockup, o que não é cobrado
   em pílulas e o fecho. */
.pa-page .pa-tarifas {
  padding-bottom: 72px;
  background-color: #EEF4FE;
}
.pa-page .pa-tarifas .description-section {
  margin-bottom: 40px;
}
/* O filete no alto é um ::before no fluxo, recortado pelos cantos do cartão: absoluto, as ferramentas de contraste o
   tomariam pelo fundo do texto do cartão. */
.pa-page .pa-preco {
  overflow: hidden;
  max-width: 440px;
  margin: 0 auto 48px;
  padding: 0 24px 28px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 12px 40px rgba(2, 30, 70, 0.08);
  text-align: center;
}
.pa-page .pa-preco::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 -24px 28px;
  background-color: var(--color-1);
}
.pa-page .pa-preco-valor {
  margin: 0;
  color: var(--color-3);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.pa-page .pa-preco-unidade {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.pa-page .pa-preco-detalhe {
  margin: 12px 0 0;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}

/* Exemplo do mês: um mockup como os das faixas (moldura e total de components/pagina-produto.css), mas sem
   aria-hidden. Cada linha tem o item, a conta e o valor; as dos que não custam nada ficam com o fundo verde. */
.pa-page .pa-exemplo {
  max-width: 560px;
  margin: 0 auto 48px;
}
.pa-page .pa-exemplo-tela {
  max-width: none;
}
.pa-page .pa-exemplo-titulo {
  margin: 0 0 8px;
  line-height: 1.4;
}
.pa-page .pa-exemplo-conteudo {
  position: relative;
}
.pa-page .pa-exemplo-linhas {
  margin: 0;
}
.pa-page .pa-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;
}
.pa-page .pa-exemplo-item {
  color: var(--color-3);
  font-weight: 600;
}
.pa-page .pa-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. */
.pa-page .pa-exemplo-valor {
  display: inline-grid;
  justify-items: end;
  color: var(--color-3);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.pa-page .pa-exemplo-valor > span {
  grid-area: 1 / 1;
}
.pa-page .pa-exemplo-valor > span:not(:last-child) {
  opacity: 0;
}
.pa-page .pa-exemplo-linhas .pa-exemplo-zero {
  border-bottom-color: transparent;
  border-radius: 12px;
  background-color: rgba(36, 209, 122, 0.12);
}
.pa-page .pa-exemplo-linhas .pa-exemplo-zero + .pa-exemplo-zero {
  margin-top: 4px;
}
.pa-page .pa-exemplo-total {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #D5DEEB;
}
.pa-page .pa-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. */
.pa-page .pa-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). */
.pa-page .pa-tarifas-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 880px;
  margin: 0 auto 40px;
}
.pa-page .pa-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;
}
.pa-page .pa-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;
}
.pa-page .pa-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: 992px) {
  .pa-page .pa-tarifas {
    padding-bottom: 112px;
  }
  .pa-page .pa-tarifas .description-section {
    margin-bottom: 48px;
  }
  .pa-page .pa-preco {
    padding: 0 36px 36px;
  }
  .pa-page .pa-preco::before {
    margin: 0 -36px 36px;
  }
  .pa-page .pa-preco-valor {
    font-size: 3.25rem;
  }
  .pa-page .pa-tarifas-fecho {
    font-size: 1.5rem;
  }
}

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

/* Exemplo do mês: loop de 6s (1s = 16,667%), como o da /para-quem-vende/. 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; as duas
   que não custam nada já têm o fundo verde e o corte o mostra. O valor dos débitos aprovados conta com a técnica do
   .mock-timer, trocando por opacidade em degraus secos (step-end) de 0,2s, de 0,6 a 1,2s: R$ 0,00, 29,70, 59,40,
   89,10 e 118,80 (de 30 em 30 débitos). 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) {
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-linhas li:nth-child(1) {
    animation: pa-exemplo-linha1 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-linhas li:nth-child(2) {
    animation: pa-exemplo-linha2 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-linhas li:nth-child(3) {
    animation: pa-exemplo-linha3 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-total {
    animation: pa-exemplo-total calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-valor > span:nth-child(1) {
    animation: pa-exemplo-v1 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-valor > span:nth-child(2) {
    animation: pa-exemplo-v2 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-valor > span:nth-child(3) {
    animation: pa-exemplo-v3 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-valor > span:nth-child(4) {
    animation: pa-exemplo-v4 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-valor > span:nth-child(5) {
    animation: pa-exemplo-v5 calc(6s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .pa-page .pa-exemplo-tela.is-observado .pa-exemplo-conteudo::after {
    animation: pa-exemplo-veu calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pa-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 pa-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 pa-exemplo-linha3 {
  0%, 16.667% { clip-path: inset(0 100% 0 0); }
  21.667%, 88.333% { clip-path: inset(0 0 0 0); }
  88.4%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes pa-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 pa-exemplo-v1 {
  0%, 9.9% { opacity: 1; }
  10%, 89.9% { opacity: 0; }
  90%, 100% { opacity: 1; }
}
@keyframes pa-exemplo-v2 {
  0%, 9.9% { opacity: 0; }
  10%, 13.233% { opacity: 1; }
  13.333%, 100% { opacity: 0; }
}
@keyframes pa-exemplo-v3 {
  0%, 13.233% { opacity: 0; }
  13.333%, 16.567% { opacity: 1; }
  16.667%, 100% { opacity: 0; }
}
@keyframes pa-exemplo-v4 {
  0%, 16.567% { opacity: 0; }
  16.667%, 19.9% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@keyframes pa-exemplo-v5 {
  0%, 19.9% { opacity: 0; }
  20%, 89.9% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes pa-exemplo-veu {
  0%, 83.333% { opacity: 0; visibility: hidden; }
  88.333%, 90% { opacity: 1; visibility: visible; }
  95%, 100% { opacity: 0; visibility: hidden; }
}

/* ---------- Para quem é ----------
   Seis cartões com o ícone num círculo de 40px (o desenho com 20px), o título e a frase, na aparência dos perfis da
   /para-quem-vende/. Não são botões: no hover de verdade (@media (hover: hover)) o cartão sobe 2px, com sombra e
   borda azul, e não há foco nem cursor de link. Transições de 150ms, desligadas com prefers-reduced-motion. */
.pa-page .pa-perfis {
  row-gap: 16px;
  margin: 0 0 32px;
}
.pa-page .pa-perfil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 24px;
  box-shadow: none;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}
.pa-page .pa-perfil .icone {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.pa-page .pa-perfil .icone svg {
  width: 20px;
  height: 20px;
}
.pa-page .pa-perfil-titulo {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.pa-page .pa-perfil-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}
@media (hover: hover) {
  .pa-page .pa-perfil:hover {
    border-color: var(--color-1);
    box-shadow: 0 8px 24px rgba(2, 30, 70, 0.10);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pa-page .pa-perfil {
    transition: none;
  }
}
.pa-page .pa-para-quem-nota {
  margin: 0;
  color: var(--color-3);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 992px) {
  .pa-page .pa-para-quem .title-section {
    margin-bottom: 48px;
  }
  .pa-page .pa-perfis {
    margin-bottom: 40px;
  }
}

/* ---------- Comparação ----------
   O .comparativo do boleto (pages/boleto.css): tabela de verdade (caption, thead, tbody, scope), num contêiner que
   rola no celular e recebe foco pelo teclado. Com quatro colunas, a largura mínima passa a 680px. A coluna do Pix
   Automático fica destacada: o cabeçalho no azul com o texto branco, as células no azul-claro e um contorno azul de
   2px em volta da coluna (bordas laterais nas células e as pontas no cabeçalho e na última linha). */
.pa-page .pa-comparacao .title-section {
  margin-bottom: 32px;
}
.pa-page .pa-comparativo-rolagem {
  max-width: 960px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid #E3EAF5;
  border-radius: 16px;
  background-color: #ffffff;
}
.pa-page .pa-comparativo-rolagem:focus-visible {
  outline: 3px solid var(--color-3);
  outline-offset: 3px;
}
.pa-page .pa-comparativo {
  width: 100%;
  min-width: 680px;
  margin: 0;
  border-collapse: collapse;
  color: var(--color-3);
  font-size: 1rem;
  line-height: 1.4;
}
.pa-page .pa-comparativo th,
.pa-page .pa-comparativo td {
  padding: 16px 20px;
  border-bottom: 1px solid #E3EAF5;
  text-align: left;
  vertical-align: top;
}
.pa-page .pa-comparativo tbody tr:last-child th,
.pa-page .pa-comparativo tbody tr:last-child td {
  border-bottom: 0;
}
.pa-page .pa-comparativo thead th {
  background-color: #F4F8FF;
  color: #064AAB;
  font-size: 1.125rem;
  font-weight: 700;
}
.pa-page .pa-comparativo thead td {
  background-color: #F4F8FF;
}
.pa-page .pa-comparativo tbody th {
  width: 25%;
  color: #5B6B82;
  font-weight: 600;
}
.pa-page .pa-comparativo td {
  font-weight: 500;
}
.pa-page .pa-comparativo .pa-comparativo-destaque {
  border-right: 2px solid var(--color-1);
  border-left: 2px solid var(--color-1);
  background-color: #EEF4FE;
  font-weight: 700;
}
.pa-page .pa-comparativo thead .pa-comparativo-destaque {
  background-color: var(--color-1);
  color: #ffffff;
}
.pa-page .pa-comparativo-nota {
  max-width: 760px;
  margin: 24px auto 0;
  color: #5B6B82;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 992px) {
  .pa-page .pa-comparacao .title-section {
    margin-bottom: 48px;
  }
  .pa-page .pa-comparativo {
    font-size: 1.0625rem;
  }
  .pa-page .pa-comparativo th,
  .pa-page .pa-comparativo td {
    padding: 20px 24px;
  }
}

/* ---------- Habilitação (#habilitacao): painel claro ----------
   O painel claro arredondado do componente (.produto-painel: fundo #EEF4FE, raio 24px e respiros), com o título, o
   texto centralizado, o requisito do CNPJ numa linha própria em destaque, dentro da mesma frase (sem repetir o texto),
   e os dois botões. */
.pa-page .pa-painel {
  padding: 56px 24px;
  border-radius: 24px;
  background-color: #EEF4FE;
  text-align: center;
}
.pa-page .pa-painel .title-section {
  margin: 0 0 24px;
}
.pa-page .pa-habilitacao-texto {
  max-width: 720px;
  margin: 0 auto 16px;
  color: var(--color-3);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}
.pa-page .pa-requisito {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 6px 16px 6px 8px;
  border: 1px solid var(--color-1);
  border-radius: 16px;
  background-color: #ffffff;
  color: var(--color-3);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.pa-page .pa-requisito svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background-color: var(--color-1);
  color: #ffffff;
  stroke-width: 3;
}
.pa-page .pa-painel .botoes {
  justify-content: center;
  margin-top: 32px;
}

@media (min-width: 992px) {
  .pa-page .pa-painel {
    padding: 80px 64px;
  }
  .pa-page .pa-habilitacao-texto {
    font-size: 1.1875rem;
  }
}

/* ---------- Por que confiar (#por-que-confiar): painel escuro ----------
   Cópia do painel da /para-quem-vende/ (pages/para-quem-vende.css), com o prefixo pa-: degradê a 160° do navy #0B1F44
   para o --color-3, com um brilho do --color-1 a 28% no canto de cima à direita, raio de 24px como o painel claro da
   habilitação. 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. */
.pa-page .pa-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;
}
.pa-page .pa-confianca-topo {
  row-gap: 32px;
}
.pa-page .pa-painel-escuro .title-section {
  max-width: 880px;
  margin: 0;
  color: #ffffff;
}
/* Selo: cartão branco com o escudo (#pa-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. */
.pa-page .pa-selo {
  padding: 32px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 16px 40px rgba(2, 30, 70, 0.28);
  color: var(--color-3);
}
.pa-page .pa-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);
}
.pa-page .pa-selo-icone svg {
  width: 24px;
  height: 24px;
}
.pa-page .pa-selo-titulo {
  margin: 0 0 8px;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}
.pa-page .pa-selo-razao {
  margin: 0 0 24px;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}
.pa-page .pa-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;
}
.pa-page .pa-selo-link:hover {
  background-color: #EEF4FE;
  color: var(--color-1);
  text-decoration: none;
}
.pa-page .pa-selo-link:focus-visible {
  outline: 3px solid var(--color-3) !important;
  outline-offset: 3px;
}
.pa-page .pa-selo-link svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.pa-page .pa-numeros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 40px 0 0;
}
.pa-page .pa-numeros li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
.pa-page .pa-numeros strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.pa-page .pa-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) {
  .pa-page .pa-numeros {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 24px;
  }
  .pa-page .pa-numeros strong {
    font-size: 2rem;
  }
}

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

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

@media (min-width: 1025px) {
  .pa-page .pa-painel .title-section,
  .pa-page .pa-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, e o selo com menos respiro. */
@media (max-width: 575.98px) {
  .pa-page .pa-painel,
  .pa-page .pa-painel-escuro {
    padding: 40px 20px;
  }
  .pa-page .pa-painel .title-section,
  .pa-page .pa-painel-escuro .title-section {
    font-size: 1.625rem !important;
    line-height: 1.25 !important;
  }
  .pa-page .pa-selo {
    padding: 24px;
  }
}

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

/* ---------- Faixa final ---------- */
/* Os dois botões da faixa final ficam centralizados (o componente já centraliza .cta-faixa .botoes). */