/* ==========================================================================
   Página /split-de-pagamento/: só o que é desta página. Hero, faixa de confiança, faixas, mockups, diagrama do split,
   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 /pix-automatico/ (pages/pix-automatico.css), com o prefixo sp-
   no lugar de pa-: as fontes de reserva, a cena com palco e segundo elemento, o toast, a seção de tarifas, os cartões
   de perfil, o painel da habilitação e o painel "Por que confiar". Regras escopadas em .sp-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(.sp-page),
  body:has(.sp-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/ e na /pix-automatico/. Os tempos citados nos comentários
   deste arquivo são os de --mock-vel: 1. */
.sp-page {
  --mock-vel: 0.7;
}

/* ---------- Fonte de reserva enquanto a Montserrat não chega ----------
   As reservas da /para-quem-vende/ e da /pix-automatico/, 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;
}
*,
.sp-page .legend,
.sp-page .main-hero-pix .title,
.sp-page .main-hero-pix .description,
.sp-page .title-section,
.sp-page .produto-tag {
  font-family: "Montserrat", "Montserrat Reserva", "Montserrat Reserva Roboto", sans-serif;
}

/* Larguras máximas dos textos do hero. A reserva e a Montserrat quebram as linhas no mesmo lugar em quase toda largura
   de caixa, mas não em faixas estreitas; quando a caixa de um texto cai numa delas, a coluna muda de altura com a
   chegada da Montserrat e desloca o hero. Os tetos deixam a caixa fora dessas faixas nas telas mais usadas:
   - a tag quebra diferente com a caixa de 308 a 333px: fica com 306px;
   - a descrição de 16px quebra diferente com a caixa de 319 a 328px: fica com 318px;
   - a partir de 992px, o título de 2,4rem e a descrição de 18px ficam com 476px (quebram igual de 387 a 550px e de
     369 a 504px);
   - a partir de 1200px, a descrição de 20px fica com 470px (quebra igual de 409 a 550px) e o chip, com 600px (quebra
     igual de 438 a 747px);
   - o título de 3rem quebra diferente com a caixa de 475 a 482px: fica com 470px de 1200 a 1239px e com 520px a partir
     de 1240px;
   - a partir de 1440px, o título de 3,75rem fica com os mesmos 520px (quebra igual de 485 a 592px). */
@media (min-width: 367px) and (max-width: 376.98px) {
  .sp-page .main-hero-pix .description {
    max-width: 318px;
  }
}

@media (max-width: 381.98px) {
  .sp-page .main-hero-pix .legend {
    max-width: 306px;
  }
}

@media (min-width: 992px) {
  .sp-page .main-hero-pix .title,
  .sp-page .main-hero-pix .description {
    max-width: 476px;
  }
}

@media (min-width: 1200px) {
  .sp-page .main-hero-pix .title,
  .sp-page .main-hero-pix .description {
    max-width: 470px;
  }
  .sp-page .main-hero-pix .hero-chip {
    max-width: 600px;
  }
}

@media (min-width: 1240px) {
  .sp-page .main-hero-pix .title {
    max-width: 520px;
  }
}

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

/* ---------- Respiro ----------
   Mais espaço entre as seções que no componente: 96px no alto de cada seção (144px a partir de 992px) e 72px em cima
   e embaixo de cada faixa (128px a partir de 992px). A faixa de confiança continua encaixada na abertura, como no
   componente. */
.sp-page .secao,
.sp-page .secao-faq,
.sp-page .main-cta-servicos {
  padding-top: 96px;
}
.sp-page .produto {
  padding: 72px 0;
}

@media (min-width: 992px) {
  .sp-page .secao,
  .sp-page .secao-faq,
  .sp-page .main-cta-servicos {
    padding-top: 144px;
  }
  .sp-page .produto {
    padding: 128px 0;
  }
}

/* ---------- Abertura: o diagrama do split ----------
   O diagrama do split do componente (.split-diagrama, .split-etiqueta, .split-no, .split-origem, .split-setas e
   .split-destinos) direto sobre o azul do hero: os nós são cartões brancos com sombra, e as setas, as pontas, o
   trilho e os ramos são brancos (a cor do diagrama, que eles herdam). São seis cenários, um por público de "Para quem é",
   na ordem dos cartões (.sp-cenario; o 6, o do delivery, é o único com três destinos, .sp-cenario-tres), empilhados na
   mesma célula da grade da .sp-hero-visual (uma coluna minmax(0, 1fr), para o mais largo não alargar os outros): cada
   um encostado no alto e com a altura dele, e o conjunto com a do mais alto, que não muda quando um cenário dá lugar a
   outro. Em cada cenário, de cima para baixo: a etiqueta do público (a
   pílula branca do componente, no respiro de 36px que o componente deixa no alto do diagrama); a origem, com o check (o
   Pix confirmado), "Pix recebido", a cobrança e o valor; os destinos, cada um com o nome, o valor e uma linha de estado,
   e os parceiros também com a linha da chave; e, logo abaixo dos cartões, num pé reservado (nenhum texto embaixo), o
   toast branco do Pix enviado, alinhado à direita dos cartões (no cenário 6, os dois toasts, no mesmo lugar).
   O conjunto inteiro, com o toast, fica dentro do azul em toda largura e nos seis cenários. Até 991px o hero é o painel
   azul. A partir de 992px, a forma azul (.hero-forma) é um quarto de elipse com o centro no canto de cima à direita, com
   50% da tela até 1328px e 60% a partir de 1329px, e o conjunto fica encostado à direita da coluna, onde ela é mais
   larga. Os modos:
   - abaixo de 576px, empilhado: a origem na largura toda e os destinos um embaixo do outro, ligados a ela pelo trilho
     vertical do modo de três destinos do componente, com um ramo na altura do valor de cada um; a etiqueta à esquerda;
   - de 576 a 991px, lado a lado, com até 560px, centralizado: a etiqueta e a origem no meio, as setas curvas do
     componente redesenhadas para a largura (a ponta de cada uma no meio da coluna do destino) e os destinos em duas
     colunas, ou em três no cenário 6;
   - de 992 a 1328px, empilhado e mais compacto (ver o bloco dessa faixa): lado a lado não cabe na forma, que ali é
     estreita (a 1200px o destino da esquerda ficaria até 190px sobre o branco); de 992 a 1199px o conjunto fica no alto
     da coluna, onde a forma é mais larga;
   - a partir de 1329px, lado a lado de novo, com 540px.
   Empilhado, o cenário 6 tem um cartão a mais, e nos outros a sobra da altura reservada fica embaixo do toast; lado a
   lado, os seis têm a mesma altura.
   Os números são os do painel escuro (peso 700) nos tamanhos que cabem em cada largura com os valores mais largos, os
   do cenário 4 (o R$ 2.400,00 na origem e o R$ 2.160,00 nos destinos). A origem tem 2,5rem a partir de 360px e 3rem a
   partir de 1200px; os destinos, 2,5rem empilhados (de 375 a 575px e de 1200 a 1328px) e 2rem lado a lado (576 a 991px
   e a partir de 1329px: três colunas não cabem com 2,5rem) e de 992 a 1199px; abaixo de 375px, 2rem nos destinos e,
   abaixo de 360px, também na origem; abaixo de 320px, 1,75rem na origem e 1,5rem nos destinos.
   O componente não muda: tudo aqui é sobreposição escopada em .sp-page. A cena inteira (.sp-hero-visual) é que é
   observada por parts/pagina-produto.js; os diagramas não, e por isso a animação de cenários do componente
   (.split-diagrama.is-observado) não se aplica a eles. Os cenários não usam as classes .split-cenario e
   .split-cenario-tres do componente, que os deixariam com opacidade 0 ou com os nós compactos dele. */
.sp-page .sp-hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin: 0 auto;
}
/* --sp-pe: o pé reservado embaixo dos cartões de cada cenário, para o toast (20px de respiro e o toast de duas linhas, ou
   de três abaixo de 320px). Sem margem: as margens automáticas do diagrama do componente, num item de grade, o deixariam
   na largura do conteúdo. Sem animação, só o cenário 1 aparece. */
.sp-page .sp-cenario {
  --sp-pe: 76px;
  grid-area: 1 / 1;
  align-self: start;
  margin: 0;
  padding-bottom: var(--sp-pe);
}
.sp-page .sp-cenario + .sp-cenario {
  visibility: hidden;
}
/* --sp-origem-valor e --sp-destino-valor: tamanho do valor da origem e dos destinos; --sp-ramo: altura, a partir da
   base do destino, do meio da linha do valor (o padding de baixo, a linha de estado e meia linha do valor), onde o ramo
   do trilho chega. Os destinos terminam iguais (valor e estado), então o ramo fica na mesma altura do valor em todos. */
.sp-page .sp-diagrama {
  --sp-origem-valor: 2rem;
  --sp-destino-valor: 2rem;
  --sp-ramo: calc(14px + 0.8125rem * 1.4 + var(--sp-destino-valor) * 0.575);
  max-width: none;
  color: #ffffff;
  text-align: left;
}
/* A etiqueta do público: a pílula do componente (branca, com o texto no azul); empilhado, à esquerda, alinhada aos
   cartões. */
.sp-page .sp-diagrama .split-etiqueta {
  left: 0;
  transform: none;
}
.sp-page .sp-diagrama .split-no {
  gap: 0;
  padding: 14px 16px;
  box-shadow: 0 24px 64px rgba(2, 30, 70, 0.18);
}
.sp-page .sp-diagrama .split-origem {
  width: auto;
}
.sp-page .sp-origem-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.sp-page .sp-diagrama .split-rotulo {
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}
.sp-page .sp-diagrama .sp-detalhe,
.sp-page .sp-diagrama .sp-estado {
  color: #5B6B82;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.sp-page .sp-diagrama .sp-valor {
  color: var(--color-3);
  font-size: var(--sp-destino-valor);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.sp-page .sp-origem .sp-valor {
  margin-top: 6px;
  font-size: var(--sp-origem-valor);
}
/* Os destinos ocupam a altura toda da linha (lado a lado, a do maior) e põem o valor e o estado no pé: os valores dos
   dois ficam na mesma altura. */
.sp-page .sp-destino {
  position: relative;
  display: flex;
}
.sp-page .sp-destino > .split-no {
  flex: 1 1 auto;
}
.sp-page .sp-destino .sp-valor {
  margin-top: auto;
  padding-top: 6px;
}
/* Empilhado: sem as setas; o trilho desce da origem por trás da borda esquerda dos destinos e cada destino recebe um
   ramo na altura do valor. O trilho é um traço só, da base da origem até o último ramo. */
.sp-page .sp-diagrama .split-setas {
  display: none;
}
.sp-page .sp-diagrama .split-destinos {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-left: 30px;
}
.sp-page .sp-diagrama .split-destinos::before {
  content: "";
  position: absolute;
  top: -24px;
  bottom: calc(var(--sp-ramo) - 1px);
  left: 12px;
  border-left: 2px solid currentColor;
  transform-origin: top;
}
.sp-page .sp-destino::before {
  content: "";
  position: absolute;
  bottom: calc(var(--sp-ramo) - 1px);
  left: -16px;
  width: 16px;
  border-top: 2px solid currentColor;
  transform-origin: left;
}
/* Toast do Pix enviado: no pé reservado do cenário, 20px abaixo dos cartões, alinhado à direita deles, com largura fixa,
   para a caixa não mudar quando a Montserrat chega (encostado à direita, um toast que se ajusta ao texto anda para os
   lados com a troca da fonte). Empilhado, 300px (ou a largura do conjunto), em duas linhas, e menos de 992 a 1328px,
   onde o canto de baixo à esquerda dele é um dos pontos do conjunto mais perto da curva da forma azul; lado a lado,
   380px, em uma linha ou duas, conforme o texto (duas nos cenários 3, 4 e 5). */
.sp-page .sp-hero-toast {
  top: calc(100% - var(--sp-pe) + 20px);
  right: 0;
  width: min(300px, 100%);
}

/* Abaixo de 320px de tela, os valores descem mais um degrau, e o pé reservado cresce para o toast de três linhas. */
@media (max-width: 319.98px) {
  .sp-page .sp-cenario {
    --sp-pe: 94px;
  }
  .sp-page .sp-diagrama {
    --sp-origem-valor: 1.75rem;
    --sp-destino-valor: 1.5rem;
  }
}

@media (min-width: 360px) {
  .sp-page .sp-diagrama {
    --sp-origem-valor: 2.5rem;
  }
}

@media (min-width: 375px) {
  .sp-page .sp-diagrama {
    --sp-destino-valor: 2.5rem;
  }
}

@media (min-width: 576px) {
  .sp-page .sp-diagrama {
    --sp-destino-valor: 2rem;
  }
}

/* Lado a lado: de 576 a 991px e a partir de 1329px. */
@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1329px) {
  .sp-page .sp-hero-toast {
    width: 380px;
  }
  .sp-page .sp-diagrama {
    text-align: center;
  }
  .sp-page .sp-diagrama .split-etiqueta {
    left: 50%;
    transform: translateX(-50%);
  }
  /* A origem com 60% da largura, como no componente, ou mais, se o valor pedir. */
  .sp-page .sp-diagrama .split-origem {
    width: fit-content;
    min-width: 60%;
    margin: 0 auto;
  }
  .sp-page .sp-origem-titulo {
    justify-content: center;
  }
  /* As setas do componente, num viewBox de 500 × 72 com a ponta de cada uma a 24% e a 76% da largura, o meio das duas
     colunas (o intervalo entre elas é de 4%). O traço escala com o desenho (o componente tira o non-scaling-stroke para
     o stroke-dashoffset se desenhar): 1,75 unidade dá de 1,8 a 2px nas larguras do conjunto. */
  .sp-page .sp-diagrama .split-setas {
    display: block;
  }
  .sp-page .sp-diagrama .split-setas path {
    stroke-width: 1.75;
  }
  .sp-page .sp-diagrama .split-destinos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4%;
    margin-top: 0;
    padding-left: 0;
  }
  .sp-page .sp-diagrama .split-destinos::before,
  .sp-page .sp-destino::before {
    content: none;
  }
  /* No cenário 6, três colunas, com 8px entre elas e 8px de respiro dos lados nos nós, como os de três destinos do
     componente. A ponta das setas de fora fica a 81 e a 419 do viewBox, o meio das colunas de fora. */
  .sp-page .sp-cenario-tres .split-destinos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
  }
  .sp-page .sp-cenario-tres .sp-destino > .split-no {
    padding-right: 8px;
    padding-left: 8px;
  }
}

/* A partir de 992px, encostado à direita da coluna. */
@media (min-width: 992px) {
  .sp-page .sp-hero-visual {
    margin: 0 0 0 auto;
  }
}

/* Empilhado de 992 a 1328px, mais compacto que no celular, para o cenário 6 (a etiqueta e três cartões) caber na forma
   azul, que ali é estreita. Os nós com 8px de respiro em cima e embaixo e 14px dos lados, 8px entre os destinos e 12px
   entre a origem e o primeiro, e o toast com 280px, em duas linhas; o conjunto com 340px. De 992 a 1199px, onde o
   conjunto fica no alto da coluna, ele tem 320px e o toast, 240px (duas ou três linhas), num pé de 104px: com o
   conjunto mais alto que o texto, o hero cresce junto com ele e o pé do toast ficaria sempre 120px acima do pé do hero,
   numa altura em que a forma é estreita; o pé maior sobe o toast em relação ao pé do hero. */
@media (min-width: 992px) and (max-width: 1328.98px) {
  .sp-page .sp-hero-visual {
    max-width: 340px;
  }
  .sp-page .sp-diagrama {
    --sp-ramo: calc(8px + 0.8125rem * 1.4 + var(--sp-destino-valor) * 0.575);
  }
  .sp-page .sp-diagrama .split-no {
    padding: 8px 14px;
  }
  .sp-page .sp-diagrama .split-destinos {
    gap: 8px;
    margin-top: 12px;
  }
  .sp-page .sp-diagrama .split-destinos::before {
    top: -12px;
  }
  .sp-page .sp-hero-toast {
    width: 280px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .sp-page .hero-imagem {
    align-self: flex-start;
  }
  .sp-page .sp-hero-visual {
    max-width: 320px;
  }
  .sp-page .sp-cenario {
    --sp-pe: 104px;
  }
  .sp-page .sp-hero-toast {
    width: 240px;
  }
}

/* A partir de 1329px, lado a lado com 540px, para o destino da esquerda não encostar na curva da forma, e a origem
   com 64% da largura: com 60%, o R$ 2.400,00 de 3rem alargava o nó do cenário 4 e encostava no padding dele. */
@media (min-width: 1329px) {
  .sp-page .sp-hero-visual {
    max-width: 540px;
  }
  .sp-page .sp-diagrama .split-origem {
    min-width: 64%;
  }
}

@media (min-width: 1200px) {
  .sp-page .sp-diagrama {
    --sp-origem-valor: 3rem;
  }
}

@media (min-width: 1200px) and (max-width: 1328.98px) {
  .sp-page .sp-diagrama {
    --sp-destino-valor: 2.5rem;
  }
}

/* ---------- Abertura: animação ----------
   Um loop de 46,25s (32,4s com o --mock-vel de 0,7) que percorre os seis cenários, na ordem, e começa pelo cenário 1
   completo. Cada cenário de dois destinos tem 7,2s: monta-se (o check cresce de 0 a 0,3s, o Pix confirmado; as setas se
   desenham de 0,4 a 0,8s, ou, empilhado, o trilho desce no mesmo tempo e os ramos saem dele de 0,7 a 0,85s; os destinos
   crescem a partir da ponta da seta ou do ramo, de 0,85 a 1,15s e de 1,15 a 1,45s; e o toast sobe de 1,65 a 1,95s, por
   um corte que abre de baixo para cima e 8px de deslocamento), fica parado 4,35s (3s com o --mock-vel), desmonta-se na
   ordem inversa, um passo de cada vez (o toast desce em 0,2s, os destinos e os ramos encolhem em 0,2s, as setas e o
   trilho se desfazem em 0,2s e o check encolhe em 0,1s), e 0,2s depois um corte troca o cenário inteiro (a etiqueta, a
   origem e o resto, ainda desmontado) pelo seguinte. O cenário 6 tem 10,25s: monta também o terceiro destino (1,45 a
   1,75s), mostra o toast do Restaurante (sobe de 1,95 a 2,25s, fica 2,15s, 1,5s com o --mock-vel, e desce de 4,4 a
   4,6s) e depois o do Entregador (sobe de 4,7 a 5s), fica parado 4,35s e se desmonta como os outros. O loop começa no
   tempo parado do cenário 1 e termina com a montagem dele (de 44,3 a 46,25s). O que há dentro dos cenários 2 a 5 usa as
   regras do 1 com um atraso negativo (--sp-atraso, posto no bloco e herdado) que leva cada um ao seu lugar no loop, e o
   do 6 tem as suas; o bloco de cada cenário, que aparece e some no corte, tem as suas, sem atraso. Nada esmaece: o que
   entra e sai é escala, traço ou corte, a troca de cenário é um corte (visibility) e a altura de nada muda. Sem
   animação (sem JS, com prefers-reduced-motion ou pausado), o cenário 1 completo. A cena inteira (.sp-hero-visual) é que
   é observada por parts/pagina-produto.js e liga o --mock-estado. */
.sp-page .sp-hero-visual.is-visible {
  --mock-estado: running;
}
.sp-page .sp-cenario:nth-child(2) {
  --sp-atraso: -39.05s;
}
.sp-page .sp-cenario:nth-child(3) {
  --sp-atraso: -31.85s;
}
.sp-page .sp-cenario:nth-child(4) {
  --sp-atraso: -24.65s;
}
.sp-page .sp-cenario:nth-child(5) {
  --sp-atraso: -17.45s;
}
.sp-page .sp-destino > .split-no {
  transform-origin: 0 calc(100% - var(--sp-ramo));
}

@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1329px) {
  .sp-page .sp-destino > .split-no {
    transform-origin: 50% 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sp-page .sp-hero-visual.is-observado .sp-cenario,
  .sp-page .sp-hero-visual.is-observado .sp-confirmado,
  .sp-page .sp-hero-visual.is-observado .split-setas path[pathLength],
  .sp-page .sp-hero-visual.is-observado .split-ponta,
  .sp-page .sp-hero-visual.is-observado .split-destinos::before,
  .sp-page .sp-hero-visual.is-observado .sp-destino::before,
  .sp-page .sp-hero-visual.is-observado .sp-destino > .split-no,
  .sp-page .sp-hero-visual.is-observado .sp-hero-toast {
    animation-duration: calc(46.25s * var(--mock-vel));
    animation-delay: calc(var(--sp-atraso, 0s) * var(--mock-vel));
    animation-iteration-count: infinite;
    animation-play-state: var(--mock-estado, paused);
  }
  .sp-page .sp-hero-visual.is-observado .sp-confirmado {
    animation-name: sp-hero-check;
  }
  .sp-page .sp-hero-visual.is-observado .split-setas path[pathLength] {
    animation-name: sp-hero-seta;
  }
  .sp-page .sp-hero-visual.is-observado .split-ponta {
    animation-name: sp-hero-ponta;
  }
  .sp-page .sp-hero-visual.is-observado .split-destinos::before {
    animation-name: sp-hero-trilho;
  }
  .sp-page .sp-hero-visual.is-observado .sp-destino::before {
    animation-name: sp-hero-ramo;
  }
  .sp-page .sp-hero-visual.is-observado .sp-destino:nth-child(1) > .split-no {
    animation-name: sp-hero-destino1;
  }
  .sp-page .sp-hero-visual.is-observado .sp-destino:nth-child(2) > .split-no {
    animation-name: sp-hero-destino2;
  }
  .sp-page .sp-hero-visual.is-observado .sp-hero-toast {
    animation-name: sp-hero-toast;
  }
  /* A troca de cenário: cada bloco com as suas, sem atraso e em degrau (step-end), para o corte cair no mesmo instante
     nos dois blocos (um some quando o outro aparece). */
  .sp-page .sp-hero-visual.is-observado .sp-cenario {
    animation-delay: 0s;
    animation-timing-function: step-end;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario:nth-child(1) {
    animation-name: sp-hero-cenario1;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario:nth-child(2) {
    animation-name: sp-hero-cenario2;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario:nth-child(3) {
    animation-name: sp-hero-cenario3;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario:nth-child(4) {
    animation-name: sp-hero-cenario4;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario:nth-child(5) {
    animation-name: sp-hero-cenario5;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario:nth-child(6) {
    animation-name: sp-hero-cenario6;
  }
  /* O cenário 6, sem atraso, com as suas. */
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .sp-confirmado {
    animation-name: sp-hero6-check;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .split-setas path[pathLength] {
    animation-name: sp-hero6-seta;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .split-ponta {
    animation-name: sp-hero6-ponta;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .split-destinos::before {
    animation-name: sp-hero6-trilho;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .sp-destino::before {
    animation-name: sp-hero6-ramo;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .sp-destino:nth-child(1) > .split-no {
    animation-name: sp-hero6-destino1;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .sp-destino:nth-child(2) > .split-no {
    animation-name: sp-hero6-destino2;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .sp-destino:nth-child(3) > .split-no {
    animation-name: sp-hero6-destino3;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .sp-hero-toast {
    animation-name: sp-hero6-toast1;
  }
  .sp-page .sp-hero-visual.is-observado .sp-cenario-tres .sp-hero-toast + .sp-hero-toast {
    animation-name: sp-hero6-toast2;
  }
}

/* Os cortes, de um cenário para o seguinte (1s = 2,162%): 5,25s, 12,45s, 19,65s, 26,85s, 34,05s e 44,3s (do 6 para o
   1). */
@keyframes sp-hero-cenario1 {
  0% { visibility: visible; }
  11.3514% { visibility: hidden; }
  95.7838%, 100% { visibility: visible; }
}
@keyframes sp-hero-cenario2 {
  0% { visibility: hidden; }
  11.3514% { visibility: visible; }
  26.9189%, 100% { visibility: hidden; }
}
@keyframes sp-hero-cenario3 {
  0% { visibility: hidden; }
  26.9189% { visibility: visible; }
  42.4865%, 100% { visibility: hidden; }
}
@keyframes sp-hero-cenario4 {
  0% { visibility: hidden; }
  42.4865% { visibility: visible; }
  58.0541%, 100% { visibility: hidden; }
}
@keyframes sp-hero-cenario5 {
  0% { visibility: hidden; }
  58.0541% { visibility: visible; }
  73.6216%, 100% { visibility: hidden; }
}
@keyframes sp-hero-cenario6 {
  0% { visibility: hidden; }
  73.6216% { visibility: visible; }
  95.7838%, 100% { visibility: hidden; }
}
/* Cenários 1 a 5 (os tempos do cenário 1): o check cresce de 44,3 a 44,6s e encolhe de 4,95 a 5,05s; as setas e o
   trilho se desenham de 44,7 a 45,1s e se desfazem de 4,75 a 4,95s; os ramos saem de 45 a 45,15s e voltam de 4,55 a
   4,75s; os destinos crescem de 45,15 a 45,45s e de 45,45 a 45,75s e encolhem juntos de 4,55 a 4,75s; o toast sobe de
   45,95 a 46,25s e desce de 4,35 a 4,55s. */
@keyframes sp-hero-check {
  0%, 10.7027% { transform: scale(1); animation-timing-function: ease-in; }
  10.9189%, 95.7838% { transform: scale(0); animation-timing-function: ease-out; }
  96.4324%, 100% { transform: scale(1); }
}
@keyframes sp-hero-seta {
  0%, 10.2703% { stroke-dashoffset: 0; animation-timing-function: ease-in; }
  10.7027%, 96.6486% { stroke-dashoffset: 1; animation-timing-function: ease-out; }
  97.5135%, 100% { stroke-dashoffset: 0; }
}
@keyframes sp-hero-ponta {
  0%, 10.2703% { opacity: 1; }
  10.2811%, 97.4054% { opacity: 0; }
  97.5135%, 100% { opacity: 1; }
}
@keyframes sp-hero-trilho {
  0%, 10.2703% { transform: scaleY(1); animation-timing-function: ease-in; }
  10.7027%, 96.6486% { transform: scaleY(0); animation-timing-function: ease-out; }
  97.5135%, 100% { transform: scaleY(1); }
}
@keyframes sp-hero-ramo {
  0%, 9.8378% { transform: scaleX(1); animation-timing-function: ease-in; }
  10.2703%, 97.2973% { transform: scaleX(0); animation-timing-function: ease-out; }
  97.6216%, 100% { transform: scaleX(1); }
}
@keyframes sp-hero-destino1 {
  0%, 9.8378% { transform: scale(1); animation-timing-function: ease-in; }
  10.2703%, 97.6216% { transform: scale(0); animation-timing-function: ease-out; }
  98.2703%, 100% { transform: scale(1); }
}
@keyframes sp-hero-destino2 {
  0%, 9.8378% { transform: scale(1); animation-timing-function: ease-in; }
  10.2703%, 98.2703% { transform: scale(0); animation-timing-function: ease-out; }
  98.9189%, 100% { transform: scale(1); }
}
@keyframes sp-hero-toast {
  0%, 9.4054% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  9.8378%, 99.3514% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  100% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
}
/* Cenário 6, de 34,05 a 44,3s: o check cresce de 34,05 a 34,35s e encolhe de 44 a 44,1s; as setas e o trilho se
   desenham de 34,45 a 34,85s e se desfazem de 43,8 a 44s; os ramos saem de 34,75 a 34,9s; os destinos crescem de 34,9 a
   35,2s, de 35,2 a 35,5s e de 35,5 a 35,8s e, com os ramos, encolhem juntos de 43,6 a 43,8s; o toast do Restaurante sobe
   de 36 a 36,3s e desce de 38,45 a 38,65s; o do Entregador sobe de 38,75 a 39,05s e desce de 43,4 a 43,6s. */
@keyframes sp-hero6-check {
  0%, 73.6216% { transform: scale(0); animation-timing-function: ease-out; }
  74.2703%, 95.1351% { transform: scale(1); animation-timing-function: ease-in; }
  95.3514%, 100% { transform: scale(0); }
}
@keyframes sp-hero6-seta {
  0%, 74.4865% { stroke-dashoffset: 1; animation-timing-function: ease-out; }
  75.3514%, 94.7027% { stroke-dashoffset: 0; animation-timing-function: ease-in; }
  95.1351%, 100% { stroke-dashoffset: 1; }
}
@keyframes sp-hero6-ponta {
  0%, 75.2432% { opacity: 0; }
  75.3514%, 94.7027% { opacity: 1; }
  94.7135%, 100% { opacity: 0; }
}
@keyframes sp-hero6-trilho {
  0%, 74.4865% { transform: scaleY(0); animation-timing-function: ease-out; }
  75.3514%, 94.7027% { transform: scaleY(1); animation-timing-function: ease-in; }
  95.1351%, 100% { transform: scaleY(0); }
}
@keyframes sp-hero6-ramo {
  0%, 75.1351% { transform: scaleX(0); animation-timing-function: ease-out; }
  75.4595%, 94.2703% { transform: scaleX(1); animation-timing-function: ease-in; }
  94.7027%, 100% { transform: scaleX(0); }
}
@keyframes sp-hero6-destino1 {
  0%, 75.4595% { transform: scale(0); animation-timing-function: ease-out; }
  76.1081%, 94.2703% { transform: scale(1); animation-timing-function: ease-in; }
  94.7027%, 100% { transform: scale(0); }
}
@keyframes sp-hero6-destino2 {
  0%, 76.1081% { transform: scale(0); animation-timing-function: ease-out; }
  76.7568%, 94.2703% { transform: scale(1); animation-timing-function: ease-in; }
  94.7027%, 100% { transform: scale(0); }
}
@keyframes sp-hero6-destino3 {
  0%, 76.7568% { transform: scale(0); animation-timing-function: ease-out; }
  77.4054%, 94.2703% { transform: scale(1); animation-timing-function: ease-in; }
  94.7027%, 100% { transform: scale(0); }
}
@keyframes sp-hero6-toast1 {
  0%, 77.8378% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  78.4865%, 83.1351% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  83.5676%, 100% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); }
}
@keyframes sp-hero6-toast2 {
  0%, 83.7838% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  84.4324%, 93.8378% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  94.2703%, 100% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); }
}

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

/* ---------- O que é ----------
   A frase da definição, centralizada embaixo do título, que termina chamando os três destaques ("Na PagHiper,
   funciona assim:"). */
.sp-page .sp-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-align: center;
  text-wrap: balance;
}
/* 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. */
.sp-page .sp-destaques {
  row-gap: 16px;
  max-width: 1040px;
  margin: 0 auto 32px;
}
.sp-page .sp-destaque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 24px;
  box-shadow: none;
}
.sp-page .sp-destaque .icone {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.sp-page .sp-destaque .icone svg {
  width: 20px;
  height: 20px;
}
.sp-page .sp-destaque-titulo {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.sp-page .sp-destaque-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}
.sp-page .sp-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) {
  .sp-page .sp-o-que-e-texto {
    margin-bottom: 48px;
    font-size: 1.1875rem;
  }
  .sp-page .sp-destaques {
    margin-bottom: 40px;
  }
  .sp-page .sp-o-que-e-nota {
    font-size: 1.1875rem;
  }
}

/* ---------- Faixas (como funciona, o que cada um vê, as regras 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. */
.sp-page .produto:nth-of-type(n) {
  background-color: transparent;
}
.sp-page .produto.sp-faixa-clara {
  background-color: #F6F9FE;
}
.sp-page .sp-faixa .produto-titulo {
  margin-bottom: 24px;
}
/* Lista de "O que cada um vê": cada item com um marcador verde do check e o começo em negrito. */
.sp-page .sp-lista {
  display: grid;
  gap: 16px;
  margin: 0;
}
.sp-page .sp-lista li {
  position: relative;
  padding-left: 32px;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.sp-page .sp-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;
}
.sp-page .sp-lista strong {
  font-weight: 700;
}
/* As regras: sem cena, a lista ocupa a largura da faixa, como uma lista de termos. O título e a lista ficam num bloco
   de até 1040px, centralizado; a lista tem uma coluna no celular e duas a partir de 768px (de 336px a 768px de tela e de
   488px a partir de 992px, umas 60 letras por linha). Sem marcador (nem check, que soaria como vantagem ao lado de
   "Sem estorno", nem alerta): o começo em negrito e um filete entre um item e o de baixo. Em duas colunas os itens vão
   da esquerda para a direita, na ordem do HTML, e os filetes de uma mesma linha ficam alinhados. */
.sp-page .sp-regras-bloco {
  max-width: 1040px;
  margin: 0 auto;
}
.sp-page .sp-regras {
  display: grid;
  margin: 0;
}
.sp-page .sp-regras li {
  padding: 14px 0;
  border-top: 1px solid #E3EAF5;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.sp-page .sp-regras li:first-child {
  padding-top: 0;
  border-top: 0;
}
.sp-page .sp-regras li:last-child {
  padding-bottom: 0;
}
.sp-page .sp-regras strong {
  font-weight: 700;
}
/* Integração: o texto e a nota das plataformas, no corpo das listas. */
.sp-page .sp-integracao-texto,
.sp-page .sp-integracao-nota {
  margin: 0 0 16px;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.sp-page .sp-integracao-nota {
  margin-bottom: 24px;
}
.sp-page .sp-integracao-nota strong {
  font-weight: 700;
}

@media (min-width: 768px) {
  .sp-page .sp-regras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }
  .sp-page .sp-regras li {
    padding: 20px 0;
  }
  .sp-page .sp-regras li:nth-child(2) {
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 992px) {
  .sp-page .sp-lista li,
  .sp-page .sp-regras li,
  .sp-page .sp-integracao-texto,
  .sp-page .sp-integracao-nota {
    font-size: 1.0625rem;
  }
  .sp-page .sp-regras {
    column-gap: 64px;
  }
}

/* Como funciona: os três passos do mini-fluxo do componente um embaixo do outro, com o traço vertical ligando os
   ícones, o número e o título do passo em negrito e o texto embaixo. O passo 3, o da cena ao lado, fica em destaque:
   o ícone no azul. */
.sp-page .sp-fluxo {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin: 0;
}
.sp-page .sp-fluxo::before {
  content: none;
}
.sp-page .sp-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;
}
.sp-page .sp-fluxo .mini-fluxo-icone {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
}
.sp-page .sp-fluxo .mini-fluxo-icone svg {
  width: 24px;
  height: 24px;
}
.sp-page .sp-fluxo li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: -28px;
  left: 24px;
  border-left: 1px solid #C9D6EA;
}
.sp-page .sp-fluxo .mini-fluxo-rotulo {
  padding-top: 2px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.sp-page .sp-fluxo-texto {
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.sp-page .sp-fluxo-destaque .mini-fluxo-icone {
  border-color: var(--color-1);
  background-color: var(--color-1);
  color: #ffffff;
}

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

/* ---------- Cenas das faixas ----------
   Três momentos, três telas: a integração é o antes (a cobrança criada, em campos, e o chip do QR Code pronto), o
   passo 3 é o instante (a sua parte entrando no saldo e o toast do Pix do parceiro saindo) e o painel é o depois (a
   divisão com o estado e a hora). Cada mockup fica numa .sp-cena, o contêiner aria-hidden, com o palco atrás e, nas
   cenas com segundo elemento, ele por cima, no pé reservado do cartão. O palco é um painel de raio 32px no degradê
   #EEF4FE → branco a 160°, com um brilho radial azul, 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. Aqui cada cena tem um cartão só, na largura toda da cena.
   As três percorrem os seis cenários do hero, na mesma ordem, cada uma no seu tempo (não precisam andar juntas): o que
   muda de um cenário para outro (a entrada do saldo, a cobrança do painel, o formulário da integração) fica no HTML,
   uma vez por cenário, empilhado na mesma célula da grade (.sp-entradas, .sp-cobrancas e .sp-formularios), cada um
   encostado no alto; a altura do cartão é a do cenário mais alto (o 6, com um parceiro a mais) e não muda no loop. Sem
   animação, só o cenário 1 aparece. O toast do passo 3 é um por cenário (dois no 6), todos no mesmo lugar; o chip da
   integração é o mesmo nos seis. A troca de cenário é um corte; cada loop começa pelo cenário 1 completo, e a cena que
   sai da tela para onde estava e continua dali quando volta. A coluna da grade é minmax(0, 1fr): uma coluna auto
   cresceria até o valor mais largo dos seis cenários e alargaria todos eles. */
.sp-page .sp-entradas,
.sp-page .sp-cobrancas,
.sp-page .sp-formularios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.sp-page .sp-entradas > *,
.sp-page .sp-cobrancas > *,
.sp-page .sp-formularios > * {
  grid-area: 1 / 1;
  align-self: start;
}
.sp-page .sp-entradas > * + *,
.sp-page .sp-cobrancas > * + *,
.sp-page .sp-formularios > * + *,
.sp-page .sp-toast-pix + .sp-toast-pix {
  visibility: hidden;
}
.sp-page .sp-cena {
  position: relative;
  left: -12px;
  isolation: isolate;
  width: calc(100% - 24px);
  max-width: 440px;
  margin: 0 auto;
}
.sp-page .sp-cena.is-visible {
  --mock-estado: running;
}
.sp-page .sp-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. */
.sp-page .sp-cena > .mock-tela {
  position: relative;
  z-index: 0;
}
.sp-page .sp-palco {
  position: absolute;
  z-index: -1;
  top: 24px;
  right: -24px;
  bottom: -24px;
  left: 24px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 100%, rgba(8, 96, 219, 0.12), transparent 70%),
    linear-gradient(160deg, #EEF4FE, #ffffff);
}

/* Abaixo de 320px o cartão perde 8px de cada lado e os valores descem um degrau, para 1,75rem, para o R$ 2.400,00 (o
   mais largo dos seis cenários, no painel e na integração) caber no cartão. */
@media (max-width: 319.98px) {
  .sp-page .sp-cena .mock-corpo {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (min-width: 576px) {
  .sp-page .sp-cena .mock-corpo {
    padding: 24px;
  }
}

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

/* Toast: cartão branco com sombra e o check verde dos mockups, sobre o pé do cartão e saindo dele 20px para baixo e
   12px para a direita. O pé do cartão é reservado para ele: nenhum texto embaixo. */
.sp-page .sp-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;
}
.sp-page .sp-toast .mock-marca-ok {
  flex-basis: 24px;
}
.sp-page .sp-toast strong {
  font-weight: 700;
}
.sp-page .sp-toast-pix {
  right: -12px;
  bottom: -20px;
}

/* Linhas dos cartões: o rótulo à esquerda e o valor à direita, na linha de base, quando cabem; quando não cabem, o
   valor desce para a linha de baixo, ainda à direita (flex-wrap e margin-left: auto). Os valores têm 2rem (1,75rem
   abaixo de 320px), peso 700, sem quebra. */
.sp-page .sp-cena .sp-valor {
  margin: 0;
  color: var(--color-3);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

@media (max-width: 319.98px) {
  .sp-page .sp-cena .sp-valor {
    font-size: 1.75rem;
  }
}
.sp-page .sp-cena .sp-detalhe {
  margin: 0;
  color: #5B6B82;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.sp-page .sp-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  margin: 0;
}
.sp-page .sp-linha .sp-valor {
  margin-left: auto;
}
.sp-page .sp-linha-rotulo {
  color: var(--color-3);
  font-weight: 700;
}
.sp-page .sp-linha-rotulo .sp-detalhe {
  display: block;
}

/* Como funciona, passo 3 (o instante): o saldo PagHiper com uma entrada, a sua parte (o ícone de recebimento, #sp-recebido
   no sprite, a cobrança, a hora e o valor com o sinal de mais, no verde dos mockups), e o toast da parte que sai por Pix
   para o parceiro, sobre o pé reservado do cartão; uma entrada e um toast por cenário. A entrada fica num bloco com o
   fundo verde-claro: o ícone à esquerda, a cobrança e a hora ao lado dele e o valor embaixo, na largura do bloco, à
   direita; a partir de 1200px (cena de 520px), o valor vai para a mesma linha, à direita. A cobrança quebra, quando
   precisa, depois do "·" (espaços inseparáveis no resto). Abaixo de 340px a entrada perde o bloco (fundo e padding), como
   a caixa dos campos da integração, para o valor caber nele. */
.sp-page .sp-saldo-tela .mock-corpo {
  padding-bottom: 64px;
}
.sp-page .sp-entrada {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "icone texto" "valor valor";
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  background-color: #F2FBF6;
}
.sp-page .sp-entrada-icone {
  display: inline-flex;
  grid-area: icone;
  align-self: start;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(36, 209, 122, 0.16);
  color: #0B6B3E;
}
.sp-page .sp-entrada-icone svg {
  width: 20px;
  height: 20px;
}
.sp-page .sp-entrada-texto {
  display: flex;
  grid-area: texto;
  flex-direction: column;
  min-width: 0;
}
.sp-page .sp-entrada-rotulo {
  color: var(--color-3);
  font-weight: 700;
  text-wrap: balance;
}
.sp-page .sp-entrada-hora {
  color: #5B6B82;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sp-page .sp-cena .sp-entrada-valor {
  grid-area: valor;
  justify-self: end;
  color: #0B6B3E;
}

@media (max-width: 339.98px) {
  .sp-page .sp-entrada {
    padding: 0;
    background-color: transparent;
  }
}

/* Abaixo de 320px, o pé reservado do cartão cresce para os toasts de quatro linhas (os mais longos, dos cenários 3, 4 e
   5), que senão cobririam o valor da entrada. */
@media (max-width: 319.98px) {
  .sp-page .sp-saldo-tela .mock-corpo {
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .sp-page .sp-entrada {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "icone texto valor";
  }
}

/* Loop de 37,85s (26,5s com o --mock-vel de 0,7) pelos seis cenários, que começa pelo cenário 1 completo, em dois
   tempos, um de cada vez. Cada cenário de um parceiro tem 5,85s: a entrada abre de cima para baixo em 0,3s (a sua parte
   entrando: é o corte que troca o cenário), 0,2s depois o toast sobe em 0,3s, abrindo de baixo para cima com 8px de
   deslocamento (a do parceiro saindo), tudo fica parado 4,35s (3s com o --mock-vel), o toast desce e some em 0,2s
   (corte de cima para baixo e 8px), a entrada fecha de baixo para cima em 0,2s e, 0,3s depois, abre a do cenário
   seguinte. O cenário 6 tem 8,6s: depois da entrada, o toast do Restaurante sobe, fica 2,15s (1,5s com o --mock-vel) e
   desce, e 0,1s depois sobe o do Entregador, que fica parado com a entrada 4,35s antes de descer. O loop começa no tempo
   parado do cenário 1 e termina com a montagem dele (de 37,05 a 37,85s); os cenários 2 a 5 usam as regras do 1 com um
   atraso negativo (--sp-atraso) e o 6 tem as suas. O cartão não se mexe e a entrada não muda de tamanho: só o corte.
   Parada, o cenário 1. */
.sp-page .sp-entradas > :nth-child(2),
.sp-page .sp-cena-passo3 .sp-toast-pix:nth-of-type(2) {
  --sp-atraso: -32s;
}
.sp-page .sp-entradas > :nth-child(3),
.sp-page .sp-cena-passo3 .sp-toast-pix:nth-of-type(3) {
  --sp-atraso: -26.15s;
}
.sp-page .sp-entradas > :nth-child(4),
.sp-page .sp-cena-passo3 .sp-toast-pix:nth-of-type(4) {
  --sp-atraso: -20.3s;
}
.sp-page .sp-entradas > :nth-child(5),
.sp-page .sp-cena-passo3 .sp-toast-pix:nth-of-type(5) {
  --sp-atraso: -14.45s;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-page .sp-cena-passo3.is-observado .sp-entrada,
  .sp-page .sp-cena-passo3.is-observado .sp-toast-pix {
    animation-duration: calc(37.85s * var(--mock-vel));
    animation-delay: calc(var(--sp-atraso, 0s) * var(--mock-vel));
    animation-iteration-count: infinite;
    animation-play-state: var(--mock-estado, paused);
  }
  .sp-page .sp-cena-passo3.is-observado .sp-entrada {
    animation-name: sp-passo3-entrada;
  }
  .sp-page .sp-cena-passo3.is-observado .sp-toast-pix {
    animation-name: sp-passo3-toast;
  }
  .sp-page .sp-cena-passo3.is-observado .sp-entrada:nth-child(6) {
    animation-name: sp-passo3-entrada6;
  }
  .sp-page .sp-cena-passo3.is-observado .sp-toast-pix:nth-of-type(6) {
    animation-name: sp-passo3-toast6a;
  }
  .sp-page .sp-cena-passo3.is-observado .sp-toast-pix:nth-of-type(7) {
    animation-name: sp-passo3-toast6b;
  }
}

/* Cenários 1 a 5 (os tempos do cenário 1; 1s = 2,642%): a entrada abre de 37,05 a 37,35s e fecha de 4,55 a 4,75s; o
   toast sobe de 37,55 a 37,85s e desce de 4,35 a 4,55s. Cenário 6, de 28,45 a 37,05s: a entrada abre de 28,45 a 28,75s
   e fecha de 36,55 a 36,75s; o toast do Restaurante sobe de 28,95 a 29,25s e desce de 31,4 a 31,6s; o do Entregador
   sobe de 31,7 a 32s e desce de 36,35 a 36,55s. */
@keyframes sp-passo3-entrada {
  0%, 12.0211% { visibility: visible; clip-path: inset(0 0 0 0); animation-timing-function: ease-in; }
  12.5495%, 97.8864% { visibility: hidden; clip-path: inset(0 0 100% 0); animation-timing-function: ease-out; }
  98.679%, 100% { visibility: visible; clip-path: inset(0 0 0 0); }
}
@keyframes sp-passo3-toast {
  0%, 11.4927% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  12.0211%, 99.2074% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  100% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
}
@keyframes sp-passo3-entrada6 {
  0%, 75.1651% { visibility: hidden; clip-path: inset(0 0 100% 0); animation-timing-function: ease-out; }
  75.9577%, 96.5654% { visibility: visible; clip-path: inset(0 0 0 0); animation-timing-function: ease-in; }
  97.0938%, 100% { visibility: hidden; clip-path: inset(0 0 100% 0); }
}
@keyframes sp-passo3-toast6a {
  0%, 76.4861% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  77.2787%, 82.959% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  83.4875%, 100% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); }
}
@keyframes sp-passo3-toast6b {
  0%, 83.7517% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  84.5443%, 96.037% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  96.5654%, 100% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); }
}

/* O que cada um vê: o painel com a cobrança paga e a divisão em duas linhas (três no cenário 6); na linha de cada
   parceiro, o Pix enviado com a hora. */
.sp-page .sp-painel-tela .mock-cabecalho {
  margin-bottom: 8px;
}
.sp-page .sp-cobranca > .sp-valor {
  margin-bottom: 16px;
}
.sp-page .sp-divisao {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-page .sp-divisao li {
  padding: 16px 0;
  border-top: 1px solid #EEF2F8;
}
.sp-page .sp-divisao li:last-child {
  padding-bottom: 0;
}
.sp-page .sp-enviado {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: #0B6B3E;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.sp-page .sp-enviado-texto {
  display: block;
}

/* Loop de 35s (24,5s com o --mock-vel de 0,7) pelos seis cenários, que começa pelo cenário 1 completo. Cada cenário de
   um parceiro tem 5,7s: um corte põe a cobrança dele no cartão, com a linha do parceiro ainda sem o Pix enviado; o
   check cresce em 0,25s e 0,05s depois o "Pix enviado às hh:mm" abre da esquerda para a direita em 0,4s; tudo fica
   parado 4,35s (3s com o --mock-vel); o texto fecha da direita para a esquerda em 0,2s (corte, sem esmaecer), o check
   encolhe em 0,15s e, 0,3s depois, o corte do cenário seguinte. O cenário 6 tem 6,5s: o check e o texto da linha do
   Restaurante e, 0,1s depois, os da linha do Entregador, do mesmo jeito; as duas linhas fecham juntas. O loop começa no
   tempo parado do cenário 1 e termina com a montagem dele (de 34,3 a 35s); o que há dentro das cobranças 2 a 5 usa as
   regras do 1 com um atraso negativo (--sp-atraso) e o da 6 tem as suas; cada cobrança, que aparece e some no corte,
   tem as suas, sem atraso. Parada, o cenário 1. */
.sp-page .sp-cobrancas > :nth-child(2) {
  --sp-atraso: -29.3s;
}
.sp-page .sp-cobrancas > :nth-child(3) {
  --sp-atraso: -23.6s;
}
.sp-page .sp-cobrancas > :nth-child(4) {
  --sp-atraso: -17.9s;
}
.sp-page .sp-cobrancas > :nth-child(5) {
  --sp-atraso: -12.2s;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-page .sp-cena-painel.is-observado .sp-cobranca,
  .sp-page .sp-cena-painel.is-observado .sp-enviado .mock-marca-ok,
  .sp-page .sp-cena-painel.is-observado .sp-enviado-texto {
    animation-duration: calc(35s * var(--mock-vel));
    animation-delay: calc(var(--sp-atraso, 0s) * var(--mock-vel));
    animation-iteration-count: infinite;
    animation-play-state: var(--mock-estado, paused);
  }
  .sp-page .sp-cena-painel.is-observado .sp-enviado .mock-marca-ok {
    animation-name: sp-painel-check;
  }
  .sp-page .sp-cena-painel.is-observado .sp-enviado-texto {
    animation-name: sp-painel-enviado;
  }
  /* A troca de cenário: cada cobrança com as suas, sem atraso e em degrau, como os blocos do hero. */
  .sp-page .sp-cena-painel.is-observado .sp-cobranca {
    animation-delay: 0s;
    animation-timing-function: step-end;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(1) {
    animation-name: sp-painel-cobranca1;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(2) {
    animation-name: sp-painel-cobranca2;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(3) {
    animation-name: sp-painel-cobranca3;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(4) {
    animation-name: sp-painel-cobranca4;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(5) {
    animation-name: sp-painel-cobranca5;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(6) {
    animation-name: sp-painel-cobranca6;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(6) li:nth-child(2) .mock-marca-ok {
    animation-name: sp-painel6-check1;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(6) li:nth-child(2) .sp-enviado-texto {
    animation-name: sp-painel6-enviado1;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(6) li:nth-child(3) .mock-marca-ok {
    animation-name: sp-painel6-check2;
  }
  .sp-page .sp-cena-painel.is-observado .sp-cobranca:nth-child(6) li:nth-child(3) .sp-enviado-texto {
    animation-name: sp-painel6-enviado2;
  }
}

/* Os cortes (1s = 2,857%): 5s, 10,7s, 16,4s, 22,1s, 27,8s e 34,3s (do 6 para o 1). Cenários 1 a 5 (os tempos do
   cenário 1): o check cresce de 34,3 a 34,55s e encolhe de 4,55 a 4,7s; o texto abre de 34,6 a 35s e fecha de 4,35 a
   4,55s. Cenário 6, de 27,8 a 34,3s: os checks crescem de 27,8 a 28,05s e de 28,6 a 28,85s e encolhem de 33,85 a 34s;
   os textos abrem de 28,1 a 28,5s e de 28,9 a 29,3s e fecham de 33,65 a 33,85s. */
@keyframes sp-painel-cobranca1 {
  0% { visibility: visible; }
  14.2857% { visibility: hidden; }
  98%, 100% { visibility: visible; }
}
@keyframes sp-painel-cobranca2 {
  0% { visibility: hidden; }
  14.2857% { visibility: visible; }
  30.5714%, 100% { visibility: hidden; }
}
@keyframes sp-painel-cobranca3 {
  0% { visibility: hidden; }
  30.5714% { visibility: visible; }
  46.8571%, 100% { visibility: hidden; }
}
@keyframes sp-painel-cobranca4 {
  0% { visibility: hidden; }
  46.8571% { visibility: visible; }
  63.1429%, 100% { visibility: hidden; }
}
@keyframes sp-painel-cobranca5 {
  0% { visibility: hidden; }
  63.1429% { visibility: visible; }
  79.4286%, 100% { visibility: hidden; }
}
@keyframes sp-painel-cobranca6 {
  0% { visibility: hidden; }
  79.4286% { visibility: visible; }
  98%, 100% { visibility: hidden; }
}
@keyframes sp-painel-check {
  0%, 13% { transform: scale(1); animation-timing-function: ease-in; }
  13.4286%, 98% { transform: scale(0); animation-timing-function: ease-out; }
  98.7143%, 100% { transform: scale(1); }
}
@keyframes sp-painel-enviado {
  0%, 12.4286% { visibility: visible; clip-path: inset(0 0 0 0); }
  13%, 98.8571% { visibility: hidden; clip-path: inset(0 100% 0 0); }
  100% { visibility: visible; clip-path: inset(0 0 0 0); }
}
@keyframes sp-painel6-check1 {
  0%, 79.4286% { transform: scale(0); animation-timing-function: ease-out; }
  80.1429%, 96.7143% { transform: scale(1); animation-timing-function: ease-in; }
  97.1429%, 100% { transform: scale(0); }
}
@keyframes sp-painel6-enviado1 {
  0%, 80.2857% { visibility: hidden; clip-path: inset(0 100% 0 0); }
  81.4286%, 96.1429% { visibility: visible; clip-path: inset(0 0 0 0); }
  96.7143%, 100% { visibility: hidden; clip-path: inset(0 100% 0 0); }
}
@keyframes sp-painel6-check2 {
  0%, 81.7143% { transform: scale(0); animation-timing-function: ease-out; }
  82.4286%, 96.7143% { transform: scale(1); animation-timing-function: ease-in; }
  97.1429%, 100% { transform: scale(0); }
}
@keyframes sp-painel6-enviado2 {
  0%, 82.5714% { visibility: hidden; clip-path: inset(0 100% 0 0); }
  83.7143%, 96.1429% { visibility: visible; clip-path: inset(0 0 0 0); }
  96.7143%, 100% { visibility: hidden; clip-path: inset(0 100% 0 0); }
}

/* Integração (o antes): a cobrança Pix sendo criada, sem selo de pago e sem hora, em campos como os de um formulário,
   no traço dos mockups e sem código nem nome de parâmetro: o rótulo em cima e o valor numa caixa de campo (borda de 1px
   e raio de 10px); na divisão, o parceiro com a chave mascarada e o valor dele, que divide a caixa como as linhas dos
   cartões (no cenário 6, uma caixa por parceiro, 8px uma da outra). O chip "Cobrança criada · QR Code pronto" fica sobre
   o pé reservado do cartão. Abaixo de 360px a caixa vira um traço embaixo do valor: com a borda e o padding dos lados, o
   R$ 2.400,00 de 2rem não caberia abaixo de uns 350px de tela. */
.sp-page .sp-nova-tela .mock-corpo {
  padding-bottom: 56px;
}
.sp-page .sp-campos {
  display: grid;
  gap: 14px;
}
.sp-page .sp-campo {
  display: grid;
  gap: 6px;
  margin: 0;
}
.sp-page .sp-campo-rotulo {
  color: #5B6B82;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.sp-page .sp-campo-caixa {
  display: block;
  padding: 8px 12px;
  border: 1px solid #D8E0EC;
  border-radius: 10px;
  background-color: #ffffff;
}
.sp-page .sp-campo-caixa.sp-linha {
  display: flex;
}
.sp-page .sp-campo-caixa + .sp-campo-caixa {
  margin-top: 2px;
}

@media (max-width: 359.98px) {
  .sp-page .sp-campo-caixa {
    padding: 4px 0 8px;
    border-width: 0 0 1px;
    border-radius: 0;
  }
}

/* Chip da cobrança criada: uma pílula branca com sombra e o QR Code (#sp-qr, no sprite) num círculo azul-claro, no pé
   do cartão, saindo dele 18px para baixo e 12px para a direita. Quando não cabe numa linha, quebra depois do "·"
   ("QR Code pronto" com espaços inseparáveis). */
.sp-page .sp-chip-qr {
  position: absolute;
  z-index: 2;
  right: -12px;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 16px 6px 6px;
  border-radius: 20px;
  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.35;
  text-align: left;
}
.sp-page .sp-marca-qr {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #EEF4FE;
  color: var(--color-1);
}
.sp-page .sp-marca-qr svg {
  width: 16px;
  height: 16px;
}

/* Loop de 33,3s (23,3s com o --mock-vel de 0,7) pelos seis cenários, 5,55s cada um, que começa pelo cenário 1
   completo: um corte põe no cartão o formulário do cenário, sem o chip; 0,3s depois o chip entra pela direita em 0,3s,
   abrindo da direita para a esquerda; tudo fica parado 4,35s (3s com o --mock-vel); o chip sai para a direita em 0,3s,
   por um corte da esquerda para a direita e 8px de deslocamento, e 0,3s depois vem o corte do cenário seguinte. O chip
   é o mesmo nos seis e repete o seu loop de 5,55s, um por cenário; os formulários usam um loop de 33,3s, cada um com as
   suas, em degrau, como os blocos do hero. O cartão não se mexe. Parado, o cenário 1. */
@media (prefers-reduced-motion: no-preference) {
  .sp-page .sp-cena-integracao.is-observado .sp-campos {
    animation: sp-integracao-formulario1 calc(33.3s * var(--mock-vel)) step-end infinite var(--mock-estado, paused);
  }
  .sp-page .sp-cena-integracao.is-observado .sp-campos:nth-child(2) {
    animation-name: sp-integracao-formulario2;
  }
  .sp-page .sp-cena-integracao.is-observado .sp-campos:nth-child(3) {
    animation-name: sp-integracao-formulario3;
  }
  .sp-page .sp-cena-integracao.is-observado .sp-campos:nth-child(4) {
    animation-name: sp-integracao-formulario4;
  }
  .sp-page .sp-cena-integracao.is-observado .sp-campos:nth-child(5) {
    animation-name: sp-integracao-formulario5;
  }
  .sp-page .sp-cena-integracao.is-observado .sp-campos:nth-child(6) {
    animation-name: sp-integracao-formulario6;
  }
  .sp-page .sp-cena-integracao.is-observado .sp-chip-qr {
    animation: sp-integracao-chip calc(5.55s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

/* Os cortes dos formulários (1s = 3,003%): 4,95s, 10,5s, 16,05s, 21,6s, 27,15s e 32,7s (do 6 para o 1); o chip, no
   loop dele (1s = 18,018%), sai de 4,35 a 4,65s e entra de 5,25 a 5,55s. */
@keyframes sp-integracao-formulario1 {
  0% { visibility: visible; }
  14.8649% { visibility: hidden; }
  98.1982%, 100% { visibility: visible; }
}
@keyframes sp-integracao-formulario2 {
  0% { visibility: hidden; }
  14.8649% { visibility: visible; }
  31.5315%, 100% { visibility: hidden; }
}
@keyframes sp-integracao-formulario3 {
  0% { visibility: hidden; }
  31.5315% { visibility: visible; }
  48.1982%, 100% { visibility: hidden; }
}
@keyframes sp-integracao-formulario4 {
  0% { visibility: hidden; }
  48.1982% { visibility: visible; }
  64.8649%, 100% { visibility: hidden; }
}
@keyframes sp-integracao-formulario5 {
  0% { visibility: hidden; }
  64.8649% { visibility: visible; }
  81.5315%, 100% { visibility: hidden; }
}
@keyframes sp-integracao-formulario6 {
  0% { visibility: hidden; }
  81.5315% { visibility: visible; }
  98.1982%, 100% { visibility: hidden; }
}
@keyframes sp-integracao-chip {
  0%, 78.3784% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateX(0); animation-timing-function: ease-in; }
  83.7838%, 94.5946% { visibility: hidden; clip-path: inset(-56px -56px -56px calc(100% + 56px)); transform: translateX(8px); animation-timing-function: ease-out; }
  100% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateX(0); }
}

/* ---------- Tarifas (#tarifas) ----------
   A seção de tarifas: 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 de uma venda num mockup, o que não é cobrado em pílulas e o fecho.
   O exemplo é um comprovante e fica parado. Até 991px, o preço e o comprovante um embaixo do outro; a partir de 992px,
   lado a lado (.sp-tarifas-corpo): o preço à esquerda, mais estreito, e o comprovante à direita, alinhados pelo alto,
   com as pílulas e o fecho centralizados embaixo dos dois. */
.sp-page .sp-tarifas {
  padding-bottom: 96px;
  background-color: #EEF4FE;
}
.sp-page .sp-tarifas .description-section {
  margin-bottom: 40px;
}
.sp-page .sp-tarifas-corpo {
  margin-bottom: 48px;
}
/* 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. */
.sp-page .sp-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;
}
.sp-page .sp-preco::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 -24px 28px;
  background-color: var(--color-1);
}
.sp-page .sp-preco-valor {
  margin: 0;
  color: var(--color-3);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.sp-page .sp-preco-unidade {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.sp-page .sp-preco-detalhe {
  margin: 12px 0 0;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}

/* Exemplo de uma venda: um comprovante num mockup como os das faixas (moldura de components/pagina-produto.css), mas
   sem aria-hidden, com hierarquia. No alto, o total (o rótulo cinza e o valor), o maior número do comprovante; abaixo,
   separado por um filete fino, o bloco "Divisão" (o título pequeno, como os rótulos dos campos da integração), com as
   duas partes em linhas iguais entre si: o nome, embaixo dele um chip com o estado e, à direita, o valor em tamanho
   médio; e, como rodapé, numa faixa suave na largura do cartão, separada por outro filete, a tarifa, menor, com a
   etiqueta "cobrada de você". O olho percorre total, partes e tarifa: 2rem (2,25rem a partir de 992px), 1,375rem e
   1,0625rem, todos menores que o preço do cartão ao lado (2,5rem, e 3,25rem e 3,5rem a partir de 992 e de 1200px). Os
   números são tabulares e ficam à direita, na linha do nome ou do rótulo; quando não cabem ali, descem para a linha de
   baixo, ainda à direita (o total por flex-wrap; as partes por um degrau de largura, abaixo de 360px, para as duas
   linhas continuarem iguais). Até 575px a etiqueta da tarifa fica embaixo do rótulo, como os chips embaixo dos nomes. A
   legenda fica embaixo do comprovante. */
.sp-page .sp-exemplo {
  max-width: 560px;
  margin: 0 auto;
}
.sp-page .sp-exemplo-tela {
  max-width: none;
}
.sp-page .sp-exemplo-tela .mock-corpo {
  --sp-exemplo-respiro: 20px;
  padding: 24px var(--sp-exemplo-respiro) 0;
}
.sp-page .sp-exemplo-titulo {
  margin: 0 0 20px;
  line-height: 1.4;
}
.sp-page .sp-comprovante-valor {
  margin-left: auto;
  color: var(--color-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.sp-page .sp-comprovante-rotulo {
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.sp-page .sp-comprovante-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
  padding-bottom: 24px;
}
.sp-page .sp-comprovante-total .sp-comprovante-valor {
  font-size: 2rem;
}
.sp-page .sp-comprovante-divisao {
  padding: 20px 0 16px;
  border-top: 1px solid #E3EAF5;
}
.sp-page .sp-comprovante-titulo {
  margin: 0 0 4px;
  color: #5B6B82;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.sp-page .sp-comprovante-partes {
  margin: 0;
}
.sp-page .sp-comprovante-parte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "nome" "chip" "valor";
  row-gap: 6px;
  padding: 12px 0;
}
.sp-page .sp-comprovante-parte + .sp-comprovante-parte {
  border-top: 1px solid #EEF2F8;
}
.sp-page .sp-comprovante-nome {
  grid-area: nome;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.sp-page .sp-comprovante-chip {
  grid-area: chip;
  justify-self: start;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #EEF4FE;
  color: var(--color-3);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
.sp-page .sp-comprovante-parte .sp-comprovante-valor {
  grid-area: valor;
  justify-self: end;
  font-size: 1.375rem;
}
/* A tarifa: o rodapé do comprovante, na largura toda do cartão (as margens negativas desfazem o respiro do corpo, e o
   cartão recorta os cantos), no #F6F9FE, com o filete no alto. A etiqueta é uma pílula branca com borda. */
.sp-page .sp-comprovante-tarifa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rotulo valor" "etiqueta etiqueta";
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 calc(var(--sp-exemplo-respiro) * -1);
  padding: 14px var(--sp-exemplo-respiro) 16px;
  border-top: 1px solid #E3EAF5;
  background-color: #F6F9FE;
}
.sp-page .sp-comprovante-tarifa .sp-comprovante-rotulo {
  grid-area: rotulo;
  color: var(--color-3);
}
.sp-page .sp-comprovante-etiqueta {
  grid-area: etiqueta;
  justify-self: start;
  padding: 1px 8px;
  border: 1px solid #D8E0EC;
  border-radius: 999px;
  background-color: #ffffff;
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
.sp-page .sp-comprovante-tarifa .sp-comprovante-valor {
  grid-area: valor;
  font-size: 1.0625rem;
}
.sp-page .sp-exemplo-nota {
  margin: 12px 0 0;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 360px) {
  .sp-page .sp-comprovante-parte {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome valor" "chip chip";
    column-gap: 16px;
    align-items: baseline;
  }
}

@media (min-width: 576px) {
  .sp-page .sp-exemplo-tela .mock-corpo {
    --sp-exemplo-respiro: 28px;
    padding-top: 28px;
  }
  .sp-page .sp-comprovante-tarifa {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "rotulo etiqueta valor";
    align-items: center;
    column-gap: 10px;
  }
}

/* O que não é cobrado: pílulas brancas com o check verde, centralizadas, que quebram naturalmente (sem media query). */
.sp-page .sp-tarifas-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 880px;
  margin: 0 auto 40px;
}
.sp-page .sp-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;
}
.sp-page .sp-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;
}
.sp-page .sp-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) {
  .sp-page .sp-tarifas {
    padding-bottom: 144px;
  }
  .sp-page .sp-tarifas .description-section {
    margin-bottom: 48px;
  }
  /* Lado a lado: o preço com até 380px e o comprovante com até 560px, centralizados, 40px entre eles. */
  .sp-page .sp-tarifas-corpo {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 560px);
    justify-content: center;
    align-items: start;
    gap: 40px;
  }
  .sp-page .sp-tarifas-corpo .sp-preco,
  .sp-page .sp-tarifas-corpo .sp-exemplo {
    max-width: none;
    margin: 0;
  }
  .sp-page .sp-comprovante-total .sp-comprovante-valor {
    font-size: 2.25rem;
  }
  .sp-page .sp-preco {
    padding: 0 36px 36px;
  }
  .sp-page .sp-preco::before {
    margin: 0 -36px 36px;
  }
  .sp-page .sp-preco-valor {
    font-size: 3.25rem;
  }
  .sp-page .sp-tarifas-fecho {
    font-size: 1.5rem;
  }
}

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

/* ---------- Para quem é ----------
   Seis cartões com o ícone num círculo de 40px (o desenho com 20px), o título e a frase. 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. A seção seguinte é a faixa clara da integração: embaixo
   dos cartões fica o mesmo respiro do alto das seções (96px, 144px a partir de 992px), para eles não encostarem no
   fundo dela. */
.sp-page .sp-para-quem {
  padding-bottom: 96px;
}
.sp-page .sp-perfis {
  row-gap: 16px;
  margin: 0;
}
.sp-page .sp-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;
}
.sp-page .sp-perfil .icone {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.sp-page .sp-perfil .icone svg {
  width: 20px;
  height: 20px;
}
.sp-page .sp-perfil-titulo {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.sp-page .sp-perfil-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}
@media (hover: hover) {
  .sp-page .sp-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) {
  .sp-page .sp-perfil {
    transition: none;
  }
}

@media (min-width: 992px) {
  .sp-page .sp-para-quem {
    padding-bottom: 144px;
  }
  .sp-page .sp-para-quem .title-section {
    margin-bottom: 48px;
  }
}

/* ---------- Habilitação (#habilitacao): painel claro ----------
   O painel claro do componente (fundo #EEF4FE, raio 24px e respiros), com o título, os dois parágrafos centralizados e,
   entre eles, o requisito do CNPJ em destaque, numa pílula em linha própria, e os dois botões. */
.sp-page .sp-painel {
  padding: 56px 24px;
  border-radius: 24px;
  background-color: #EEF4FE;
  text-align: center;
}
.sp-page .sp-painel .title-section {
  margin: 0 0 24px;
}
.sp-page .sp-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;
}
.sp-page .sp-requisito {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 6px 16px 6px 8px;
  border: 1px solid var(--color-1);
  border-radius: 16px;
  background-color: #ffffff;
  color: var(--color-3);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.sp-page .sp-requisito strong {
  font-weight: 700;
}
.sp-page .sp-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;
}
.sp-page .sp-painel .botoes {
  justify-content: center;
  margin-top: 32px;
}

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

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

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

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

@media (min-width: 1025px) {
  .sp-page .sp-painel .title-section,
  .sp-page .sp-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) {
  .sp-page .sp-painel,
  .sp-page .sp-painel-escuro {
    padding: 40px 20px;
  }
  .sp-page .sp-painel .title-section,
  .sp-page .sp-painel-escuro .title-section {
    font-size: 1.625rem !important;
    line-height: 1.25 !important;
  }
  .sp-page .sp-selo {
    padding: 24px;
  }
}

/* Única diferença do painel da /pix-automatico/: abaixo de 320px os números ficam com 2,25rem, para o "+R$ 20 bi"
   caber no painel. */
@media (max-width: 319.98px) {
  .sp-page .sp-numeros strong {
    font-size: 2.25rem;
  }
}

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

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