/* ==========================================================================
   Componentes das páginas de produto (/pix-qrcode/, /boleto-bancario/, /para-quem-vende/)
   Tudo escopado em .pagina-produto, a classe do <main> dessas páginas; o que é
   só de uma página fica no arquivo dela em pages/. Mobile first: a base vale
   para telas pequenas e as media queries com min-width ajustam as maiores.
   Raios: 16px em cartões pequenos, 20px nos mockups, 24px em painéis grandes.
   Os mockups (telas em HTML/CSS) e o mecanismo de animação deles ficam no fim
   deste arquivo, num arquivo só para economizar uma requisição.
   ========================================================================== */

.pagina-produto + footer .container-banner{
  margin-top: 100px;
}

/* Mesmos valores do bloco do topo de pages/pix.css, que só o Pix e o white-label carregam. */
.pagina-produto .main-cta-servicos .title strong {
  color: #0860DB;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .pagina-produto .main-cta-servicos .title {
    margin-top: 0 !important;
  }
  .pagina-produto + footer .container-banner {
    margin-top: 65px !important;
    padding-top: 0 !important;
  }
}

/* Âncoras não ficam escondidas atrás do menu fixo. As faixas de produto param
   no fim do menu, cuja altura muda com a largura da tela. */
.pagina-produto section[id],
.pagina-produto .produto-painel[id] {
  scroll-margin-top: 110px;
}
.pagina-produto .produto[id]:not(.produto-painel) {
  scroll-margin-top: 77px;
}

@media (min-width: 500px) {
  .pagina-produto .produto[id]:not(.produto-painel) {
    scroll-margin-top: 83px;
  }
}

@media (min-width: 700px) {
  .pagina-produto .produto[id]:not(.produto-painel) {
    scroll-margin-top: 86px;
  }
}

@media (min-width: 800px) {
  .pagina-produto .produto[id]:not(.produto-painel) {
    scroll-margin-top: 89px;
  }
}

@media (min-width: 992px) {
  .pagina-produto .produto[id]:not(.produto-painel) {
    scroll-margin-top: 91px;
  }
}

@media (min-width: 1329px) {
  .pagina-produto .produto[id]:not(.produto-painel) {
    scroll-margin-top: 98px;
  }
}

@media (min-width: 2150px) {
  .pagina-produto .produto[id]:not(.produto-painel) {
    scroll-margin-top: 131px;
  }
  /* Menu com 131px a partir daqui: as seções mantêm os 12px de folga das outras larguras. */
  .pagina-produto section[id],
  .pagina-produto .produto-painel[id] {
    scroll-margin-top: 143px;
  }
}

/* ---------- Base: sprite, ícones e cartões ---------- */
.pagina-produto .sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.pagina-produto .icone-svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pagina-produto .icone-svg * {
  vector-effect: non-scaling-stroke;
}
.pagina-produto .icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pagina-produto .icone svg {
  width: 24px;
  height: 24px;
}
/* O card.css usa raio assimétrico; nesta página todos os cartões pequenos têm 16px. */
.pagina-produto .card-component {
  border-color: #E3EAF5;
  border-radius: 16px;
}

/* ---------- Botões ---------- */
.pagina-produto .botoes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pagina-produto .botoes .buttom-menu {
  display: block;
  max-width: none;
  text-decoration: none;
}
.pagina-produto .buttom-menu.outline-blue {
  background-color: transparent;
  border: 1px solid var(--color-1);
  color: var(--color-1);
}
.pagina-produto .buttom-menu.outline-blue:hover {
  background-color: rgba(8, 96, 219, 0.08);
  color: var(--color-1);
}
.pagina-produto .buttom-menu:focus-visible,
.pagina-produto .produto-link:focus-visible,
.pagina-produto .perfil-item:focus-visible,
.pagina-produto .faq-title:focus-visible,
.pagina-produto .confianca-link:focus-visible,
.pagina-produto .faq-content a:focus-visible,
.pagina-produto .animacoes-botao:focus-visible {
  outline: 3px solid var(--color-3) !important;
  outline-offset: 3px;
}

@media (max-width: 575px) {
  .pagina-produto .botoes .buttom-menu,
  .pagina-produto .produto-painel .buttom-menu {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .pagina-produto .botoes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .pagina-produto .botoes .buttom-menu {
    display: inline-block;
  }
}

/* ---------- Hero ---------- */
/* Abaixo de 992px o menu branco mostra logo e ícone brancos, então o hero
   vira um painel azul com texto branco e a imagem empilhada embaixo. */
.pagina-produto .main-hero-pix {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 120px 0 88px;
  background: linear-gradient(180deg, #0856c3 0%, #1d77f5 100%);
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}
.pagina-produto .hero-forma {
  display: none;
}
.pagina-produto .main-hero-pix .legend {
  color: #ffffff !important;
}
.pagina-produto .main-hero-pix .title {
  color: #ffffff;
  font-size: 2rem;
  line-height: 1.2;
  margin: 8px 0 16px;
  text-wrap: balance;
}
.pagina-produto .main-hero-pix .description {
  color: #ffffff !important;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 32px;
}
.pagina-produto .main-hero-pix .buttom-menu.outline-blue {
  border-color: #ffffff;
  color: #ffffff;
}
.pagina-produto .main-hero-pix .buttom-menu.outline-blue:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.pagina-produto .main-hero-pix .buttom-menu:focus-visible {
  outline-color: #ffffff !important;
}
.pagina-produto .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.pagina-produto .hero-chip svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--color-2);
}
.pagina-produto .hero-imagem {
  margin-top: 40px;
  text-align: center;
}
.pagina-produto .hero-imagem picture {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 560px;
}
.pagina-produto .hero-imagem picture::before {
  display: none;
  content: url("../../images/bg-banner-left.png");
  position: absolute;
  z-index: 1;
  top: -40px;
  left: -40px;
}
.pagina-produto .hero-imagem img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 10px solid #ffffff;
  border-radius: 1rem 4rem 1rem 1rem;
  box-shadow: 0 24px 64px rgba(2, 30, 70, 0.18);
}

/* A partir de 992px o texto fica à esquerda, sobre fundo branco, e a forma
   azul ocupa a direita, atrás do menu e da imagem. */
@media (min-width: 992px) {
  .pagina-produto .main-hero-pix {
    padding: 150px 0 120px;
    background: none;
    border-radius: 0;
  }
  .pagina-produto .hero-forma {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(180deg, #0856c3 0%, #1d77f5 100%);
    border-bottom-left-radius: 100% 100%;
  }
  .pagina-produto .main-hero-pix .legend {
    color: var(--color-1) !important;
  }
  .pagina-produto .main-hero-pix .title {
    color: var(--color-3);
    font-size: 2.4rem;
    margin: 12px 0 20px;
  }
  .pagina-produto .main-hero-pix .description {
    color: var(--color-3) !important;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .pagina-produto .main-hero-pix .buttom-menu.outline-blue {
    border-color: var(--color-1);
    color: var(--color-1);
  }
  .pagina-produto .main-hero-pix .buttom-menu.outline-blue:hover {
    background-color: rgba(8, 96, 219, 0.08);
    color: var(--color-1);
  }
  .pagina-produto .main-hero-pix .buttom-menu:focus-visible {
    outline-color: var(--color-3) !important;
  }
  .pagina-produto .main-hero-pix .botoes {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
  }
  .pagina-produto .hero-chip {
    border-color: #EEF4FE;
    background-color: #EEF4FE;
    color: var(--color-3);
  }
  .pagina-produto .hero-imagem {
    margin-top: 0;
  }
  .pagina-produto .hero-imagem picture {
    max-width: 540px;
  }
  .pagina-produto .hero-imagem img {
    aspect-ratio: 1 / 1;
    border-radius: 1.5rem 7rem 1.5rem 1.5rem;
  }
}

@media (min-width: 1200px) {
  .pagina-produto .hero-imagem picture::before {
    display: block;
  }
  .pagina-produto .main-hero-pix .title {
    font-size: 3rem;
  }
  .pagina-produto .main-hero-pix .description {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

/* A partir de 1329px (breakpoint do navbar-expand-lg no bootstrap.min.css do
   projeto) o menu mostra os links brancos, que começam entre 41% e 49% da
   largura da tela: a forma precisa cobrir essa faixa. */
@media (min-width: 1329px) {
  .pagina-produto .hero-forma {
    width: 60%;
  }
}

@media (min-width: 1440px) {
  .pagina-produto .main-hero-pix .title {
    font-size: 3.75rem;
  }
}

/* ---------- Faixa de confiança ---------- */
.pagina-produto .confianca {
  position: relative;
  z-index: 2;
  margin-top: -40px;
}
.pagina-produto .confianca-caixa {
  padding: 16px 24px;
  box-shadow: 0 16px 48px rgba(2, 30, 70, 0.08);
}
.pagina-produto .confianca-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.pagina-produto .confianca-valor {
  color: var(--color-3);
  font-size: 1.25rem;
  font-weight: 700;
}
.pagina-produto .confianca-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.pagina-produto .confianca-link:hover {
  color: inherit;
  text-decoration: none;
}
.pagina-produto .confianca-link:hover .confianca-texto {
  text-decoration: underline;
}

@media (min-width: 992px) {
  .pagina-produto .confianca {
    margin-top: -64px;
  }
  .pagina-produto .confianca-caixa {
    padding: 28px 32px;
  }
}

/* ---------- Seções ---------- */
.pagina-produto .secao,
.pagina-produto .secao-faq,
.pagina-produto .main-cta-servicos {
  padding-top: 72px;
}
.pagina-produto .perfis {
  padding-bottom: 72px;
}
.pagina-produto .secao-depoimentos .title-section,
.pagina-produto .secao-faq .title-section {
  margin-bottom: 32px;
}

@media (min-width: 992px) {
  .pagina-produto .secao,
  .pagina-produto .secao-faq,
  .pagina-produto .main-cta-servicos {
    padding-top: 112px;
  }
  .pagina-produto .perfis {
    padding-bottom: 112px;
  }
  .pagina-produto .secao-depoimentos .title-section,
  .pagina-produto .secao-faq .title-section {
    margin-bottom: 48px;
  }
}

/* ---------- Seletor de perfil ---------- */
.pagina-produto .perfis .description-section,
.pagina-produto .integracao .description-section {
  margin-bottom: 32px;
}
.pagina-produto .perfis-lista {
  margin-bottom: -16px;
}
.pagina-produto .perfis-lista > div {
  margin-bottom: 16px;
}
/* Cada perfil é um <button> com .card-component; aqui só o que o botão precisa a mais. */
.pagina-produto .perfil-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 20px 16px;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.pagina-produto .perfil-titulo {
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.pagina-produto .perfil-item:hover {
  border-color: rgba(8, 96, 219, 0.35);
  box-shadow: 0 8px 24px rgba(2, 30, 70, 0.08);
}
.pagina-produto .perfil-item.active {
  border-color: var(--color-1);
  background-color: #F4F8FF;
  box-shadow: inset 0 0 0 1px var(--color-1), 0 8px 24px rgba(2, 30, 70, 0.08);
}
.pagina-produto .perfil-item.active .perfil-titulo {
  color: #064AAB;
}
.pagina-produto .perfil-item.active .icone {
  background-color: #ffffff;
}
/* main.css gira qualquer svg dentro de .active; aqui o ícone fica parado. */
.pagina-produto .perfil-item.active svg {
  transform: none;
}
.pagina-produto .perfil-item.active::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-1) url("../../images/icons/check.svg") center / 16px no-repeat;
}

@media (min-width: 992px) {
  .pagina-produto .perfis .description-section,
  .pagina-produto .integracao .description-section {
    margin-bottom: 48px;
  }
  .pagina-produto .perfil-item {
    padding: 24px;
  }
  .pagina-produto .perfil-titulo {
    font-size: 1.25rem;
  }
}

/* ---------- Produtos: faixas de largura total, fundos alternados ---------- */
.pagina-produto .produto {
  padding: 56px 0;
}
.pagina-produto .produto:nth-of-type(odd) {
  background-color: #F6F9FE;
}
/* Produtos fora do perfil escolhido: só a coluna do mockup (no painel destacado, o visual) fica em tons de
   cinza. Texto, links e botões mantêm o contraste total. */
.pagina-produto .produto-visual {
  transition: filter 0.3s;
}
.pagina-produto .produto.is-dimmed .produto-visual {
  filter: grayscale(1);
}
.pagina-produto .produto.is-dimmed:focus-within .produto-visual {
  filter: none;
}
.pagina-produto .produto-ideal {
  display: none;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: rgba(8, 96, 219, 0.12);
  color: #064AAB;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.pagina-produto .produto.is-highlighted .produto-ideal {
  display: inline-block;
}
/* Nome do produto dentro do h3, com o mesmo visual do .tag-section (home.css) que ficava acima do título. */
.pagina-produto .produto-tag {
  display: block;
  margin: 0 0 8px;
  color: var(--color-4);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: normal;
}
.pagina-produto .produto-titulo {
  color: var(--color-3);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}
.pagina-produto .produto .description-section {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 24px;
}
.pagina-produto .produto-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-1);
  font-size: 1rem;
  font-weight: 600;
}
.pagina-produto .produto-link::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("../../images/icons/chevron-right.svg") center / contain no-repeat;
}
.pagina-produto .produto-link:hover {
  color: #064AAB;
}
/* Linha de integração com um parceiro (no Pix, o logo da Fiserv no PDV) com o mesmo tratamento dos logos
   de e-commerce (colorido, sem filtro), e os links lado a lado, o segundo menor; quebram a linha quando não cabem. */
.pagina-produto .produto-integracao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 24px;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 600;
}
.pagina-produto .produto-integracao img {
  width: auto;
  height: 28px;
}
.pagina-produto .produto-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.pagina-produto .produto-link.produto-link-secundario {
  font-size: 0.875rem;
}
.pagina-produto .produto-visual {
  margin-top: 40px;
}

@media (min-width: 768px) {
  .pagina-produto .produto .description-section {
    font-size: 1.25rem;
    line-height: 2rem;
  }
  .pagina-produto .produto:not(.produto-painel) .produto-visual {
    margin-top: 0;
  }
}

@media (min-width: 992px) {
  .pagina-produto .produto {
    padding: 96px 0;
  }
  .pagina-produto .produto-titulo {
    font-size: 2.25rem;
  }
  .pagina-produto .produto-link {
    font-size: 1.125rem;
  }
  .pagina-produto .produto-link.produto-link-secundario {
    font-size: 1rem;
  }
}

/* Mini-fluxo: três passos ligados por uma linha fina (no Pix, o do QR Code). */
.pagina-produto .mini-fluxo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 24px;
}
.pagina-produto .mini-fluxo::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 16.66%;
  right: 16.66%;
  border-top: 1px solid #C9D6EA;
}
.pagina-produto .mini-fluxo li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.pagina-produto .mini-fluxo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #DCE6F5;
  border-radius: 50%;
  background-color: #ffffff;
  color: var(--color-1);
}
.pagina-produto .mini-fluxo-icone svg {
  width: 20px;
  height: 20px;
}
.pagina-produto .mini-fluxo-rotulo {
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}
.pagina-produto .mini-fluxo-numero {
  margin-right: 4px;
  color: var(--color-1);
  font-weight: 700;
}
.pagina-produto .mini-fluxo-numero::after {
  content: ".";
}

@media (min-width: 992px) {
  .pagina-produto .mini-fluxo-rotulo {
    font-size: 0.875rem;
  }
}

/* Marquee de parceiros no produto e-commerce (Slick montado por parts/pagina-produto.js). */
.pagina-produto .produto-parceiros {
  margin: 0 0 24px;
  overflow: hidden;
}
.pagina-produto .produto-parceiros .slick-slide {
  display: flex;
  justify-content: center;
}
/* Até o parts/pagina-produto.js montar o Slick, e sem JS, os logos ficam numa linha com a mesma geometria: quatro por
   vez (três abaixo de 991px), centralizados na altura da faixa, que o width/height das imagens já reserva. */
.pagina-produto .produto-marquee:not(.slick-initialized) {
  display: flex;
  align-items: center;
}
.pagina-produto .produto-marquee:not(.slick-initialized) .parceiro {
  display: flex;
  flex: 0 0 calc(25% - 16px);
  justify-content: center;
  min-width: 0;
}
@media (max-width: 990.98px) {
  .pagina-produto .produto-marquee:not(.slick-initialized) .parceiro {
    flex-basis: calc(100% / 3 - 16px);
  }
}
.pagina-produto .produto-parceiros .parceiro {
  margin: 0 8px;
  text-align: center;
}
.pagina-produto .produto-parceiros .parceiro img {
  display: inline-block;
  width: 100%;
  max-width: 160px;
  height: auto;
}
/* O PNG da Jet ocupa a área inteira do arquivo e fica bem mais alto que os outros logos. */
.pagina-produto .produto-parceiros .parceiro .logo-compacto {
  max-width: 96px;
}

/* Painel destacado (no Pix, o split; no boleto, as condições sob medida): faixa mais leve, cantos
   arredondados. */
.pagina-produto .painel-faixa {
  padding-top: 56px;
}
.pagina-produto .produto.produto-painel {
  padding: 56px 24px;
  border-radius: 24px;
  background-color: #EEF4FE;
}
.pagina-produto .produto-painel .produto-titulo {
  font-size: 1.375rem;
}
.pagina-produto .produto-painel .buttom-menu {
  display: block;
  text-decoration: none;
}
/* Com um link ao lado (.produto-links; no Pix, o "Conheça o split de pagamento"), o botão vira item de flex e
   encolheria até a largura do texto: abaixo de 576px ele continua na coluna inteira e o link vai para baixo dele. */
@media (max-width: 575px) {
  .pagina-produto .produto-painel .produto-links .buttom-menu {
    flex-basis: 100%;
  }
}

@media (min-width: 576px) {
  .pagina-produto .produto-painel .buttom-menu {
    display: inline-block;
  }
}

@media (min-width: 992px) {
  .pagina-produto .painel-faixa {
    padding-top: 96px;
  }
  .pagina-produto .produto.produto-painel {
    padding: 96px 64px;
  }
  .pagina-produto .produto-painel .produto-visual {
    margin-top: 0;
  }
  .pagina-produto .produto-painel .produto-titulo {
    font-size: 1.75rem;
  }
}

/* ---------- Preço ---------- */
.pagina-produto .banner .container-banner {
  padding-top: 72px;
}
.pagina-produto .banner .bg-banner {
  border-radius: 24px;
}
.pagina-produto .banner .box-price {
  border-radius: 16px;
}
.pagina-produto .banner .price-text {
  margin-top: 4px;
}
.pagina-produto .nota-preco {
  color: #ffffff;
  opacity: 0.85;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}

/* Entre 768 e 991px o ornamento verde do banner (PNG de home.css) subiria sobre o
   painel destacado; abaixo de 768px home.css já troca por um SVG menor. */
@media (min-width: 768px) and (max-width: 991px) {
  .pagina-produto .banner .bg-banner::before {
    transform: scale(0.5);
    transform-origin: right bottom;
  }
}

@media (min-width: 992px) {
  .pagina-produto .banner .container-banner {
    padding-top: 112px;
  }
}

/* ---------- Integre do seu jeito ---------- */
.pagina-produto .integracao-lista {
  margin-bottom: -24px;
}
.pagina-produto .integracao-lista > li {
  margin-bottom: 24px;
}
.pagina-produto .integracao-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 24px;
  box-shadow: none;
}
.pagina-produto .integracao-card .card-title {
  margin: 16px 0 8px;
}
.pagina-produto .integracao-card .card-description {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.pagina-produto .integracao-card .produto-link {
  margin-top: auto;
  font-size: 1rem;
}

/* ---------- Depoimentos: textos e nomes da home, miniaturas de 96px das fotos ---------- */
/* Cada card tem a altura do próprio texto. */
.pagina-produto .depoimentos-lista {
  align-items: flex-start;
  margin-bottom: -24px;
}
.pagina-produto .depoimentos-lista > li {
  margin-bottom: 24px;
}
.pagina-produto .depoimento {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px 24px 24px;
  border: 1px solid #E3EAF5;
  border-radius: 16px;
  background-color: #ffffff;
}
.pagina-produto .depoimento-aspas {
  width: 40px;
  height: 32px;
  margin-bottom: 20px;
  fill: var(--color-1);
}
.pagina-produto .depoimento blockquote {
  margin: 0 0 24px;
}
.pagina-produto .depoimento blockquote p {
  margin: 0;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.pagina-produto .depoimento figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pagina-produto .depoimento-nome {
  display: block;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.pagina-produto .depoimento-empresa {
  display: block;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.pagina-produto .depoimento-foto {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- CTA final: faixa centralizada, sem imagem ---------- */
.pagina-produto .cta-faixa {
  padding: 72px 24px;
  border-radius: 24px;
  background-color: #EEF4FE;
  text-align: center;
}
.pagina-produto .cta-faixa .title {
  margin: 0 0 16px;
}
.pagina-produto .cta-faixa .description-section {
  max-width: 560px;
  margin: 0 auto 32px;
}
.pagina-produto .cta-faixa .botoes {
  justify-content: center;
}

@media (min-width: 992px) {
  .pagina-produto .cta-faixa {
    padding: 96px 24px;
  }
}

/* ---------- FAQ: sem caixas, só separadores ---------- */
.pagina-produto .secao-faq {
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
.pagina-produto .faq {
  max-width: 880px;
  margin: 0 auto;
}
.pagina-produto .faq .faq-item {
  margin: 0;
  padding: 24px 0;
  border-radius: 0;
  box-shadow: none;
}
.pagina-produto .faq .faq-item + .faq-item {
  border-top: 1px solid #E3EAF5;
}
.pagina-produto .faq .faq-pergunta {
  margin: 0;
}
.pagina-produto .faq .faq-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.pagina-produto .faq .arrow-icon {
  flex: 0 0 1rem;
}
/* "Ver mais" abaixo das perguntas. */
.pagina-produto .secao-faq .buttom-menu {
  display: block;
  width: 100% !important;
  max-width: 305px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
}
.pagina-produto .faq-content a {
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
}

@media (min-width: 1025px) {
  .pagina-produto .faq .faq-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/* ==========================================================================
   Mockups: telas em HTML/CSS, sem imagem, sempre com aria-hidden. Aqui ficam a
   moldura, as peças reutilizáveis, o mecanismo de animação e o controle que pausa
   as animações; cada página define no seu arquivo em pages/ as sequências
   (@keyframes), o estado sem animação e as peças só dela. Os mockups usados por
   mais de uma página (QR Code, boleto híbrido e os que a /para-quem-vende/ reaproveita) ficam completos no fim
   deste arquivo.
   ========================================================================== */

/* ---------- Moldura e mecanismo de animação ---------- */
.pagina-produto .mock-tela {
  max-width: 440px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 16px 48px rgba(2, 30, 70, 0.10);
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}
/* main.css põe peso 600 em todo elemento; dentro do mockup o peso vem do contexto. */
.pagina-produto .mock-tela * {
  font-weight: inherit;
}
/* Multiplicador de todas as durações e atrasos das animações dos mockups (e dos diagramas de cada
   página): aumente --mock-vel para desacelerar, diminua para acelerar (2 = duas vezes mais lento).
   Os tempos citados nos comentários das páginas são os de --mock-vel: 1. */
.pagina-produto {
  --mock-vel: 1;
}
/* As animações dos mockups usam var(--mock-estado, paused) e só rodam com o
   mockup visível: parts/pagina-produto.js põe .is-visible quando 30% dele entra na tela. A página
   pode observar outros elementos animados (no Pix, o diagrama do split). */
.pagina-produto .mock-tela.is-visible {
  --mock-estado: running;
}
.pagina-produto .mock-barra {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid #EEF2F8;
}
.pagina-produto .mock-barra span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D8E0EC;
}
.pagina-produto .mock-corpo {
  padding: 20px;
}
.pagina-produto .mock-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.pagina-produto .mock-titulo {
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 700;
}
.pagina-produto .mock-empilha {
  display: grid;
}
.pagina-produto .mock-empilha > * {
  grid-area: 1 / 1;
}
.pagina-produto .mock-cabecalho .mock-empilha {
  justify-items: end;
  margin-left: auto;
}
.pagina-produto .mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.pagina-produto .mock-cabecalho .mock-badge {
  justify-self: end;
}
.pagina-produto .mock-badge svg {
  width: 14px;
  height: 14px;
}
.pagina-produto .mock-badge-espera {
  background-color: #FFF4D6;
  color: #8A5A00;
}
.pagina-produto .mock-badge-ok {
  background-color: rgba(36, 209, 122, 0.16);
  color: #0B6B3E;
}

/* ---------- Controle de pausa das animações (WCAG 2.2.2) ----------
   Botão criado por parts/pagina-produto.js no início da seção de produtos, alinhado à direita da coluna. O
   contêiner não tem altura: o botão fica sobre o respiro de cima da primeira faixa de produto e não desloca nada.
   Com prefers-reduced-motion ele não aparece, porque não há o que pausar. */
.pagina-produto .animacoes-controle {
  position: relative;
  z-index: 1;
  height: 0;
}
.pagina-produto .animacoes-controle .container-fluid {
  display: flex;
  justify-content: flex-end;
}
/* width: auto desfaz o width: 100% que main.css põe em todo button. */
.pagina-produto .animacoes-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-top: 12px;
  padding: 6px 14px;
  border: 1px solid #E3EAF5;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.pagina-produto .animacoes-botao:hover {
  border-color: #C9D6EA;
}
.pagina-produto .animacoes-botao svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.pagina-produto .animacoes-botao .icone-retomar,
.pagina-produto.animacoes-pausadas .animacoes-botao .icone-pausar {
  display: none;
}
.pagina-produto.animacoes-pausadas .animacoes-botao .icone-retomar {
  display: block;
}
/* Pausado: --mock-estado fica em paused e as animações dos elementos observados (mockups e diagramas) saem, o que
   deixa cada um no estado sem animação, o mesmo do prefers-reduced-motion. */
.pagina-produto.animacoes-pausadas .is-visible {
  --mock-estado: paused !important;
}
.pagina-produto.animacoes-pausadas .is-observado,
.pagina-produto.animacoes-pausadas .is-observado::before,
.pagina-produto.animacoes-pausadas .is-observado::after,
.pagina-produto.animacoes-pausadas .is-observado *,
.pagina-produto.animacoes-pausadas .is-observado *::before,
.pagina-produto.animacoes-pausadas .is-observado *::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pagina-produto .animacoes-controle {
    display: none;
  }
}

/* ---------- Valor, QR Code, prazo e confirmação ---------- */
.pagina-produto .mock-valor {
  margin: 0 0 16px;
  color: var(--color-3);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.pagina-produto .mock-qrcode {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #EEF2F8;
  border-radius: 12px;
}
.pagina-produto .mock-qrcode svg {
  width: 136px;
  height: 136px;
  fill: var(--color-3);
  shape-rendering: crispEdges;
}
.pagina-produto .mock-qr-rodape {
  color: #5B6B82;
  font-size: 0.8125rem;
}
.pagina-produto .mock-expira,
.pagina-produto .mock-confirmado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pagina-produto .mock-confirmado {
  color: #0B6B3E;
  font-weight: 600;
}
.pagina-produto .mock-confirmado svg {
  width: 16px;
  height: 16px;
}
.pagina-produto .mock-timer {
  display: inline-grid;
  color: var(--color-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pagina-produto .mock-timer > span {
  grid-area: 1 / 1;
  opacity: 0;
}
.pagina-produto .mock-timer > span:last-child {
  opacity: 1;
}

/* ---------- Listas, totais e opções usados por recorrência e checkout ---------- */
.pagina-produto .mock-meses,
.pagina-produto .mock-opcoes {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.pagina-produto .mock-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #EEF2F8;
  color: #5B6B82;
}
.pagina-produto .mock-linha span:last-child {
  color: var(--color-3);
  white-space: nowrap;
}
.pagina-produto .mock-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 12px 0 16px;
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 600;
}
.pagina-produto .mock-total strong {
  font-size: 1.25rem;
  font-weight: 700;
}
.pagina-produto .mock-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.pagina-produto .mock-botao-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #D5DEEB;
  border-radius: 999px;
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 600;
}
.pagina-produto .mock-botao-sec svg {
  width: 16px;
  height: 16px;
  color: var(--color-1);
}

/* Lista de meses ou parcelas, com marcas de pago e de agendado */
.pagina-produto .mock-meses li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #EEF2F8;
}
.pagina-produto .mock-marca-ok,
.pagina-produto .mock-marca-agenda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.pagina-produto .mock-marca-ok {
  background-color: rgba(36, 209, 122, 0.16);
  color: #0B6B3E;
}
.pagina-produto .mock-marca-agenda {
  background-color: #F1F5FB;
  color: #5B6B82;
}
.pagina-produto .mock-marca-ok svg,
.pagina-produto .mock-marca-agenda svg {
  width: 14px;
  height: 14px;
}
.pagina-produto .mock-mes {
  flex: 0 0 32px;
  color: var(--color-3);
  font-weight: 700;
}
.pagina-produto .mock-mes-status {
  color: #5B6B82;
}
.pagina-produto .mock-nota {
  margin: 0;
  color: #5B6B82;
  font-size: 0.75rem;
}

/* ---------- Conversa num app de mensagens genérico (link de pagamento) ---------- */
.pagina-produto .mock-contato {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF2F8;
}
.pagina-produto .mock-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #E3EAF5;
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pagina-produto .mock-balao {
  width: fit-content;
  max-width: 85%;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 16px;
}
.pagina-produto .mock-balao-enviado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
  background-color: var(--color-1);
  color: #ffffff;
}
.pagina-produto .mock-balao-recebido {
  background-color: #F1F5FB;
  color: var(--color-3);
}
.pagina-produto .mock-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: #ffffff;
  color: var(--color-3);
  font-weight: 600;
}
.pagina-produto .mock-link-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pagina-produto .mock-link-icone svg {
  width: 16px;
  height: 16px;
}
.pagina-produto .mock-digitando {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pagina-produto .mock-digitando span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #8A96A8;
}

/* ---------- Checkout: opções de pagamento, botão e valor ---------- */
.pagina-produto .mock-opcoes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.pagina-produto .mock-opcoes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #E3EAF5;
  border-radius: 12px;
  color: #5B6B82;
}
.pagina-produto .mock-opcoes .ativo {
  border-color: var(--color-1);
  background-color: #F4F8FF;
  box-shadow: inset 0 0 0 1px var(--color-1);
  color: var(--color-3);
  font-weight: 600;
}
.pagina-produto .mock-radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid #B8C4D6;
  border-radius: 50%;
}
.pagina-produto .mock-opcoes .ativo .mock-radio {
  border: 5px solid var(--color-1);
}
.pagina-produto .mock-botao {
  display: block;
  padding: 12px;
  border-radius: 999px;
  background-color: var(--color-2);
  color: #0a3c24;
  font-weight: 700;
  text-align: center;
}
.pagina-produto .mock-checkout-valor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.pagina-produto .mock-checkout-valor .mock-valor {
  margin: 0;
}
.pagina-produto .mock-checkout-valor .mock-empilha {
  justify-items: end;
  margin-left: auto;
}
.pagina-produto .mock-checkout-valor .mock-badge {
  justify-self: end;
}

@media (min-width: 576px) {
  .pagina-produto .mock-corpo {
    padding: 24px;
  }
}

/* ==========================================================================
   Mockups usados por mais de uma página (Pix, boleto e home): o da cobrança Pix por QR Code e o documento de boleto
   com o híbrido. Ficam no fim deste arquivo, na mesma ordem em que estavam em pages/pix.css e pages/boleto.css, e os
   @keyframes mantêm os nomes de origem. O sprite com o QR e o check (#pix-qr e #pix-check no Pix e na home,
   #boleto-qr e #boleto-check no boleto) continua em cada página.
   ========================================================================== */

/* ---------- Cobrança Pix (QR Code): sequência ---------- */
/* Sem animação, e com prefers-reduced-motion, o mockup mostra o pagamento confirmado. */
.pagina-produto .mock-qr .mock-badge-espera,
.pagina-produto .mock-qr .mock-expira {
  opacity: 0;
}

/* Loop de 3,5s: timer de 14:59 a 14:56, um tick a cada 0,3s (0 a 1,2s); "Pago" e "Confirmado às
   14:32" completos aos 1,5s; tudo fica até 3,3s e volta a "Aguardando" em 0,2s. 1s = 28,571%. */
@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .mock-qr .mock-badge-espera,
  .pagina-produto .mock-qr .mock-expira {
    animation: pix-mock-espera calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-qr .mock-badge-ok,
  .pagina-produto .mock-qr .mock-confirmado {
    animation: pix-mock-pago calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-qr .mock-timer > span:nth-child(1) {
    animation: pix-mock-t1 calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-qr .mock-timer > span:nth-child(2) {
    animation: pix-mock-t2 calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-qr .mock-timer > span:nth-child(3) {
    animation: pix-mock-t3 calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-qr .mock-timer > span:nth-child(4) {
    animation: pix-mock-t4 calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pix-mock-espera {
  0%, 40% { opacity: 1; }
  42.857%, 94.286% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pix-mock-pago {
  0%, 40% { opacity: 0; }
  42.857%, 94.286% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pix-mock-t1 {
  0%, 8.5% { opacity: 1; }
  8.571%, 94.2% { opacity: 0; }
  94.286%, 100% { opacity: 1; }
}
@keyframes pix-mock-t2 {
  0%, 8.5% { opacity: 0; }
  8.571%, 17.1% { opacity: 1; }
  17.143%, 100% { opacity: 0; }
}
@keyframes pix-mock-t3 {
  0%, 17.1% { opacity: 0; }
  17.143%, 25.7% { opacity: 1; }
  25.714%, 100% { opacity: 0; }
}
@keyframes pix-mock-t4 {
  0%, 25.7% { opacity: 0; }
  25.714%, 94.2% { opacity: 1; }
  94.286%, 100% { opacity: 0; }
}

/* ---------- Documento de boleto (base do híbrido e, no boleto, dos formatos, do e-commerce e das notificações) ----------
   Folha branca inspirada no boleto híbrido real (BoletoHibrido): bordas #dfdfdf, cabeçalho com a marca da
   loja e o resumo, faixa "Pague agora com seu Pix" com o QR, linha de corte tracejada e a ficha de
   compensação simplificada, com linha digitável fictícia e código de barras decorativo. */
.pagina-produto .mock-tela.mock-boleto {
  border: 1px solid #DFDFDF;
  border-radius: 8px;
}
.pagina-produto .mock-boleto-folha {
  padding: 16px;
}
.pagina-produto .mock-boleto-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
/* Marca da loja: lugar do logo, com o texto "Sua loja". */
.pagina-produto .mock-boleto-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 700;
}
.pagina-produto .mock-boleto-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pagina-produto .mock-boleto-logo svg {
  width: 18px;
  height: 18px;
}
.pagina-produto .mock-boleto-resumo {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  align-items: baseline;
  text-align: right;
}
.pagina-produto .mock-boleto-rotulo {
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.pagina-produto .mock-boleto-dado {
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}
/* Faixa do Pix: texto à esquerda, QR à direita. */
.pagina-produto .mock-boleto-pix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #DFDFDF;
  border-radius: 8px;
}
.pagina-produto .mock-boleto-pix-titulo {
  display: block;
  margin-bottom: 2px;
  color: var(--color-1);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pagina-produto .mock-boleto-pix-texto {
  color: #5B6B82;
  font-size: 0.75rem;
  line-height: 1.35;
}
/* QR decorativo do documento. */
.pagina-produto .mock-boleto-qr {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  fill: var(--color-3);
  shape-rendering: crispEdges;
}
.pagina-produto .mock-boleto-qr {
  padding: 4px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(2, 30, 70, 0.12);
}
.pagina-produto .mock-boleto-corte {
  margin: 14px 0;
  border-top: 2px dashed #DFDFDF;
}
/* Ficha de compensação simplificada. */
.pagina-produto .mock-boleto-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #DFDFDF;
}
.pagina-produto .mock-boleto-banco {
  flex: 0 0 auto;
  padding: 0 10px;
  border-right: 2px solid var(--color-3);
  border-left: 2px solid var(--color-3);
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 800;
}
.pagina-produto .mock-boleto-digitavel {
  color: var(--color-3);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  word-spacing: 2px;
}
.pagina-produto .mock-boleto-campos {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid #DFDFDF;
}
.pagina-produto .mock-boleto-campo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid #DFDFDF;
}
.pagina-produto .mock-boleto-campo:nth-last-child(-n + 2) {
  border-bottom: 0;
}
/* Coluna da direita da ficha (vencimento, valor): fundo cinza-claro, como no boleto real. */
.pagina-produto .mock-boleto-campo.mock-boleto-destaque {
  padding-left: 8px;
  border-left: 1px solid #DFDFDF;
  background-color: #F8F9FA;
  text-align: right;
}
.pagina-produto .mock-barras {
  display: block;
  height: 36px;
  margin-top: 10px;
  background: linear-gradient(90deg, #021E46 0px 2px, transparent 2px 3px, #021E46 3px 5px, transparent 5px 8px, #021E46 8px 11px, transparent 11px 13px, #021E46 13px 16px, transparent 16px 19px, #021E46 19px 20px, transparent 20px 23px, #021E46 23px 24px, transparent 24px 25px, #021E46 25px 28px, transparent 28px 29px, #021E46 29px 31px, transparent 31px 32px, #021E46 32px 33px, transparent 33px 36px, #021E46 36px 39px, transparent 39px 42px, #021E46 42px 45px, transparent 45px 46px, #021E46 46px 48px, transparent 48px 50px, #021E46 50px 51px, transparent 51px 54px, #021E46 54px 55px, transparent 55px 58px, #021E46 58px 59px, transparent 59px 60px, #021E46 60px 63px, transparent 63px 66px, #021E46 66px 69px, transparent 69px 72px, #021E46 72px 75px, transparent 75px 78px, #021E46 78px 79px, transparent 79px 81px, #021E46 81px 82px, transparent 82px 84px, #021E46 84px 86px, transparent 86px 87px, #021E46 87px 90px, transparent 90px 91px, #021E46 91px 94px, transparent 94px 96px, #021E46 96px 97px, transparent 97px 99px, #021E46 99px 101px, transparent 101px 103px, #021E46 103px 104px, transparent 104px 107px, #021E46 107px 109px, transparent 109px 111px, #021E46 111px 114px, transparent 114px 116px, #021E46 116px 118px, transparent 118px 120px, #021E46 120px 121px, transparent 121px 122px, #021E46 122px 124px, transparent 124px 126px, #021E46 126px 128px, transparent 128px 129px, #021E46 129px 131px, transparent 131px 132px, #021E46 132px 135px, transparent 135px 136px, #021E46 136px 137px, transparent 137px 140px, #021E46 140px 142px, transparent 142px 144px, #021E46 144px 147px, transparent 147px 148px, #021E46 148px 150px, transparent 150px 152px, #021E46 152px 154px, transparent 154px 157px, #021E46 157px 158px, transparent 158px 159px, #021E46 159px 161px, transparent 161px 162px, #021E46 162px 163px, transparent 163px 166px, #021E46 166px 169px, transparent 169px 171px, #021E46 171px 173px, transparent 173px 175px, #021E46 175px 176px, transparent 176px 177px, #021E46 177px 180px, transparent 180px 181px, #021E46 181px 183px, transparent 183px 184px, #021E46 184px 187px, transparent 187px 190px, #021E46 190px 192px, transparent 192px 193px, #021E46 193px 196px, transparent 196px 197px, #021E46 197px 198px, transparent 198px 200px, #021E46 200px 203px, transparent 203px 205px, #021E46 205px 206px, transparent 206px 208px, #021E46 208px 209px, transparent 209px 212px, #021E46 212px 213px, transparent 213px 215px, #021E46 215px 217px, transparent 217px 220px, #021E46 220px 223px, transparent 223px 226px, #021E46 226px 227px, transparent 227px 228px, #021E46 228px 230px, transparent 230px 232px, #021E46 232px 235px, transparent 235px 237px, #021E46 237px 240px, transparent 240px 243px, #021E46 243px 245px, transparent 245px 248px, #021E46 248px 250px, transparent 250px 252px, #021E46 252px 255px, transparent 255px 257px);
  background-size: 257px 100%;
  background-repeat: repeat-x;
}
.pagina-produto .mock-boleto-rodape {
  display: block;
  margin-top: 6px;
  color: var(--color-3);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
}

@media (min-width: 576px) {
  .pagina-produto .mock-boleto-folha {
    padding: 20px;
  }
  .pagina-produto .mock-boleto-qr {
    flex-basis: 76px;
    width: 76px;
    height: 76px;
  }
}

/* ---------- Boleto híbrido (#hibrido) ----------
   Documento da base (logo acima) com um badge de status no topo. A sequência mostra
   as duas formas de pagar a mesma cobrança: primeiro pelo Pix (a faixa do Pix ganha um destaque sutil
   enquanto o cliente paga), depois pelo boleto (o destaque passa para a ficha de compensação).
   Os três estados do badge ficam empilhados (.mock-empilha), então a altura não muda durante o loop. */
.pagina-produto .mock-hibrido-status {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF2F8;
}
/* Em 320 o "Pago via boleto · aprovado às 14:47" não cabe numa linha: quebra depois do "·"
   (os demais espaços são &nbsp;) e o badge vira um retângulo arredondado de duas linhas. */
.pagina-produto .mock-hibrido-status .mock-badge {
  align-self: center;
  border-radius: 14px;
  white-space: normal;
}
/* A ficha não tem caixa própria: o destaque é o fundo dela estendido 8px por box-shadow, sem mudar
   o layout, com um contorno de 1px por fora. 8px + 1px cabem no padding da folha e na margem do corte. */
.pagina-produto .mock-hibrido .mock-boleto-ficha {
  border-radius: 1px;
}

/* Sem animação (sem JS e com prefers-reduced-motion): pago via boleto, com a ficha em destaque. */
.pagina-produto .mock-hibrido .mock-badge-espera,
.pagina-produto .mock-hibrido .mock-hibrido-pix {
  opacity: 0;
}
.pagina-produto .mock-hibrido .mock-boleto-ficha {
  background-color: #F4F8FF;
  box-shadow: 0 0 0 8px #F4F8FF, 0 0 0 9px rgba(8, 96, 219, 0.35);
}

/* Loop de 7s: "Aguardando pagamento" de 0 a 1,4s, com a faixa do Pix em destaque a partir de 0,7s;
   "Pago via Pix · 14:32" completo aos 1,6s e parado até 3,3s; volta a "Aguardando" em 0,2s (3,5s) e o
   destaque da faixa sai junto; a ficha entra em destaque aos 4,2s; "Pago via boleto · aprovado às 14:47"
   completo aos 5,1s e parado até 6,8s; volta ao começo em 0,2s. Trocas por crossfade de 0,2s.
   Depende de parts/pagina-produto.js (.is-observado); sem JS fica o estado sem animação. 1s = 14,286%. */
@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .mock-hibrido.is-observado .mock-badge-espera {
    animation: boleto-hibrido-espera calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-hibrido.is-observado .mock-hibrido-pix {
    animation: boleto-hibrido-pago-pix calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-hibrido.is-observado .mock-hibrido-boleto {
    animation: boleto-hibrido-pago-boleto calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-hibrido.is-observado .mock-boleto-pix {
    animation: boleto-hibrido-faixa calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-hibrido.is-observado .mock-boleto-ficha {
    animation: boleto-hibrido-ficha calc(7s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes boleto-hibrido-espera {
  0%, 20% { opacity: 1; }
  22.857%, 47.143% { opacity: 0; }
  50%, 70% { opacity: 1; }
  72.857%, 97.143% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes boleto-hibrido-pago-pix {
  0%, 20% { opacity: 0; }
  22.857%, 47.143% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes boleto-hibrido-pago-boleto {
  0%, 70% { opacity: 0; }
  72.857%, 97.143% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes boleto-hibrido-faixa {
  0%, 10% { border-color: #DFDFDF; background-color: #ffffff; }
  12.857%, 47.143% { border-color: rgba(8, 96, 219, 0.35); background-color: #F4F8FF; }
  50%, 100% { border-color: #DFDFDF; background-color: #ffffff; }
}
@keyframes boleto-hibrido-ficha {
  0%, 60% { background-color: #ffffff; box-shadow: 0 0 0 8px #ffffff, 0 0 0 9px rgba(8, 96, 219, 0); }
  62.857%, 97.143% { background-color: #F4F8FF; box-shadow: 0 0 0 8px #F4F8FF, 0 0 0 9px rgba(8, 96, 219, 0.35); }
  100% { background-color: #ffffff; box-shadow: 0 0 0 8px #ffffff, 0 0 0 9px rgba(8, 96, 219, 0); }
}

/* ==========================================================================
   Mockups do Pix e do boleto que a /para-quem-vende/ também usa: PDV, contextos do Pix Automático, checkout e
   diagrama do split (vindos de pages/pix.css), e etiqueta de cenário, formatos e régua de notificação (vindos de
   pages/boleto.css). Mesma ordem em que estavam lá, e os @keyframes mantêm os nomes de origem. O sprite com o QR e
   o check continua em cada página.
   ========================================================================== */

/* O diagrama do split anima só na tela, como os mockups. */
.pagina-produto .split-diagrama.is-visible {
  --mock-estado: running;
}

/* QRs do cupom e da tela do PDV com o mesmo desenho do .mock-qrcode. */
.pagina-produto .mock-cupom-qr,
.pagina-produto .mock-pdv-qr {
  fill: var(--color-3);
  shape-rendering: crispEdges;
}

/* ---------- PDV ---------- */
/* Tela Pix PDV da PagHiper e cupom impresso. No mobile o cupom fica abaixo do painel;
   a partir de 768px ele se sobrepõe ao canto inferior direito, 24px para fora. */
.pagina-produto .mock-tela.mock-pdv {
  position: relative;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.pagina-produto .mock-pdv-painel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 16px 48px rgba(2, 30, 70, 0.10);
}
/* Aviso verde que cobre a barra da janela quando o Pix entra. */
.pagina-produto .mock-pdv-aviso {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px 16px;
  background-color: #0B6B3E;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.pagina-produto .mock-pdv-aviso svg {
  width: 14px;
  height: 14px;
}
.pagina-produto .mock-pdv-cobranca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.pagina-produto .mock-pdv-cobranca .mock-valor {
  margin: 0 0 6px;
}
.pagina-produto .mock-pdv-expira {
  margin: 0;
  color: #5B6B82;
  font-size: 0.8125rem;
}
.pagina-produto .mock-pdv-expira strong {
  color: var(--color-3);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pagina-produto .mock-pdv-qr {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
}
.pagina-produto .mock-pdv-ultimos {
  margin: 0 0 4px;
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pagina-produto .mock-pdv-lista {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.pagina-produto .mock-pdv-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #EEF2F8;
  color: #5B6B82;
  font-size: 0.8125rem;
}
.pagina-produto .mock-pdv-lista strong {
  color: var(--color-3);
  font-weight: 700;
}

@media (min-width: 576px) {
  .pagina-produto .mock-pdv-qr {
    flex-basis: 120px;
    width: 120px;
    height: 120px;
  }
}
.pagina-produto .mock-cupom {
  position: relative;
  width: 180px;
  margin: 24px auto 0;
  filter: drop-shadow(0 10px 20px rgba(2, 30, 70, 0.16));
}
.pagina-produto .mock-cupom-papel {
  position: relative;
  padding: 14px 16px 22px;
  background-color: #ffffff;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 96.667% 100%, 93.333% calc(100% - 8px), 90% 100%, 86.667% calc(100% - 8px), 83.333% 100%, 80% calc(100% - 8px), 76.667% 100%, 73.333% calc(100% - 8px), 70% 100%, 66.667% calc(100% - 8px), 63.333% 100%, 60% calc(100% - 8px), 56.667% 100%, 53.333% calc(100% - 8px), 50% 100%, 46.667% calc(100% - 8px), 43.333% 100%, 40% calc(100% - 8px), 36.667% 100%, 33.333% calc(100% - 8px), 30% 100%, 26.667% calc(100% - 8px), 23.333% 100%, 20% calc(100% - 8px), 16.667% 100%, 13.333% calc(100% - 8px), 10% 100%, 6.667% calc(100% - 8px), 3.333% 100%, 0% calc(100% - 8px));
}
.pagina-produto .mock-cupom-topo {
  margin: 0 0 8px;
  color: #5B6B82;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pagina-produto .mock-cupom-qr {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
}
.pagina-produto .mock-cupom-texto {
  margin: 0 0 2px;
  color: #5B6B82;
  font-size: 0.75rem;
}
.pagina-produto .mock-cupom-valor {
  margin: 0;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 700;
}
.pagina-produto .mock-carimbo {
  position: absolute;
  top: 42%;
  left: 50%;
  padding: 2px 12px;
  border: 2px solid #0E9F5A;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #0E9F5A;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(-12deg);
}
/* Sem animação, e com prefers-reduced-motion: Pix recebido, com o carimbo e o aviso verde. */
.pagina-produto .mock-pdv .mock-badge-espera {
  opacity: 0;
}

/* A partir de 768px o cupom cobre só os 56px finais do painel, que ficam vazios,
   e a margem de baixo reserva o espaço do resto dele. O PDV fica na coluna da direita:
   o painel encolhe o quanto o cupom sai para fora, para o cupom terminar dentro da coluna
   em vez de encostar na borda da tela. */
@media (min-width: 768px) {
  .pagina-produto .mock-tela.mock-pdv {
    max-width: min(440px, calc(100% - 24px));
    margin-bottom: 11rem;
  }
  .pagina-produto .mock-pdv .mock-corpo {
    padding-bottom: 72px;
  }
  .pagina-produto .mock-cupom {
    position: absolute;
    top: calc(100% - 56px);
    right: -12px;
    margin: 0;
  }
}

@media (min-width: 992px) {
  .pagina-produto .mock-tela.mock-pdv {
    max-width: min(440px, calc(100% - 48px));
  }
  .pagina-produto .mock-cupom {
    right: -24px;
  }
}

/* Loop de 3,5s: "Aguardando" até 1,4s; "Pix recebido", carimbo e aviso verde completos aos 1,6s;
   tudo fica até 3,3s e volta em 0,2s. 1s = 28,571%. */
@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .mock-pdv .mock-badge-espera {
    animation: pix-mock-pdv-espera calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-pdv .mock-badge-ok {
    animation: pix-mock-pdv-ok calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-carimbo {
    animation: pix-mock-carimbo calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-pdv-aviso {
    animation: pix-mock-pdv-aviso calc(3.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pix-mock-pdv-espera {
  0%, 40% { opacity: 1; }
  45.714%, 94.286% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pix-mock-pdv-ok {
  0%, 40% { opacity: 0; }
  45.714%, 94.286% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pix-mock-pdv-aviso {
  0%, 40% { opacity: 0; transform: translateY(-100%); }
  45.714%, 94.286% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes pix-mock-carimbo {
  0%, 40% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.4); }
  45.714%, 94.286% { opacity: 0.9; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}

/* ---------- Pix Automático: contextos da cobrança ---------- */
.pagina-produto .mock-contextos {
  margin-bottom: 16px;
}
.pagina-produto .mock-contexto {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
}
.pagina-produto .mock-contexto-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #EEF4FE;
  color: var(--color-1);
}
.pagina-produto .mock-contexto-icone svg {
  width: 24px;
  height: 24px;
}
.pagina-produto .mock-contexto-nome {
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.pagina-produto .mock-contexto-valor {
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Sem animação, e com prefers-reduced-motion, fica só o primeiro contexto. */
.pagina-produto .mock-contexto + .mock-contexto {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .mock-contexto {
    animation: pix-mock-contexto calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-contexto:nth-child(2) {
    animation-delay: calc(-4.5s * var(--mock-vel));
  }
  .pagina-produto .mock-contexto:nth-child(3) {
    animation-delay: calc(-3s * var(--mock-vel));
  }
  .pagina-produto .mock-contexto:nth-child(4) {
    animation-delay: calc(-1.5s * var(--mock-vel));
  }
}

/* Loop de 6s: 1,5s por contexto, com 0,25s de troca (4,167% de 6s) */
@keyframes pix-mock-contexto {
  0%, 20.833% { opacity: 1; }
  25%, 95.833% { opacity: 0; }
  100% { opacity: 1; }
}

/* ---------- Checkout: sequência das duas telas ----------
   As regras se prendem às telas do checkout do Pix (.mock-checkout-tela1 e .mock-checkout-tela2), e não ao
   .mock-checkout, que o checkout do e-commerce do boleto também usa. */
.pagina-produto .mock-checkout-tela2 .mock-expira {
  margin: 0;
  color: #5B6B82;
  font-size: 0.8125rem;
}
/* Sem animação, e com prefers-reduced-motion: segunda tela, pagamento confirmado. */
.pagina-produto .mock-checkout-tela1,
.pagina-produto .mock-checkout-tela2 .mock-badge-espera,
.pagina-produto .mock-checkout-tela2 .mock-expira {
  opacity: 0;
}

/* Loop de 5s: tela 1 até 1,5s (botão pressionado nos 0,2s finais), tela 2 de 1,5 a 5s, timer de
   1,5 a 3,1s (0,4s por tick) e confirmação completa aos 3,2s. 1s = 20%. */
@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .mock-checkout-tela1 {
    animation: pix-mock-co-tela1 calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela2 {
    animation: pix-mock-co-tela2 calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela1 .mock-botao {
    animation: pix-mock-co-botao calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela2 .mock-badge-espera,
  .pagina-produto .mock-checkout-tela2 .mock-expira {
    animation: pix-mock-co-espera calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela2 .mock-badge-ok {
    animation: pix-mock-co-ok calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela2 .mock-timer > span:nth-child(1) {
    animation: pix-mock-co-t1 calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela2 .mock-timer > span:nth-child(2) {
    animation: pix-mock-co-t2 calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela2 .mock-timer > span:nth-child(3) {
    animation: pix-mock-co-t3 calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-checkout-tela2 .mock-timer > span:nth-child(4) {
    animation: pix-mock-co-t4 calc(5s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes pix-mock-co-tela1 {
  0%, 29% { opacity: 1; }
  30%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pix-mock-co-tela2 {
  0%, 29% { opacity: 0; }
  31%, 97% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pix-mock-co-botao {
  0%, 25.9% { filter: none; }
  26%, 29.9% { filter: brightness(0.92); }
  30%, 100% { filter: none; }
}
@keyframes pix-mock-co-espera {
  0%, 62% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes pix-mock-co-ok {
  0%, 62% { opacity: 0; }
  64%, 100% { opacity: 1; }
}
@keyframes pix-mock-co-t1 {
  0%, 37.9% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes pix-mock-co-t2 {
  0%, 37.9% { opacity: 0; }
  38%, 45.9% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes pix-mock-co-t3 {
  0%, 45.9% { opacity: 0; }
  46%, 53.9% { opacity: 1; }
  54%, 100% { opacity: 0; }
}
@keyframes pix-mock-co-t4 {
  0%, 53.9% { opacity: 0; }
  54%, 100% { opacity: 1; }
}

/* ---------- Split: diagrama da divisão ---------- */
/* O nó de origem é um só, fixo, acima da pilha de cenários. A etiqueta de cada cenário fica dentro
   dele, mas aparece acima da origem, no espaço que o padding do diagrama reserva. */
.pagina-produto .split-diagrama {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  padding-top: 36px;
  color: var(--color-1);
  text-align: center;
}
.pagina-produto .split-no {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(2, 30, 70, 0.08);
}
.pagina-produto .split-origem {
  width: 60%;
  margin: 0 auto;
}
.pagina-produto .split-rotulo {
  color: #5B6B82;
  font-size: 0.8125rem;
  font-weight: 600;
}
.pagina-produto .split-no strong {
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
}
.pagina-produto .split-setas {
  display: block;
  width: 100%;
  height: auto;
}
.pagina-produto .split-destinos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pagina-produto .split-cenarios {
  align-items: start;
}
.pagina-produto .split-etiqueta {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-1);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* As setas se desenham por stroke-dashoffset com pathLength="1", que só normaliza o traço nas
   unidades do viewBox: aqui o traço não usa non-scaling-stroke. 1,2 unidades dão cerca de 1,8px.
   Traço 1 e intervalo 2, para não sobrar na ponta um traço de comprimento zero, que a ponta
   redonda desenharia como um ponto. */
.pagina-produto .split-setas path {
  vector-effect: none;
  stroke-width: 1.2;
}
.pagina-produto .split-setas path[pathLength] {
  stroke-dasharray: 1 2;
}
/* Delivery: três destinos em três colunas, com nós mais compactos. */
.pagina-produto .split-cenario-tres .split-destinos {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pagina-produto .split-cenario-tres .split-destinos .split-no {
  padding: 12px 8px;
}
.pagina-produto .split-cenario-tres .split-destinos .split-rotulo {
  font-size: 0.75rem;
}
.pagina-produto .split-cenario-tres .split-destinos strong {
  font-size: 1rem;
}

/* Abaixo de 576px as três colunas não cabem: os destinos do Delivery empilham e as setas viram uma
   linha vertical que sai de baixo da origem, com uma saída para cada destino. */
@media (max-width: 575px) {
  .pagina-produto .split-cenario-tres .split-setas {
    display: none;
  }
  .pagina-produto .split-cenario-tres .split-destinos {
    position: relative;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
    padding-left: calc(20% + 28px);
  }
  /* A linha desce da origem e termina no meio do último destino, que tem 48px de altura. */
  .pagina-produto .split-cenario-tres .split-destinos::before {
    content: "";
    position: absolute;
    top: -24px;
    bottom: 23px;
    left: calc(20% + 12px);
    border-left: 2px solid currentColor;
    transform-origin: top;
  }
  .pagina-produto .split-cenario-tres .split-destinos .split-no {
    position: relative;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 16px;
  }
  .pagina-produto .split-cenario-tres .split-destinos .split-no::before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: -16px;
    width: 16px;
    border-top: 2px solid var(--color-1);
  }
  .pagina-produto .split-cenario-tres .split-destinos .split-rotulo,
  .pagina-produto .split-cenario-tres .split-destinos strong {
    line-height: 24px;
  }
}

/* Cenários do split: loop de 7,5s, 2,5s por cenário (1s = 13,333%). A origem não anima. Dentro de
   cada cenário, etiqueta e setas a partir de 0,2s (setas até 0,6s), destinos em sequência de 0,6 a
   1,1s, tudo parado até 2,2s e fade até 2,5s. Os três ficam empilhados (.mock-empilha), então a altura
   é a do maior e não há salto.
   Sem animação (sem JS ou com prefers-reduced-motion) fica só o Delivery, completo. */
.pagina-produto .split-cenario {
  opacity: 0;
}
.pagina-produto .split-cenario.split-cenario-tres {
  opacity: 1;
}
.pagina-produto .split-cenario:nth-child(2) {
  --split-atraso: -5s;
}
.pagina-produto .split-cenario:nth-child(3) {
  --split-atraso: -2.5s;
}

@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .split-diagrama.is-observado .split-cenario {
    animation: pix-split-cenario calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
  .pagina-produto .split-diagrama.is-observado .split-etiqueta {
    animation: pix-split-etiqueta calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
  .pagina-produto .split-diagrama.is-observado .split-setas path[pathLength] {
    animation: pix-split-seta calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
  .pagina-produto .split-diagrama.is-observado .split-ponta {
    animation: pix-split-ponta calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
  .pagina-produto .split-diagrama.is-observado .split-destinos::before {
    animation: pix-split-trilho calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
  .pagina-produto .split-diagrama.is-observado .split-destinos > .split-no:nth-child(1) {
    animation: pix-split-d1 calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
  .pagina-produto .split-diagrama.is-observado .split-cenario-tres .split-destinos > .split-no:nth-child(2) {
    animation: pix-split-d2 calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
  .pagina-produto .split-diagrama.is-observado .split-cenario:not(.split-cenario-tres) .split-destinos > .split-no:nth-child(2),
  .pagina-produto .split-diagrama.is-observado .split-destinos > .split-no:nth-child(3) {
    animation: pix-split-d3 calc(7.5s * var(--mock-vel)) infinite var(--mock-estado, paused);
    animation-delay: calc(var(--split-atraso, 0s) * var(--mock-vel));
  }
}

@keyframes pix-split-cenario {
  0%, 29.333% { opacity: 1; }
  33.333%, 100% { opacity: 0; }
}
@keyframes pix-split-etiqueta {
  0%, 2.667% { opacity: 0; }
  5.333%, 100% { opacity: 1; }
}
@keyframes pix-split-seta {
  0%, 2.667% { stroke-dashoffset: 1; }
  8%, 100% { stroke-dashoffset: 0; }
}
@keyframes pix-split-ponta {
  0%, 7.111% { opacity: 0; }
  8%, 100% { opacity: 1; }
}
@keyframes pix-split-trilho {
  0%, 2.667% { transform: scaleY(0); }
  8%, 100% { transform: scaleY(1); }
}
@keyframes pix-split-d1 {
  0%, 8% { opacity: 0; transform: translateY(8px); }
  12%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes pix-split-d2 {
  0%, 9.333% { opacity: 0; transform: translateY(8px); }
  13.333%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes pix-split-d3 {
  0%, 10.667% { opacity: 0; transform: translateY(8px); }
  14.667%, 100% { opacity: 1; transform: translateY(0); }
}

/* Etiqueta do cenário (no boleto, nos mockups #aprovacao e #formatos), como a .split-etiqueta do Pix, numa linha
   própria. */
.pagina-produto .mock-etiqueta {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: #EEF4FE;
  color: var(--color-1);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- Fatura, condomínio e carnê (#formatos) ----------
   Documento da base (Documento de boleto, mais acima) com quatro cenários empilhados (.mock-empilha), cada um com a
   etiqueta do formato (.mock-etiqueta, logo acima), o cabeçalho do boleto ("Sua loja", valor a pagar e
   vencimento) e o corpo: a tabela de itens (descrição e valor) com o total e, à direita dela, o QR do Pix. Nos
   cenários de carnê, o canhoto com a faixa de parcelas fica abaixo do corpo. Abaixo do corte, a ficha de
   compensação fica só com a linha digitável e o código de barras, igual nos quatro cenários. Os cenários têm fundo
   branco e ocupam a mesma célula: a altura é a do maior e não muda no loop. Até 767px o documento ocupa a coluna
   inteira; a partir de 768px, no máximo 520px. */
.pagina-produto .mock-tela.mock-formatos {
  max-width: none;
}
.pagina-produto .mock-formatos-cenario {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
/* Até 374px a tabela ocupa a largura toda e o QR fica embaixo dela, alinhado à direita, com o texto ao lado. */
.pagina-produto .mock-formatos-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pagina-produto .mock-formatos-itens {
  flex: 1 1 auto;
  min-width: 0;
}
.pagina-produto .mock-formatos-colunas {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #DFDFDF;
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.pagina-produto .mock-formatos .mock-linha {
  padding: 7px 0;
  font-size: 0.8125rem;
  line-height: 1.35;
}
/* Desconto em verde; precisa vencer a cor do valor em .mock-linha span:last-child (mais acima). */
.pagina-produto .mock-formatos .mock-linha .mock-formatos-desconto {
  color: #0B6B3E;
}
/* Total: fundo cinza-claro, como a coluna de destaque da ficha. */
.pagina-produto .mock-formatos .mock-total {
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #F8F9FA;
  font-size: 0.8125rem;
}
.pagina-produto .mock-formatos .mock-total strong {
  font-size: 1.125rem;
  white-space: nowrap;
}
.pagina-produto .mock-formatos-pix {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--color-1);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.pagina-produto .mock-formatos-qr {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 4px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(2, 30, 70, 0.12);
  fill: var(--color-3);
  shape-rendering: crispEdges;
}
/* Canhoto do carnê: moldura fina com o nome do plano e a faixa de parcelas. */
.pagina-produto .mock-formatos-canhoto {
  margin-top: 12px;
  padding: 10px 10px 12px;
  border: 1px solid #DFDFDF;
  border-radius: 8px;
}
.pagina-produto .mock-formatos-canhoto .mock-boleto-rotulo {
  display: block;
  font-weight: 600;
}
/* Faixa de parcelas: cada parcela é uma folha do carnê, com a borda de cima tracejada como a linha de corte entre as
   folhas. Pagas com o check verde, a atual contornada em azul com o ponto (como a opção ativa do checkout), as
   seguintes com o anel vazio. */
.pagina-produto .mock-formatos-parcelas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.pagina-produto .mock-formatos-parcelas li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px 6px;
  border: 1px solid #E3EAF5;
  border-top: 2px dashed #DFDFDF;
  border-radius: 6px;
  color: var(--color-3);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.pagina-produto .mock-formatos-parcelas .mock-marca-ok,
.pagina-produto .mock-formatos-parcelas li::before {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.pagina-produto .mock-formatos-parcelas .mock-marca-ok svg {
  width: 12px;
  height: 12px;
}
.pagina-produto .mock-formatos-atual::before,
.pagina-produto .mock-formatos-aberta::before {
  content: "";
  box-sizing: border-box;
  border-radius: 50%;
}
.pagina-produto .mock-formatos-parcelas .mock-formatos-atual {
  border-color: var(--color-1);
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 9px;
  background-color: #F4F8FF;
  box-shadow: inset 0 0 0 1px var(--color-1);
}
.pagina-produto .mock-formatos-atual::before {
  background: radial-gradient(circle, var(--color-1) 0 4px, #DCE8FC 4.5px);
}
.pagina-produto .mock-formatos-aberta::before {
  border: 2px solid #B8C4D6;
}
.pagina-produto .mock-formatos-parcelas .mock-formatos-mais {
  justify-content: flex-end;
  padding: 0 2px 6px;
  border: 0;
  color: #5B6B82;
  font-size: 0.875rem;
}
.pagina-produto .mock-formatos-parcelas.mock-formatos-seis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A partir de 360px as seis parcelas do crediário cabem numa linha. */
@media (min-width: 360px) {
  .pagina-produto .mock-formatos-parcelas.mock-formatos-seis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }
}

/* A partir de 375px o QR vai para a direita da tabela, com "Pague com Pix" embaixo dele, em duas linhas. */
@media (min-width: 375px) {
  .pagina-produto .mock-formatos-corpo {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }
  .pagina-produto .mock-formatos-pix {
    flex-direction: column;
    gap: 6px;
    width: 72px;
    text-align: center;
    white-space: normal;
  }
}

@media (min-width: 576px) {
  .pagina-produto .mock-formatos .mock-linha {
    font-size: 0.875rem;
  }
  .pagina-produto .mock-formatos .mock-total strong {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .pagina-produto .mock-tela.mock-formatos {
    max-width: 520px;
  }
}

/* Sem animação (sem JS e com prefers-reduced-motion): só o cenário 1, "Condomínio · fatura". Ele é a camada de
   baixo da pilha e nunca some: os outros três entram por cima dele. */
.pagina-produto .mock-formatos-cenario + .mock-formatos-cenario {
  opacity: 0;
}

/* Loop de 10s, 2,5s por cenário (1s = 10%). Cada cenário entra por cima do anterior em 0,2s (fundo branco
   opaco), e o anterior só sai depois de coberto, então nunca há quadro vazio nem mistura de três camadas:
   0 a 2,3s Condomínio; 2,3 a 2,5s entra Escola; 2,5 a 4,8s Escola; 4,8 a 5s entra Clínica (Escola sai por
   baixo aos 5s); 5 a 7,3s Clínica; 7,3 a 7,5s entra Loja (Clínica sai por baixo aos 7,5s); 7,5 a 9,8s
   Loja; 9,8 a 10s Loja sai e revela o Condomínio, que não anima.
   Depende de parts/pagina-produto.js (.is-observado); sem JS fica o estado sem animação. */
@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .mock-formatos.is-observado .mock-formatos-cenario:nth-child(2),
  .pagina-produto .mock-formatos.is-observado .mock-formatos-cenario:nth-child(3) {
    animation: boleto-formatos-entra calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-formatos.is-observado .mock-formatos-cenario:nth-child(3) {
    animation-delay: calc(-7.5s * var(--mock-vel));
  }
  .pagina-produto .mock-formatos.is-observado .mock-formatos-cenario:nth-child(4) {
    animation: boleto-formatos-ultimo calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

/* Escola (sem atraso) e Clínica (atraso de -7,5s): entra de 23 a 25%, fica até 50% e sai por baixo. */
@keyframes boleto-formatos-entra {
  0%, 23% { opacity: 0; }
  25%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}
/* Loja: entra de 73 a 75%, fica até 98% e sai de 98 a 100%, revelando o Condomínio. */
@keyframes boleto-formatos-ultimo {
  0%, 73% { opacity: 0; }
  75%, 98% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Régua de notificação (#notificacoes): linha do tempo dos avisos e o e-mail ----------
   Tela de sistema em duas colunas. À esquerda, a régua numa linha do tempo vertical: quatro itens com data, rótulo e
   canal, 16px um do outro, cada um com um marcador redondo ligado ao próximo por um traço. Os três primeiros são
   e-mails (envelope azul); o último é o pagamento, com o check verde e os dois avisos. À direita, a miniatura do
   e-mail: "Sua loja" no lugar do logo, assunto, uma linha do corpo e o botão. Com o mockup estreito (até 575px e de
   768 a 991px) a miniatura fica abaixo da linha do tempo. A marca "Sua loja" reaproveita .mock-boleto-marca e
   .mock-boleto-logo da base do documento de boleto. O trilho (traços e marcadores) fica sempre no lugar, e só os
   textos mudam de opacidade e posição: a altura não muda no loop. */
.pagina-produto .mock-tela.mock-notificacoes {
  max-width: 520px;
}
.pagina-produto .mock-notificacoes-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.pagina-produto .mock-notificacoes-regua {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 16px;
}
/* Item: marcador na primeira coluna, data, rótulo e canal empilhados na segunda. */
.pagina-produto .mock-notificacoes-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-content: start;
  gap: 2px 12px;
}
.pagina-produto .mock-notificacoes-item > * {
  grid-column: 2;
}
/* O marcador sobe 4px para ficar centrado na linha da data. */
.pagina-produto .mock-notificacoes-item > :first-child {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin-top: -4px;
}
/* Marcadores dos canais: o círculo de .mock-marca-agenda (mais acima), em azul. */
.pagina-produto .mock-notificacoes .mock-marca-agenda {
  background-color: #EEF4FE;
  color: var(--color-1);
}
/* Traço até o próximo marcador: sai 4px abaixo do marcador e para 4px antes do seguinte (o marcador seguinte começa
   4px acima do seu item, e os itens ficam a 16px um do outro). */
.pagina-produto .mock-notificacoes-item::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: -8px;
  left: 11px;
  width: 2px;
  border-radius: 1px;
  background-color: #D5DEEB;
}
.pagina-produto .mock-notificacoes-pago::after {
  content: none;
}
.pagina-produto .mock-notificacoes-data {
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.pagina-produto .mock-notificacoes-rotulo {
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.pagina-produto .mock-notificacoes-pago .mock-notificacoes-rotulo {
  color: #0B6B3E;
}
.pagina-produto .mock-notificacoes-canal {
  color: #5B6B82;
  font-size: 0.75rem;
  line-height: 1.3;
}
/* Avisos do pagamento: ao cliente (e-mail) e a você (painel). */
.pagina-produto .mock-notificacoes-avisos {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background-color: #F4F8FF;
  list-style: none;
}
.pagina-produto .mock-notificacoes-avisos li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--color-3);
  font-size: 0.75rem;
  line-height: 1.35;
}
.pagina-produto .mock-notificacoes-avisos svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--color-1);
}
.pagina-produto .mock-notificacoes-avisos strong {
  font-weight: 700;
}
/* Miniatura do e-mail. */
.pagina-produto .mock-notificacoes-email {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 10px;
  padding: 14px 16px 16px;
  border: 1px solid #E3EAF5;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(2, 30, 70, 0.08);
}
.pagina-produto .mock-notificacoes-email .mock-boleto-marca {
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EEF2F8;
  font-size: 0.8125rem;
}
.pagina-produto .mock-notificacoes-email .mock-boleto-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.pagina-produto .mock-notificacoes-email .mock-boleto-logo svg {
  width: 16px;
  height: 16px;
}
.pagina-produto .mock-notificacoes-assunto {
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.pagina-produto .mock-notificacoes-texto {
  color: #5B6B82;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.pagina-produto .mock-notificacoes-botao {
  margin-top: 2px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
}

@media (min-width: 576px) and (max-width: 767.98px), (min-width: 992px) {
  .pagina-produto .mock-notificacoes-conteudo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    column-gap: 20px;
  }
}

/* Sem animação (sem JS ou com prefers-reduced-motion): a régua completa, com os quatro itens, o check verde e os
   dois avisos. Nada fica escondido fora do @media abaixo. */

/* Loop de 6s: o primeiro item, o trilho inteiro (traços e os quatro marcadores) e a miniatura ficam sempre visíveis;
   os marcadores ainda não alcançados ficam cinza (#D5DEEB) e acendem quando o texto do passo entra. Os textos de
   "Lembrete" entram de 0,8 a 1,1s, os de "Vence hoje" de 1,9 a 2,2s e os do pagamento de 3,1 a 3,4s; o marcador do
   pagamento fica verde e o check cresce de 3,3 a 3,6s, e os dois avisos entram de 3,4 a 3,6s: aos 3,6s "Pago" está
   completo. Tudo fica até 5,6s e volta ao começo de 5,6 a 5,8s. 1s = 16,667%.
   Depende de parts/pagina-produto.js (.is-observado); sem JS fica o estado sem animação. */
@media (prefers-reduced-motion: no-preference) {
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-item:nth-child(2) > span:not(:first-child) {
    animation: boleto-notificacoes-item2 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-item:nth-child(2) > .mock-marca-agenda {
    animation: boleto-notificacoes-ponto2 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-item:nth-child(3) > span:not(:first-child) {
    animation: boleto-notificacoes-item3 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-item:nth-child(3) > .mock-marca-agenda {
    animation: boleto-notificacoes-ponto3 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-pago > span:not(:first-child) {
    animation: boleto-notificacoes-item4 calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-pago > .mock-marca-ok {
    animation: boleto-notificacoes-ponto-pago calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-pago > .mock-marca-ok svg {
    animation: boleto-notificacoes-check calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .pagina-produto .mock-notificacoes.is-observado .mock-notificacoes-avisos {
    animation: boleto-notificacoes-avisos calc(6s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
}

@keyframes boleto-notificacoes-item2 {
  0%, 13.333% { opacity: 0; transform: translateY(6px); }
  18.333%, 93.333% { opacity: 1; transform: translateY(0); }
  96.667%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes boleto-notificacoes-item3 {
  0%, 31.667% { opacity: 0; transform: translateY(6px); }
  36.667%, 93.333% { opacity: 1; transform: translateY(0); }
  96.667%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes boleto-notificacoes-item4 {
  0%, 51.667% { opacity: 0; transform: translateY(6px); }
  56.667%, 93.333% { opacity: 1; transform: translateY(0); }
  96.667%, 100% { opacity: 0; transform: translateY(0); }
}
/* Marcadores dos e-mails: cinza com o envelope branco até o passo ser alcançado, depois o azul do estado final. */
@keyframes boleto-notificacoes-ponto2 {
  0%, 13.333% { background-color: #D5DEEB; color: #ffffff; }
  18.333%, 93.333% { background-color: #EEF4FE; color: var(--color-1); }
  96.667%, 100% { background-color: #D5DEEB; color: #ffffff; }
}
@keyframes boleto-notificacoes-ponto3 {
  0%, 31.667% { background-color: #D5DEEB; color: #ffffff; }
  36.667%, 93.333% { background-color: #EEF4FE; color: var(--color-1); }
  96.667%, 100% { background-color: #D5DEEB; color: #ffffff; }
}
@keyframes boleto-notificacoes-ponto-pago {
  0%, 55% { background-color: #D5DEEB; }
  60%, 93.333% { background-color: rgba(36, 209, 122, 0.16); }
  96.667%, 100% { background-color: #D5DEEB; }
}
@keyframes boleto-notificacoes-check {
  0%, 55% { opacity: 0; transform: scale(0.4); }
  58.333% { opacity: 1; transform: scale(1.15); }
  60%, 93.333% { opacity: 1; transform: scale(1); }
  96.667%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes boleto-notificacoes-avisos {
  0%, 56.667% { opacity: 0; transform: translateY(6px); }
  60%, 93.333% { opacity: 1; transform: translateY(0); }
  96.667%, 100% { opacity: 0; transform: translateY(0); }
}