/* ==========================================================================
   Home (/): só o que é da home. Os componentes comuns às páginas de produto
   (hero, seções, preço, depoimentos, FAQ, CTA, marquee, mockups, inclusive o do
   QR Code e o do boleto híbrido, e o botão de pausa) ficam em
   components/pagina-produto.css, carregado antes deste arquivo. A tipografia das
   seções, o banner de preço e o respiro do "Fale conosco" vêm de pages/home.css,
   que a home continua carregando. Regras escopadas em .inicio-page, exceto as de
   html e body do CTA fixo, no fim. Mobile first.
   ========================================================================== */

/* ---------- Hero ---------- */
/* A partir de 992px o texto fica sobre fundo branco. A legenda da home é mais longa que a do Pix e a do boleto: com a
   largura limitada, ela quebra antes da forma azul (pagina-produto.css), que no topo começa em 40% da tela. */
@media (min-width: 992px) {
  .inicio-page .main-hero-pix .legend {
    max-width: 22em;
  }
}

/* A partir de 1440px pagina-produto.css leva o título a 3,75rem, e a primeira linha ("Pix e boleto para") chegaria à
   forma azul. Com 3,5rem ele fica em duas linhas sem tocá-la. */
@media (min-width: 1440px) {
  .inicio-page .main-hero-pix .title {
    font-size: 3.5rem;
  }
}

/* ---------- Números: faixa logo abaixo do hero, no padrão do #numeros do boleto ----------
   Sem título visível: o h2 da seção é só para leitores de tela. Quatro colunas a partir de 992px, duas a partir de
   768px. O quarto item leva à consulta de instituições do Banco Central; o rótulo sublinhado indica o link. */
.inicio-page .numeros {
  margin-top: 24px;
  padding: 48px 0;
  background-color: #F6F9FE;
}
.inicio-page .numeros-lista {
  margin-bottom: -32px;
  text-align: center;
}
.inicio-page .numeros-lista > li {
  margin-bottom: 32px;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
.inicio-page .numeros-lista strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-3);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.inicio-page .numeros-link {
  color: inherit;
  text-decoration: none;
}
.inicio-page .numeros-link span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inicio-page .numeros-link:hover {
  color: var(--color-3);
  text-decoration: none;
}
.inicio-page .numeros-link:focus-visible {
  outline: 3px solid var(--color-3);
  outline-offset: 4px;
}

/* De 992 a 1199px as quatro colunas são estreitas para "Autorizada" em 2,5rem. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .inicio-page .numeros-lista strong {
    font-size: 2.25rem;
  }
}

@media (min-width: 992px) {
  .inicio-page .numeros {
    margin-top: 0;
    padding: 64px 0;
  }
  .inicio-page .numeros-lista,
  .inicio-page .numeros-lista > li {
    margin-bottom: 0;
  }
  .inicio-page .numeros-lista > li {
    font-size: 1.125rem;
  }
}

/* ---------- Dois produtos, uma conta: dois painéis ----------
   O h2 fica direto em section.produtos: parts/pagina-produto.js põe o botão de pausa (num contêiner de altura 0) logo
   depois dele, no respiro entre o título e os painéis. O respiro é padding do .container-fluid, não margem do h2: a
   margem atravessaria o contêiner vazio e levaria o botão para cima dos painéis. Os painéis ficam num contêiner de no
   máximo 1200px, centralizado: cada um tem até 585px. Cada painel tem o texto em cima, com os indicadores de cena no fim,
   e as cenas embaixo, cortadas pela borda de baixo do painel. */
.inicio-page .produtos > h2 {
  margin: 0;
  padding: 0 24px;
}
.inicio-page .produtos > .container-fluid {
  padding-top: 64px;
}
.inicio-page .produtos-conteudo {
  max-width: 1200px;
  margin: 0 auto;
}
.inicio-page .painel-produto-lista > div {
  margin-bottom: 24px;
}
.inicio-page .painel-produto-lista > div:last-child {
  margin-bottom: 0;
}
.inicio-page .painel-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 40px 24px 0;
  border-radius: 24px;
}
.inicio-page .painel-produto-pix {
  background-color: #EEF4FE;
}
.inicio-page .painel-produto-boleto {
  background-color: #F6F9FE;
}
.inicio-page .painel-produto .produto-titulo {
  margin-bottom: 12px;
}
.inicio-page .painel-produto-frase {
  margin: 0 0 20px;
  color: #5B6B82;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
/* A área das cenas ocupa a largura inteira do painel (as margens negativas desfazem o padding dele) e é o contêiner das
   medidas das réplicas (container query): cada réplica desenha em frações da largura da área e encolhe inteira no
   mobile, como um documento em escala. */
.inicio-page .painel-produto-visual {
  container-type: inline-size;
  margin-right: -24px;
  margin-left: -24px;
  padding-top: 32px;
}

@media (min-width: 576px) {
  .inicio-page .painel-produto {
    padding: 48px 48px 0;
  }
  .inicio-page .painel-produto-visual {
    margin-right: -48px;
    margin-left: -48px;
    padding-top: 40px;
  }
}

/* A partir de 992px os dois painéis dividem as linhas de uma mesma grade (subgrid): o texto dos dois ocupa a altura do
   maior, e as cenas dos dois começam na mesma altura. */
@media (min-width: 992px) {
  .inicio-page .produtos > .container-fluid {
    padding-top: 80px;
  }
  .inicio-page .painel-produto-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 30px;
    margin-right: 0;
    margin-left: 0;
  }
  .inicio-page .painel-produto-lista > div {
    display: contents;
  }
  .inicio-page .painel-produto {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    height: auto;
  }
}


/* A partir de 1440px main.css põe 112px à esquerda no .container-fluid; o h2, fora dele, usa os mesmos respiros para
   ficar centrado sobre os painéis, como os outros títulos. */
@media (min-width: 1440px) {
  .inicio-page .produtos > h2 {
    padding-right: 15px;
    padding-left: 112px;
  }
}

/* As âncoras #pix e #boleto param abaixo do menu fixo, como as seções. */
.inicio-page .painel-produto[id] {
  scroll-margin-top: 110px;
}

@media (min-width: 2150px) {
  .inicio-page .painel-produto[id] {
    scroll-margin-top: 143px;
  }
}

/* ---------- Indicadores de cena ----------
   Abas pequenas no fim do texto do painel (padrão de abas do WAI-ARIA APG): levam direto a uma cena e seguram o avanço
   automático por 20s. pages/inicio.js as põe na carga, invisíveis (.is-reservado), só para ocupar o lugar, e as mostra
   quando monta as cenas adiadas. Sem JS, não existem. */
.inicio-page .cenas-indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.inicio-page .cenas-indicadores.is-reservado {
  visibility: hidden;
}
/* width: auto desfaz o width: 100% que main.css põe em todo button. */
.inicio-page .cenas-indicador {
  width: auto;
  padding: 4px 14px;
  border: 1px solid #C9D6EA;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.inicio-page .cenas-indicador:hover {
  border-color: var(--color-1);
}
.inicio-page .cenas-indicador[aria-selected="true"] {
  border-color: var(--color-1);
  background-color: var(--color-1);
  color: #ffffff;
}
.inicio-page .cenas-indicador:focus-visible {
  outline: 3px solid var(--color-3);
  outline-offset: 2px;
}

/* ---------- Cenas dos painéis ----------
   As cenas de cada painel ficam empilhadas na mesma célula (.mock-empilha), com o topo alinhado, e só a da aba escolhida
   (.is-ativo) aparece; sem JS, só existe a primeira. A troca é um crossfade de 0,4s (sem transição com
   prefers-reduced-motion). Medidas das réplicas, todas a partir da largura da área menos 16px de cada lado:
   - documentos e janelas medem --largura, até 520px; --d é 1/520 dela (unidade dos documentos);
   - o celular mede até 360 x 720px: --p é 1/320 dele, e a janela usa 8/9 de --p (--w), para que a mesma fração dela e
     do celular fique à vista; no mobile a janela é mais estreita em unidades (até 360) e o conteúdo se reorganiza;
   - o carnê em paisagem mede até 560px (--c, 1/560); abaixo de 768px, 200% do painel (recorte com zoom).
   A área das cenas tem altura fixa: no boleto, 645 unidades do documento, que deixam à vista o código de barras do
   boleto híbrido e escondem o rodapé dele (as bordas de 1px das tabelas não encolhem com o documento, que no mobile fica
   cerca de 28 bordas mais alto que a escala: a área soma essa diferença); no Pix, abaixo de 992px, 573 unidades do
   celular, que tem 640. O que passa da área some na borda de baixo do painel. Sem container query, as unidades ficam
   fixas. */
.inicio-page .cenas {
  --largura: 520px;
  --d: 1px;
  --p: 1.125px;
  --w: 1px;
  --c: 1px;
  grid-template-rows: 100%;
}
@supports (width: 1cqw) {
  .inicio-page .cenas {
    --largura: min(100cqw - 32px, 520px);
    --d: calc(var(--largura) / 520);
    --p: calc(min(100cqw - 32px, 360px) / 320);
    --w: calc(var(--p) * 8 / 9);
    --c: calc(min(100cqw - 32px, 560px) / 560);
  }
}
.inicio-page .painel-produto-pix .cenas {
  height: calc(573 * var(--p));
}
.inicio-page .painel-produto-boleto .cenas {
  height: calc(645 * var(--d) + 28 * (1px - var(--d)));
}
.inicio-page .cena {
  height: 100%;
  visibility: hidden;
  opacity: 0;
}
.inicio-page .cena.is-ativo {
  visibility: visible;
  opacity: 1;
}
/* O tempo de cada cena é a animação inicio-cena-tempo, que não muda nada na tela: parts/pagina-produto.js só a deixa
   correr com o painel na tela (--mock-estado) e pages/inicio.js passa à cena seguinte quando ela termina. Ela só existe
   depois que as cenas adiadas foram montadas (.is-abas). Sem ela (sem JS, com prefers-reduced-motion, com a pausa ou
   com uma cena escolhida há menos de 20s, .cenas-seguras), a cena fica. Pix: 10 + 8 + 6 = 24s; boleto: 7 + 6 + 6 = 19s.
   As animações de dentro de cada cena começam quando ela entra; as que correm uma vez terminam no estado sem animação,
   o mesmo que a cena mostra sem JS, com prefers-reduced-motion ou com a pausa. */
.inicio-page .cena {
  --cena-tempo: 6s;
}
.inicio-page .cena-checkout {
  --cena-tempo: 10s;
}
.inicio-page .cena-automatico {
  --cena-tempo: 8s;
}
.inicio-page .cena-hibrido {
  --cena-tempo: 7s;
}
.inicio-page .cenas.is-visible {
  --mock-estado: running;
}

@media (prefers-reduced-motion: no-preference) {
  .inicio-page .cena {
    transition: opacity 0.4s, visibility 0s 0.4s;
  }
  .inicio-page .cena.is-ativo {
    transition: opacity 0.4s;
  }
  .inicio-page .painel-produto.is-abas .cenas.is-observado .cena.is-ativo {
    animation: inicio-cena-tempo calc(var(--cena-tempo) * var(--mock-vel)) linear both var(--mock-estado, paused);
  }
  .inicio-page .painel-produto.is-abas.cenas-seguras .cenas .cena.is-ativo {
    animation: none;
  }
}

@keyframes inicio-cena-tempo {
  from {}
  to {}
}

/* ---------- Celular (cena "Checkout" do Pix) ----------
   320 x 640 unidades, com moldura de 10 e entalhe no topo; --u é a unidade do celular (--p), então ele chega a 360 x 720px.
   A cena mostra duas telas no mesmo celular: o checkout da loja e a página de pagamento Pix. A fonte é a DM Sans da
   página de pagamento real, num subconjunto com só os caracteres das duas telas (gerado na construção a partir do arquivo
   de assets/typo). */
@font-face {
  font-family: "DM Sans Mockup";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../../typo/DM-Sans/DMSans-mockup-home.woff2") format("woff2");
}
.inicio-page .mock-tela.celular {
  --u: var(--p);
  width: calc(320 * var(--u));
  max-width: 100%;
  height: calc(640 * var(--u));
  margin: 0 auto;
  padding: calc(10 * var(--u));
  overflow: hidden;
  border-radius: calc(40 * var(--u));
  background-color: #0B1F44;
  box-shadow: 0 24px 56px rgba(2, 30, 70, 0.22);
}
.inicio-page .celular-tela {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background-color: #FCFCFC;
  color: #283264;
  font-size: calc(12 * var(--u));
  line-height: 1.35;
}
/* main.css põe Montserrat em todo elemento (*): a tela volta à DM Sans, como a página real. */
.inicio-page .celular-tela,
.inicio-page .celular-tela * {
  font-family: "DM Sans Mockup", "DM Sans", sans-serif;
}
.inicio-page .celular-tela p {
  margin: 0;
}
.inicio-page .celular-entalhe {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(96 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 0 0 calc(14 * var(--u)) calc(14 * var(--u));
  background-color: #0B1F44;
  transform: translateX(-50%);
}

/* Cena "Checkout": no mesmo celular, a finalização de compra de uma loja virtual (marca "Sua loja") e, depois dela, a
   página de pagamento Pix; as duas telas ficam empilhadas (.celular-telas). Azul do site nos estados de escolha. */
.inicio-page .celular-telas {
  height: 100%;
}
.inicio-page .loja {
  display: flex;
  flex-direction: column;
  padding: calc(32 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
}
.inicio-page .loja-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid #E3E7EE;
}
.inicio-page .loja-marca {
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  background-color: #E4E6EB;
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.inicio-page .loja-seguro,
.inicio-page .loja-rodape {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  color: #3C4678;
  font-size: calc(11 * var(--u));
  font-weight: 500;
}
.inicio-page .loja-seguro svg,
.inicio-page .loja-rodape svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.inicio-page .loja-titulo {
  margin-top: calc(12 * var(--u));
  margin-bottom: calc(6 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
}
.inicio-page .loja-caixa {
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border: 1px solid #E3E7EE;
  border-radius: calc(12 * var(--u));
  background-color: #ffffff;
}
.inicio-page .loja-entrega {
  font-size: calc(12 * var(--u));
  font-weight: 500;
}
.inicio-page .loja-entrega-prazo {
  margin-top: calc(2 * var(--u));
  color: #0B6B3E;
  font-size: calc(11 * var(--u));
}
.inicio-page .loja-item,
.inicio-page .loja-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
}
.inicio-page .loja-item {
  padding-bottom: calc(8 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
}
.inicio-page .loja-foto {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(8 * var(--u));
  background-color: #EEF4FE;
  color: #0860DB;
}
.inicio-page .loja-foto svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.inicio-page .loja-item-nome {
  flex: 1 1 auto;
}
.inicio-page .loja-item-valor {
  font-weight: 700;
}
.inicio-page .loja-linha {
  padding-top: calc(5 * var(--u));
  color: #3C4678;
  font-size: calc(12 * var(--u));
  font-weight: 500;
}
.inicio-page .loja-total {
  margin-top: calc(5 * var(--u));
  padding-top: calc(7 * var(--u));
  border-top: 1px solid #E3E7EE;
  color: #283264;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.inicio-page .loja-opcoes {
  display: grid;
  gap: calc(7 * var(--u));
}
.inicio-page .loja-opcao {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(40 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border: 1px solid #DDE3EC;
  border-radius: calc(10 * var(--u));
  background-color: #ffffff;
  font-size: calc(13 * var(--u));
  font-weight: 500;
}
.inicio-page .loja-radio {
  flex: 0 0 auto;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border: calc(2 * var(--u)) solid #9AA6B8;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #ffffff;
}
/* "aprovação na hora" só aparece com o Pix escolhido (na sequência da cena). */
.inicio-page .loja-nota {
  display: block;
  color: #0B6B3E;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  opacity: 0;
}
.inicio-page .loja-botao {
  display: block;
  margin-top: calc(14 * var(--u));
  padding: calc(12 * var(--u)) 0;
  border-radius: calc(10 * var(--u));
  background-color: var(--color-3);
  color: #ffffff;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  text-align: center;
}
.inicio-page .loja-rodape {
  justify-content: center;
  margin-top: calc(10 * var(--u));
}

/* Segunda tela do checkout: réplica da página de pagamento Pix. Estrutura, cores e tipografia de public_html/checkout/pix.php
   (Tailwind com o tema da PagHiper e a fonte DM Sans): caixas em preto a 5% com borda a 10%, texto #283264 e #3C4678,
   azul #0064E1, verde #32E17D, círculos dos passos em #C8E1FF. Os botões "Compartilhar" (verde) e "Copiar código" (azul)
   e os quatro passos são os da página real; o número dos três primeiros passos fica em #0052B8 (na página real, #0064E1
   sobre #C8E1FF dá 4,0:1). */
.inicio-page .pix-pagina {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(32 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
}
.inicio-page .pix-loja {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: calc(12 * var(--u));
  background-color: rgba(0, 0, 0, 0.05);
}
.inicio-page .pix-loja-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(56 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(6 * var(--u));
  background-color: #E4E6EB;
  font-size: calc(10 * var(--u));
  font-weight: 700;
}
.inicio-page .pix-loja-dados {
  display: flex;
  flex-direction: column;
  color: #283264;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1.3;
}
.inicio-page .pix-loja-nome {
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.inicio-page .pix-titulo {
  margin-top: calc(12 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 500;
  text-align: center;
}
.inicio-page .pix-valor {
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.inicio-page .pix-estados {
  margin-top: calc(10 * var(--u));
}
.inicio-page .pix-pagamento,
.inicio-page .pix-confirmado {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inicio-page .pix-qr {
  display: block;
  padding: calc(7 * var(--u));
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: calc(14 * var(--u));
  background-color: #ffffff;
}
.inicio-page .pix-qr svg {
  display: block;
  width: calc(180 * var(--u));
  height: calc(180 * var(--u));
  fill: #000000;
  shape-rendering: crispEdges;
}
.inicio-page .pix-expira {
  margin-top: calc(8 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 500;
}
.inicio-page .pix-timer {
  display: inline-grid;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inicio-page .pix-timer > span {
  grid-area: 1 / 1;
  opacity: 0;
}
.inicio-page .pix-timer > span:first-child {
  opacity: 1;
}
/* Barra de tempo restante da página real (4px, trilho em preto a 15%, azul #0064E1). */
.inicio-page .pix-progresso {
  position: relative;
  display: block;
  width: 60%;
  height: calc(4 * var(--u));
  margin-top: calc(5 * var(--u));
  overflow: hidden;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.15);
}
.inicio-page .pix-progresso span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 92%;
  background-color: #0064E1;
}
.inicio-page .pix-botao {
  display: block;
  width: 100%;
  border-radius: calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  text-align: center;
}
.inicio-page .pix-botao-compartilhar {
  margin-top: calc(10 * var(--u));
  padding: calc(8 * var(--u)) 0;
  background-color: #32E17D;
  color: #283264;
}
.inicio-page .pix-botao-copiar {
  margin-top: calc(6 * var(--u));
  padding: calc(10 * var(--u)) 0;
  background-color: #0064E1;
  color: #ffffff;
}
/* Pagamento confirmado: ocupa o lugar do QR, do prazo e dos botões (mesma célula da grade), centralizado. */
.inicio-page .pix-confirmado {
  justify-content: center;
  text-align: center;
}
.inicio-page .pix-confirmado-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  margin-bottom: calc(14 * var(--u));
  border-radius: 50%;
  background-color: #32E17D;
  color: #283264;
}
.inicio-page .pix-confirmado-icone svg {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inicio-page .pix-confirmado-titulo {
  font-size: calc(16 * var(--u));
  font-weight: 700;
}
.inicio-page .pix-confirmado-dados {
  margin-top: calc(4 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 500;
}
.inicio-page .pix-confirmado-texto {
  margin-top: calc(10 * var(--u));
  color: #3C4678;
  font-size: calc(12 * var(--u));
  font-weight: 500;
}
.inicio-page .pix-passos {
  margin-top: calc(12 * var(--u));
  padding: calc(11 * var(--u)) calc(10 * var(--u));
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: calc(12 * var(--u));
  background-color: rgba(0, 0, 0, 0.05);
}
.inicio-page .pix-passos-titulo {
  margin-bottom: calc(6 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.inicio-page .pix-passos-lista {
  display: grid;
  gap: calc(8 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.inicio-page .pix-passos-lista li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: #3C4678;
  font-size: calc(11.5 * var(--u));
  font-weight: 500;
}
.inicio-page .pix-passos-lista span {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border: 1px solid #0064E1;
  border-radius: 50%;
  background-color: #C8E1FF;
  color: #0052B8;
  font-size: calc(10 * var(--u));
  font-weight: 700;
}
/* Na página real, o último passo tem o círculo cheio, em azul com o número em branco. */
.inicio-page .pix-passos-lista li:last-child span {
  background-color: #0064E1;
  color: #ffffff;
}

/* Estado sem animação (sem JS, prefers-reduced-motion, pausa): pagamento confirmado. */
.inicio-page .celular .loja,
.inicio-page .celular .pix-pagamento {
  opacity: 0;
}

/* ---------- Janelas do painel PagHiper (cenas "Pix Automático" e "PDV") ----------
   Janela de navegador com a largura dos documentos (--largura, até 520px) e --u = --w, na fonte e nas cores do site. As
   listas passam da borda do painel: não sobra espaço vazio entre o fim do conteúdo e o corte. */
.inicio-page .mock-tela.janela {
  --u: var(--w);
  position: relative;
  width: var(--largura);
  max-width: 100%;
  min-height: calc(100% + 60 * var(--u));
  border-radius: calc(16 * var(--u));
  box-shadow: 0 16px 48px rgba(2, 30, 70, 0.14);
  font-size: calc(14 * var(--u));
}
.inicio-page .janela p {
  margin: 0;
}
.inicio-page .janela ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.inicio-page .janela b {
  font-weight: 700;
}
.inicio-page .janela .mock-barra {
  gap: calc(6 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
}
.inicio-page .janela .mock-barra span {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
}
.inicio-page .janela-corpo {
  padding: calc(20 * var(--u)) calc(22 * var(--u));
}
.inicio-page .janela-titulo {
  color: var(--color-3);
  font-size: calc(16 * var(--u));
  font-weight: 700;
}
.inicio-page .janela-secao {
  margin: calc(20 * var(--u)) 0 calc(4 * var(--u));
  color: #5B6B82;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: 0.02em;
}
.inicio-page .janela-relogio {
  flex: 0 0 auto;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.inicio-page .janela .mock-badge {
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  font-size: calc(12 * var(--u));
}
.inicio-page .janela .mock-badge svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* Pix Automático, na visão do lojista: a lista de clientes com o resumo do dia e, depois, o detalhe de uma cliente
   (as duas telas empilhadas, .automatico-telas). */
.inicio-page .automatico-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(4 * var(--u)) calc(12 * var(--u));
  margin: calc(14 * var(--u)) 0 calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background-color: #F4F8FF;
  color: #5B6B82;
  font-size: calc(13 * var(--u));
}
.inicio-page .automatico-resumo b {
  color: var(--color-3);
}
.inicio-page .automatico-contador {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
}
/* Estado sem animação: o resumo com as três cobranças somadas. */
.inicio-page .automatico-contador > span:not(:last-child) {
  opacity: 0;
}
.inicio-page .automatico-clientes li,
.inicio-page .automatico-cobrancas li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  border-bottom: 1px solid #EEF2F8;
}
.inicio-page .automatico-clientes li {
  padding: calc(10 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
}
.inicio-page .automatico-inicial {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 50%;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.inicio-page .automatico-cor-azul {
  background-color: #E3EEFF;
  color: #0B4FB3;
}
.inicio-page .automatico-cor-verde {
  background-color: #E3F6EC;
  color: #0B6B3E;
}
.inicio-page .automatico-cor-lilas {
  background-color: #EFE8FF;
  color: #5B34B8;
}
.inicio-page .automatico-cor-ambar {
  background-color: #FFF1D6;
  color: #7A4F00;
}
.inicio-page .automatico-quem,
.inicio-page .automatico-quanto {
  display: flex;
  flex-direction: column;
  color: #5B6B82;
  font-size: calc(12.5 * var(--u));
  line-height: 1.35;
}
.inicio-page .automatico-quem {
  flex: 1 1 auto;
  min-width: 0;
}
.inicio-page .automatico-quem b,
.inicio-page .automatico-quanto b {
  color: var(--color-3);
  font-size: calc(14 * var(--u));
}
.inicio-page .automatico-quanto {
  align-items: flex-end;
  white-space: nowrap;
}
.inicio-page .automatico-status {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.inicio-page .automatico-recebido {
  color: #0B6B3E;
}
.inicio-page .automatico-check {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  background-color: rgba(36, 209, 122, 0.16);
  color: #0B6B3E;
}
.inicio-page .automatico-check svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}
.inicio-page .automatico-voltar {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  color: #0860DB;
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
}
.inicio-page .automatico-voltar svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inicio-page .automatico-cliente {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: calc(18 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background-color: #F4F8FF;
}
.inicio-page .automatico-cliente .automatico-inicial {
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  font-size: calc(17 * var(--u));
}
.inicio-page .automatico-nome {
  color: var(--color-3);
  font-size: calc(14 * var(--u));
}
.inicio-page .automatico-autorizado {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-top: calc(2 * var(--u));
  color: #0B6B3E;
  font-size: calc(12.5 * var(--u));
}
.inicio-page .automatico-dia {
  margin-top: calc(2 * var(--u));
  color: #5B6B82;
  font-size: calc(12.5 * var(--u));
}
.inicio-page .automatico-autorizado svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.inicio-page .automatico-cobrancas li {
  padding: calc(15 * var(--u)) calc(4 * var(--u));
  color: #5B6B82;
  font-size: calc(13 * var(--u));
}
.inicio-page .automatico-cobrancas li > span:not(.automatico-check):not(.automatico-mes) {
  flex: 1 1 auto;
}
.inicio-page .automatico-cobrancas b {
  color: var(--color-3);
}
.inicio-page .automatico-mes {
  flex: 0 0 calc(34 * var(--u));
  color: var(--color-3);
  font-weight: 700;
}
/* Estado sem animação: o detalhe da cliente. */
.inicio-page .automatico-lista {
  opacity: 0;
}

/* Pix PDV num ponto de venda: terminal, venda com os itens, cobrança Pix e, com o Pix recebido, o aviso verde e a venda
   concluída; embaixo, as últimas vendas do terminal. */
.inicio-page .pdv-aviso {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
  background-color: #0B6B3E;
  color: #ffffff;
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
  line-height: 1.25;
}
.inicio-page .pdv-aviso svg,
.inicio-page .pdv-concluida svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.inicio-page .pdv-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(2 * var(--u)) calc(12 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid #EEF2F8;
}
.inicio-page .pdv-venda {
  color: #5B6B82;
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
}
.inicio-page .pdv-itens {
  margin-top: calc(6 * var(--u));
}
.inicio-page .pdv-itens li {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(5 * var(--u)) 0;
  color: var(--color-3);
  font-size: calc(13 * var(--u));
}
.inicio-page .pdv-itens li > span:last-child {
  white-space: nowrap;
}
.inicio-page .pdv-itens .pdv-subtotal {
  padding: calc(2 * var(--u)) 0;
  color: #5B6B82;
  font-size: calc(12.5 * var(--u));
}
.inicio-page .pdv-itens li:nth-child(3) {
  margin-top: calc(4 * var(--u));
  padding-top: calc(8 * var(--u));
  border-top: 1px dashed #D8E0EC;
}
.inicio-page .pdv-itens .pdv-total {
  font-size: calc(15 * var(--u));
  font-weight: 700;
}
.inicio-page .pdv-pagamento {
  margin-top: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid #D8E0EC;
  border-radius: calc(12 * var(--u));
}
.inicio-page .pdv-pagamento-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.inicio-page .pdv-pagamento-titulo {
  color: var(--color-3);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}
.inicio-page .pdv-status {
  justify-items: end;
}
.inicio-page .pdv-status .mock-badge {
  justify-self: end;
}
.inicio-page .pdv-cobranca {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}
.inicio-page .pdv-qr svg {
  display: block;
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  fill: var(--color-3);
  shape-rendering: crispEdges;
}
.inicio-page .pdv-valor {
  color: var(--color-3);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}
.inicio-page .pdv-expira {
  margin-bottom: calc(10 * var(--u));
  color: #5B6B82;
  font-size: calc(13 * var(--u));
}
.inicio-page .pdv-expira b {
  color: var(--color-3);
  font-variant-numeric: tabular-nums;
}
.inicio-page .pdv-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
}
.inicio-page .pdv-botao {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border: 1px solid #D8E0EC;
  border-radius: 999px;
  color: var(--color-3);
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
}
.inicio-page .pdv-botao svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inicio-page .pdv-concluida {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  background-color: #E3F6EC;
  color: #0B6B3E;
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
.inicio-page .pdv-comprovante {
  text-decoration: underline;
}
.inicio-page .pdv-lista li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(9 * var(--u)) 0;
  border-bottom: 1px solid #EEF2F8;
  color: #5B6B82;
  font-size: calc(13 * var(--u));
}
.inicio-page .pdv-lista li > span:first-child {
  flex: 1 1 auto;
}
.inicio-page .pdv-lista b {
  color: var(--color-3);
}
.inicio-page .pdv-forma {
  padding: calc(1 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background-color: #E3EEFF;
  color: #0B4FB3;
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
}
/* Estado sem animação: Pix recebido, com o aviso verde e a venda concluída. */
.inicio-page .pdv .mock-badge-espera {
  opacity: 0;
}

/* ---------- Documentos de boleto (cenas "Híbrido", "Condomínio" e "Carnê") ----------
   Híbrido: estrutura e cores do template de public_html/_models/BoletoHibrido.class.php (template()): faixa do Pix com o QR a
   25% da largura, linha de corte tracejada, recibo do pagador em 4 colunas, ficha de compensação com a grade FEBRABAN e
   o código de barras ITF. Arial/Helvetica, texto #6c757d, bordas #dfdfdf, células de destaque em #f8f9fa. Três cores do
   template foram escurecidas para chegar a 4,5:1 em tamanho de documento: o badge "NOVIDADE" (#FF7700 → #BF5600), o
   título do Pix (#3F7DC9 → #2F6CB8) e o texto das células de destaque (#6c757d → #5C646C). --u é 1/520 da largura da
   folha (--d): rótulos de 8, valores de 10 e 11 (a regra de 1rem da página não vale aqui, é um documento em escala). O
   badge de status é o das páginas de produto (pagina-produto.css), sobre o canto da folha; o do híbrido tem os três
   estados do mockup híbrido de lá, e os outros dois documentos, dois. */
.inicio-page .mock-tela.boleto-real {
  --u: var(--d);
  position: relative;
  width: calc(520 * var(--u));
  max-width: 100%;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.inicio-page .boleto-real .boleto-status {
  position: absolute;
  z-index: 1;
  top: -12px;
  right: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
.inicio-page .boleto-real .boleto-status .mock-badge {
  box-shadow: 0 4px 12px rgba(2, 30, 70, 0.12);
}
.inicio-page .boleto-real .mock-badge-espera {
  background-color: #FFF4D6;
}
/* Estado sem animação dos dois documentos de dois estados: pago via Pix. */
.inicio-page .boleto-condominio .mock-badge-espera,
.inicio-page .boleto-carne .mock-badge-espera {
  opacity: 0;
}
.inicio-page .boleto-folha {
  padding: calc(12 * var(--u));
  border: 1px solid #dfdfdf;
  background-color: #ffffff;
  box-shadow: 0 16px 48px rgba(2, 30, 70, 0.16);
  color: #6c757d;
  font-size: calc(10 * var(--u));
  line-height: 1.3;
}
/* main.css põe Montserrat em todo elemento (*): a folha volta à Arial, como o boleto impresso. No Linux, Liberation Sans
   e Nimbus Sans têm as mesmas medidas da Arial e da Helvetica. */
.inicio-page .boleto-folha,
.inicio-page .boleto-folha * {
  font-family: Arial, Helvetica, "Liberation Sans", "Nimbus Sans", sans-serif;
}
.inicio-page .boleto-folha p {
  margin: 0;
}
.inicio-page .boleto-folha b {
  font-weight: 700;
}
.inicio-page .boleto-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}
.inicio-page .boleto-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100 * var(--u));
  height: calc(34 * var(--u));
  background-color: #E9ECEF;
  color: #5C646C;
  font-size: calc(11 * var(--u));
  font-weight: 700;
}
.inicio-page .boleto-resumo {
  font-size: calc(10 * var(--u));
  line-height: 1.25;
  text-align: right;
}
.inicio-page .boleto-pix {
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--u));
  margin-top: calc(12 * var(--u));
}
.inicio-page .boleto-pix-texto {
  flex: 1 1 auto;
  min-width: 0;
}
.inicio-page .boleto-novidade {
  display: inline-block;
  padding: calc(2 * var(--u)) calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background-color: #BF5600;
  color: #ffffff;
  font-size: calc(8 * var(--u));
  font-weight: 700;
}
.inicio-page .boleto-pix-titulo {
  margin-top: calc(4 * var(--u));
  color: #2F6CB8;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.inicio-page .boleto-pix-instrucao {
  margin-top: calc(3 * var(--u));
  padding-bottom: calc(6 * var(--u));
  border-bottom: 1px solid #dfdfdf;
  font-size: calc(9 * var(--u));
  line-height: 1.25;
}
.inicio-page .boleto-copia {
  margin-top: calc(6 * var(--u));
  font-size: calc(9 * var(--u));
}
.inicio-page .boleto-copia-botao {
  padding: calc(1 * var(--u)) calc(4 * var(--u));
  border-radius: calc(3 * var(--u));
  background-color: #117A8B;
  color: #ffffff;
  font-size: calc(8 * var(--u));
  font-weight: 700;
}
.inicio-page .boleto-copia-codigo {
  margin-top: calc(3 * var(--u));
  padding: calc(3 * var(--u)) calc(5 * var(--u));
  overflow: hidden;
  border: 1px solid #D6D8DB;
  border-radius: calc(3 * var(--u));
  background-color: #E2E3E5;
  color: #333333;
  font-size: calc(9 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inicio-page .boleto-pix-qr {
  flex: 0 0 25%;
  text-align: center;
}
.inicio-page .boleto-qr {
  display: block;
  padding: calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.inicio-page .boleto-qr svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  fill: #000000;
  shape-rendering: crispEdges;
}
.inicio-page .boleto-pix-qr p {
  margin-top: calc(6 * var(--u));
  font-size: calc(8 * var(--u));
  font-weight: 700;
}
/* Linha de corte: 2px tracejados em #dfdfdf, como no template, com a tesoura na ponta esquerda. */
.inicio-page .boleto-corte {
  position: relative;
  margin: calc(8 * var(--u)) 0;
  border-bottom: 2px dashed #dfdfdf;
}
.inicio-page .boleto-tesoura {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  padding-right: calc(3 * var(--u));
  background-color: #ffffff;
  fill: none;
  stroke: #9AA1A8;
  stroke-width: 2;
  stroke-linecap: round;
  transform: translateY(-50%);
}
.inicio-page .boleto-grade {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.inicio-page .boleto-grade td {
  padding: calc(1.5 * var(--u)) calc(3 * var(--u));
  border: 1px solid #dfdfdf;
  vertical-align: top;
}
.inicio-page .boleto-rotulo {
  display: block;
  font-size: calc(8 * var(--u));
  line-height: 1.15;
}
.inicio-page .boleto-valor {
  display: block;
  min-height: calc(11 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: 1.15;
}
/* Larguras das colunas (table-layout: fixed): recibo em 4 colunas; ficha em 6, com a última em 25% como no template. */
.inicio-page .boleto-recibo col:nth-child(1) { width: 32%; }
.inicio-page .boleto-recibo col:nth-child(2) { width: 22%; }
.inicio-page .boleto-recibo col:nth-child(3) { width: 21%; }
.inicio-page .boleto-recibo col:nth-child(4) { width: 25%; }
.inicio-page .boleto-ficha col:nth-child(1) { width: 17%; }
.inicio-page .boleto-ficha col:nth-child(2) { width: 15%; }
.inicio-page .boleto-ficha col:nth-child(3) { width: 11%; }
.inicio-page .boleto-ficha col:nth-child(4) { width: 12%; }
.inicio-page .boleto-ficha col:nth-child(5) { width: 20%; }
.inicio-page .boleto-ficha col:nth-child(6) { width: 25%; }
.inicio-page .boleto-grade .boleto-destaque {
  background-color: #F8F9FA;
  color: #5C646C;
}
.inicio-page .boleto-grade .boleto-destaque .boleto-valor {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  text-align: right;
}
.inicio-page .boleto-recibo .boleto-instrucoes td {
  padding-top: calc(3 * var(--u));
  border: 0;
  font-size: calc(9 * var(--u));
}
.inicio-page .boleto-recibo .boleto-instrucoes .boleto-autenticacao {
  text-align: right;
}
.inicio-page .boleto-ficha-topo td {
  padding: 0 0 calc(4 * var(--u));
  border-top: 0;
  border-right: 0;
  border-left: 0;
  vertical-align: bottom;
}
.inicio-page .boleto-banco span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(24 * var(--u));
  background-color: #E9ECEF;
  color: #5C646C;
  font-size: calc(9 * var(--u));
  font-weight: 700;
}
.inicio-page .boleto-ficha-topo .boleto-codigo-banco {
  padding-right: calc(4 * var(--u));
  padding-left: calc(4 * var(--u));
  border-right: 2px solid #6c757d;
  border-left: 2px solid #6c757d;
  color: #343A40;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  text-align: center;
}
.inicio-page .boleto-ficha-topo .boleto-digitavel {
  color: #343A40;
  overflow: hidden;
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.inicio-page .boleto-instrucoes-ficha .boleto-valor {
  font-size: calc(9 * var(--u));
}
/* Código de barras ITF na base, com os módulos em pixels inteiros no desktop (406 módulos em 406px, fino 1px e largo
   3px, como o fbarcode do boleto); os textos do rodapé ficam embaixo, à direita, e a borda do painel os esconde. */
.inicio-page .boleto-rodape {
  margin-top: calc(8 * var(--u));
}
.inicio-page .boleto-barras {
  display: block;
  width: calc(406 * var(--u));
  height: calc(50 * var(--u));
  fill: #000000;
  shape-rendering: crispEdges;
}
.inicio-page .boleto-rodape-texto {
  margin-top: calc(20 * var(--u));
  text-align: right;
}
.inicio-page .boleto-ficha-titulo {
  color: #343A40;
  font-size: calc(10 * var(--u));
  font-weight: 700;
}
.inicio-page .boleto-rodape-texto p + p {
  margin-top: calc(2 * var(--u));
  font-size: calc(8 * var(--u));
}

/* Condomínio: boleto com a prestação de contas do mês no corpo (receitas e despesas em duas colunas, com as linhas
   alternadas e os valores à direita, e uma tira com os três totais), o recibo do pagador com o QR Code e a ficha de
   compensação, que a borda do painel corta. Mesma folha, fonte e cores do boleto híbrido. */
.inicio-page .condominio-identificacao {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4 * var(--u));
  color: #343A40;
  font-size: calc(11 * var(--u));
  text-align: right;
}
.inicio-page .condominio-unidade {
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border: 1px solid #C9D6EA;
  border-radius: 999px;
  background-color: #F4F8FF;
  color: #2F6CB8;
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
}
.inicio-page .condominio-titulo {
  margin-top: calc(12 * var(--u));
  color: #2F6CB8;
  font-size: calc(11 * var(--u));
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.inicio-page .condominio-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(14 * var(--u));
  margin-top: calc(6 * var(--u));
}
/* Texto em #5C646C: sobre as linhas alternadas (#F4F5F7), o #6c757d da folha ficaria em 4,3:1. */
.inicio-page .condominio-tabela {
  width: 100%;
  border-collapse: collapse;
  color: #5C646C;
  font-size: calc(10 * var(--u));
  line-height: 1.3;
}
.inicio-page .condominio-tabela th {
  padding: 0 calc(5 * var(--u)) calc(3 * var(--u));
  border-bottom: 1px solid #dfdfdf;
  color: #343A40;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  text-align: left;
}
.inicio-page .condominio-tabela td {
  padding: calc(4 * var(--u)) calc(5 * var(--u));
}
.inicio-page .condominio-tabela td:last-child {
  text-align: right;
  white-space: nowrap;
}
.inicio-page .condominio-tabela tr:nth-child(even) td {
  background-color: #F4F5F7;
}
.inicio-page .condominio-tabela .condominio-total td {
  border-top: 1px solid #dfdfdf;
  background-color: transparent;
  color: #343A40;
  font-weight: 700;
}
.inicio-page .condominio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin: calc(10 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.inicio-page .condominio-pills li {
  flex: 1 1 0;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  font-size: calc(9.5 * var(--u));
  text-align: center;
  white-space: nowrap;
}
.inicio-page .condominio-pills b {
  margin-left: calc(2 * var(--u));
  font-size: calc(10.5 * var(--u));
}
.inicio-page .condominio-pill-receitas {
  background-color: #E3F6EC;
  color: #0B6B3E;
}
.inicio-page .condominio-pill-despesas {
  background-color: #FDECEC;
  color: #A1262A;
}
.inicio-page .condominio-pill-saldo {
  background-color: #E3EEFF;
  color: #0B4FB3;
}
.inicio-page .condominio-recibo {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
}
.inicio-page .condominio-recibo .boleto-grade {
  flex: 1 1 auto;
}
.inicio-page .condominio-recibo col:nth-child(1) { width: 50%; }
.inicio-page .condominio-recibo col:nth-child(2) { width: 50%; }
.inicio-page .condominio-pix {
  flex: 0 0 calc(92 * var(--u));
  text-align: center;
}
.inicio-page .condominio-pix p {
  margin-top: calc(4 * var(--u));
  color: #2F6CB8;
  font-size: calc(9 * var(--u));
  font-weight: 700;
}

/* Carnê: parcela em paisagem, inspirada no template do carnê (templateCarne() de _models/BoletoHibrido.class.php): recibo
   do pagador à esquerda, com o Pix, e ficha de compensação à direita, com o bloco "Pague em segundos" e o código de
   barras. O verde do Pix do template dá lugar ao azul do site. Acima, a tira com as parcelas do carnê; abaixo, a parcela
   seguinte, cortada pela borda do painel (ela se estica, em branco, se o carnê acabar antes da borda). A partir de
   768px o carnê ocupa a largura útil do painel, até 560px; --u é --c (1/560). */
.inicio-page .mock-tela.boleto-carne {
  --u: var(--c);
  display: flex;
  flex-direction: column;
  width: calc(560 * var(--u));
  min-height: calc(100% + 40 * var(--u));
  color: #0A0A0A;
}
.inicio-page .boleto-carne,
.inicio-page .boleto-carne * {
  font-family: Arial, Helvetica, "Liberation Sans", "Nimbus Sans", sans-serif;
}
.inicio-page .boleto-carne p {
  margin: 0;
}
.inicio-page .boleto-carne b {
  font-weight: 700;
}
.inicio-page .carne-tira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8 * var(--u)) calc(14 * var(--u));
  margin-bottom: calc(22 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border: 1px solid #dfdfdf;
  border-radius: calc(8 * var(--u));
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(2, 30, 70, 0.08);
}
.inicio-page .carne-tira-titulo {
  color: #343A40;
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.inicio-page .carne-parcelas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.inicio-page .carne-parcela {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border: 1px solid #dfdfdf;
  border-radius: 999px;
  color: #6c757d;
  font-size: calc(11 * var(--u));
  font-weight: 700;
}
.inicio-page .carne-parcela svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}
.inicio-page .carne-paga {
  border-color: transparent;
  background-color: #E3F6EC;
  color: #0B6B3E;
}
.inicio-page .carne-mais {
  border-color: transparent;
}
.inicio-page .carne-marca-aberta {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background-color: #0860DB;
}
.inicio-page .carne-marca {
  align-items: center;
  justify-items: center;
}
/* Estado sem animação: parcela 03/12 paga. */
.inicio-page .carne-atual {
  border-color: transparent;
  background-color: #E3F6EC;
  color: #0B6B3E;
}
.inicio-page .carne-marca-aberta {
  opacity: 0;
}
.inicio-page .carne-folha {
  position: relative;
  display: grid;
  grid-template-columns: calc(122 * var(--u)) minmax(0, 1fr);
  column-gap: calc(10 * var(--u));
  padding: calc(10 * var(--u));
  border: 1px solid #dfdfdf;
  background-color: #ffffff;
  box-shadow: 0 16px 48px rgba(2, 30, 70, 0.16);
  line-height: 1.25;
}
.inicio-page .carne-folha + .carne-folha {
  flex-grow: 1;
  align-content: start;
  margin-top: calc(18 * var(--u));
}
.inicio-page .carne-grade {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.inicio-page .carne-grade td {
  padding: calc(1.5 * var(--u)) calc(4 * var(--u));
  border: 1px solid #111111;
  vertical-align: top;
}
.inicio-page .carne-rotulo {
  display: block;
  color: #5C646C;
  font-size: calc(8 * var(--u));
  line-height: 1.2;
}
.inicio-page .carne-valor {
  display: block;
  min-height: calc(12 * var(--u));
  font-size: calc(10 * var(--u));
}
.inicio-page .carne-direita {
  text-align: right;
}
.inicio-page .carne-destaque {
  background-color: #F3F4F6;
}
.inicio-page .carne-destaque .carne-valor b {
  font-size: calc(11.5 * var(--u));
}
.inicio-page .carne-canhoto {
  display: flex;
  flex-direction: column;
}
.inicio-page .carne-pix-mini {
  padding: calc(4 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  border: 1px solid #0860DB;
  border-top: 0;
  background-color: #F4F8FF;
  text-align: center;
}
.inicio-page .carne-pix-titulo {
  margin-bottom: calc(3 * var(--u));
  color: #0860DB;
  font-size: calc(9 * var(--u));
  font-weight: 700;
  text-transform: uppercase;
}
.inicio-page .carne-qr {
  display: block;
  margin: 0 auto;
  padding: calc(3 * var(--u));
  background-color: #ffffff;
}
.inicio-page .carne-qr svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  fill: #000000;
  shape-rendering: crispEdges;
}
.inicio-page .carne-pix-mini .carne-qr {
  width: calc(80 * var(--u));
}
.inicio-page .carne-pix-obs {
  margin-top: calc(3 * var(--u));
  color: #0860DB;
  font-size: calc(8.5 * var(--u));
}
.inicio-page .carne-recibo {
  margin-top: calc(6 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.inicio-page .carne-banco {
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(2 * var(--u));
  border-bottom: 2px solid #111111;
}
.inicio-page .carne-banco-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--u));
  height: calc(24 * var(--u));
  margin-bottom: calc(2 * var(--u));
  background-color: #E9ECEF;
  color: #5C646C;
  font-size: calc(10 * var(--u));
  font-weight: 700;
}
.inicio-page .carne-banco-codigo {
  flex: 0 0 auto;
  margin-left: calc(8 * var(--u));
  padding: 0 calc(6 * var(--u));
  border-right: 2px solid #111111;
  border-left: 2px solid #111111;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}
.inicio-page .carne-digitavel {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: calc(6 * var(--u));
  overflow: hidden;
  font-size: calc(9 * var(--u));
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.inicio-page .carne-ficha .carne-grade tr:first-child td {
  border-top: 0;
}
.inicio-page .carne-ficha col:nth-child(1) { width: 21%; }
.inicio-page .carne-ficha col:nth-child(2) { width: 17%; }
.inicio-page .carne-ficha col:nth-child(3) { width: 13%; }
.inicio-page .carne-ficha col:nth-child(4) { width: 20%; }
.inicio-page .carne-ficha col:nth-child(5) { width: 29%; }
.inicio-page .carne-pix {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: calc(2 * var(--u)) 0;
  padding: calc(4 * var(--u)) calc(6 * var(--u));
  border: 1px solid #0860DB;
  background-color: #F4F8FF;
}
.inicio-page .carne-pix .carne-qr {
  flex: 0 0 calc(62 * var(--u));
  width: calc(62 * var(--u));
  margin: 0;
}
.inicio-page .carne-pix-info {
  flex: 1 1 auto;
  min-width: 0;
}
.inicio-page .carne-pix-chamada {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  margin-bottom: calc(4 * var(--u));
  color: #0860DB;
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}
.inicio-page .carne-pix-selo {
  flex: 0 0 auto;
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background-color: #0860DB;
  color: #ffffff;
  font-size: calc(9 * var(--u));
}
.inicio-page .carne-pix-codigo {
  margin-top: calc(2 * var(--u));
  padding: calc(3 * var(--u)) calc(5 * var(--u));
  overflow: hidden;
  border: 1px solid #d4d4d4;
  border-radius: calc(3 * var(--u));
  background-color: #ffffff;
  font-size: calc(9 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inicio-page .carne-barras {
  display: block;
  width: calc(406 * var(--u));
  max-width: 100%;
  height: calc(46 * var(--u));
  margin-top: calc(6 * var(--u));
  fill: #000000;
  shape-rendering: crispEdges;
}
/* No celular (abaixo de 576px) o carnê não encolhe inteiro: a parcela fica com 200% da largura do painel e a borda
   corta a direita, com o canhoto e o começo da ficha à vista (de 576 a 767px o carnê já aparece com 89% a 100% do
   tamanho, sem recorte). Para o código de barras aparecer (com cerca de 1px ou mais por módulo), a parcela fica presa
   ao fundo da área, 26 unidades abaixo da borda, e o que não cabe em cima passa por baixo da tira das parcelas, que
   fica por cima, em tamanho normal, com 72px de altura (a segunda parcela não aparece). O badge fica na divisa da tira
   com a parcela. */
@supports (width: 1cqw) {
  @media (max-width: 575.98px) {
    .inicio-page .cenas {
      --c: calc(200cqw / 560);
    }
    .inicio-page .mock-tela.boleto-carne {
      justify-content: flex-end;
      width: calc(100cqw - 32px);
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }
    .inicio-page .boleto-carne .carne-tira {
      --u: 1px;
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      left: 0;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      gap: 8px;
      height: 72px;
      margin: 0;
      overflow: hidden;
    }
    .inicio-page .boleto-carne .carne-parcelas {
      flex-wrap: nowrap;
    }
    .inicio-page .carne-folha {
      position: static;
      flex: 0 0 auto;
      width: calc(560 * var(--u));
      max-width: none;
      margin-bottom: calc(-26 * var(--u));
    }
    .inicio-page .carne-folha + .carne-folha {
      display: none;
    }
    .inicio-page .boleto-carne .boleto-status {
      z-index: 2;
      top: 60px;
      right: 12px;
    }
  }
}
/* ---------- Sequência de cada cena ----------
   As animações começam com a entrada da cena (.is-ativo) e só correm com o painel na tela (--mock-estado). A do
   checkout repete a cada 10s enquanto a cena fica (o fim volta ao começo); as outras correm uma vez e param no estado sem
   animação. Tempos com --mock-vel: 1. */
@media (prefers-reduced-motion: no-preference) {
  /* Checkout (10s, repete; 1s = 10%): o Pix ganha a seleção aos 1s e "Finalizar compra" é pressionado aos 2,6s; aos 3,2s
     a tela passa à página de pagamento (crossfade de 0,3s), com o prazo descendo de 14m 59s a 14m 56s, um segundo por
     segundo; aos 7,5s o QR, o prazo e os botões dão lugar ao pagamento confirmado (0,3s), até 9,7s; volta ao checkout
     em 0,3s. Fora da cena ativa, o celular fica no começo da sequência (o checkout), para a troca de cena não piscar. */
  .inicio-page .cenas.is-observado .cena-checkout:not(.is-ativo) .loja {
    opacity: 1;
  }
  .inicio-page .cenas.is-observado .cena-checkout:not(.is-ativo) .pix-pagina {
    opacity: 0;
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .loja {
    animation: inicio-checkout-loja calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .pix-pagina {
    animation: inicio-checkout-pagina calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .loja-opcao-pix {
    animation: inicio-loja-opcao calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .loja-opcao-pix .loja-radio {
    animation: inicio-loja-radio calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .loja-nota {
    animation: inicio-loja-nota calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .loja-botao {
    animation: inicio-loja-botao calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .pix-pagamento {
    animation: inicio-pix-pagamento calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .pix-confirmado {
    animation: inicio-pix-confirmado calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .pix-timer > span:nth-child(1) {
    animation: inicio-pix-t1 calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .pix-timer > span:nth-child(2) {
    animation: inicio-pix-t2 calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .pix-timer > span:nth-child(3) {
    animation: inicio-pix-t3 calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-checkout.is-ativo .pix-timer > span:nth-child(4) {
    animation: inicio-pix-t4 calc(10s * var(--mock-vel)) infinite var(--mock-estado, paused);
  }

  /* Pix Automático (8s). Etapa A (0 a 4s): os clientes entram um a um (os cinco primeiros a cada 0,5s a partir de 0,4s,
     os outros logo depois), e os três primeiros ganham o check 0,3s depois de entrar, somando no resumo do dia (0,7s,
     1,2s e 1,7s); aos 3,6s a linha da Ana Souza se destaca. Etapa B (4 a 8s): a lista dá lugar ao detalhe da cliente
     (crossfade de 0,3s), e as cobranças entram em sequência a partir de 4,4s. */
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-lista {
    animation: inicio-sai calc(0.3s * var(--mock-vel)) calc(4s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-detalhe {
    animation: inicio-aparece calc(0.3s * var(--mock-vel)) calc(4s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-clientes li,
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-cobrancas li {
    animation: inicio-entra calc(0.3s * var(--mock-vel)) ease-out calc(var(--entra) * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-clientes li:first-child {
    animation-name: inicio-entra, inicio-auto-destaque;
    animation-duration: calc(0.3s * var(--mock-vel)), calc(0.2s * var(--mock-vel));
    animation-delay: calc(0.4s * var(--mock-vel)), calc(3.6s * var(--mock-vel));
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-clientes .automatico-check {
    animation: inicio-check calc(0.2s * var(--mock-vel)) ease-out calc((var(--entra) + 0.3s) * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-contador > span:nth-child(1) {
    animation: inicio-auto-c1 calc(8s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-contador > span:nth-child(2) {
    animation: inicio-auto-c2 calc(8s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-contador > span:nth-child(3) {
    animation: inicio-auto-c3 calc(8s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-automatico.is-ativo .automatico-contador > span:nth-child(4) {
    animation: inicio-auto-c4 calc(8s * var(--mock-vel)) both var(--mock-estado, paused);
  }

  /* PDV (6s): "Aguardando pagamento" até 3s; "Pix recebido", o aviso verde e a venda concluída completos aos 3,3s. */
  .inicio-page .cenas.is-observado .cena-pdv.is-ativo .mock-badge-espera {
    animation: inicio-sai calc(0.2s * var(--mock-vel)) calc(3s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-pdv.is-ativo .mock-badge-ok {
    animation: inicio-aparece calc(0.2s * var(--mock-vel)) calc(3s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-pdv.is-ativo .pdv-aviso {
    animation: inicio-desce calc(0.3s * var(--mock-vel)) ease-out calc(3s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-pdv.is-ativo .pdv-concluida {
    animation: inicio-aparece calc(0.3s * var(--mock-vel)) calc(3s * var(--mock-vel)) both var(--mock-estado, paused);
  }

  /* Híbrido (7s; 1s = 14,286%): "Aguardando pagamento" até 1,4s; "Pago via Pix · 14:32" completo aos 1,6s e parado até
     3,3s; de volta a "Aguardando" aos 3,5s; "Pago via boleto · aprovado às 14:47" completo aos 5,1s, até o fim. */
  .inicio-page .cenas.is-observado .cena-hibrido.is-ativo .mock-badge-espera {
    animation: inicio-hibrido-espera calc(7s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-hibrido.is-ativo .mock-hibrido-pix {
    animation: inicio-hibrido-pix calc(7s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-hibrido.is-ativo .mock-hibrido-boleto {
    animation: inicio-hibrido-boleto calc(7s * var(--mock-vel)) both var(--mock-estado, paused);
  }

  /* Condomínio e carnê (6s): "Aguardando pagamento" até 3,5s; "Pago via Pix" completo aos 3,7s, até o fim; no carnê, a
     parcela 03/12 ganha o check junto. */
  .inicio-page .cenas.is-observado .cena-condominio.is-ativo .mock-badge-espera,
  .inicio-page .cenas.is-observado .cena-carne.is-ativo .mock-badge-espera,
  .inicio-page .cenas.is-observado .cena-carne.is-ativo .carne-marca-aberta {
    animation: inicio-sai calc(0.2s * var(--mock-vel)) calc(3.5s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-condominio.is-ativo .boleto-status-pix,
  .inicio-page .cenas.is-observado .cena-carne.is-ativo .boleto-status-pix,
  .inicio-page .cenas.is-observado .cena-carne.is-ativo .carne-atual svg {
    animation: inicio-aparece calc(0.2s * var(--mock-vel)) calc(3.5s * var(--mock-vel)) both var(--mock-estado, paused);
  }
  .inicio-page .cenas.is-observado .cena-carne.is-ativo .carne-atual {
    animation: inicio-carne-paga calc(0.2s * var(--mock-vel)) calc(3.5s * var(--mock-vel)) both var(--mock-estado, paused);
  }
}

/* Momento de entrada de cada linha do Pix Automático (--entra): clientes e, no detalhe, as cobranças. */
.inicio-page .automatico-clientes li:nth-child(1) { --entra: 0.4s; }
.inicio-page .automatico-clientes li:nth-child(2) { --entra: 0.9s; }
.inicio-page .automatico-clientes li:nth-child(3) { --entra: 1.4s; }
.inicio-page .automatico-clientes li:nth-child(4) { --entra: 1.9s; }
.inicio-page .automatico-clientes li:nth-child(5) { --entra: 2.4s; }
.inicio-page .automatico-clientes li:nth-child(6) { --entra: 2.7s; }
.inicio-page .automatico-clientes li:nth-child(7) { --entra: 2.9s; }
.inicio-page .automatico-clientes li:nth-child(8) { --entra: 3.1s; }
.inicio-page .automatico-clientes li:nth-child(9) { --entra: 3.3s; }
.inicio-page .automatico-proximas li:nth-child(1) { --entra: 4.4s; }
.inicio-page .automatico-proximas li:nth-child(2) { --entra: 4.6s; }
.inicio-page .automatico-recebidos li:nth-child(1) { --entra: 4.9s; }
.inicio-page .automatico-recebidos li:nth-child(2) { --entra: 5.1s; }
.inicio-page .automatico-recebidos li:nth-child(3) { --entra: 5.3s; }
.inicio-page .automatico-recebidos li:nth-child(4) { --entra: 5.5s; }
.inicio-page .automatico-recebidos li:nth-child(5) { --entra: 5.7s; }
.inicio-page .automatico-recebidos li:nth-child(6) { --entra: 5.9s; }
.inicio-page .automatico-recebidos li:nth-child(7) { --entra: 6.1s; }

@keyframes inicio-checkout-loja {
  0%, 32% { opacity: 1; }
  35%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes inicio-checkout-pagina {
  0%, 32% { opacity: 0; }
  35%, 97% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes inicio-loja-opcao {
  0%, 10% { border-color: #DDE3EC; background-color: #ffffff; }
  13%, 96.99% { border-color: #0860DB; background-color: #F4F8FF; }
  97%, 100% { border-color: #DDE3EC; background-color: #ffffff; }
}
@keyframes inicio-loja-radio {
  0%, 10% { border-color: #9AA6B8; background-color: #ffffff; }
  13%, 96.99% { border-color: #0860DB; background-color: #0860DB; }
  97%, 100% { border-color: #9AA6B8; background-color: #ffffff; }
}
@keyframes inicio-loja-nota {
  0%, 10% { opacity: 0; }
  14%, 96.99% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes inicio-loja-botao {
  0%, 26% { background-color: #021E46; transform: scale(1); }
  28% { background-color: #0A3A7A; transform: scale(0.96); }
  31%, 100% { background-color: #021E46; transform: scale(1); }
}
@keyframes inicio-pix-pagamento {
  0%, 75% { opacity: 1; }
  78%, 99.99% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes inicio-pix-confirmado {
  0%, 75% { opacity: 0; }
  78%, 99.99% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes inicio-pix-t1 {
  0%, 44.99% { opacity: 1; }
  45%, 99.99% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes inicio-pix-t2 {
  0%, 44.99% { opacity: 0; }
  45%, 54.99% { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes inicio-pix-t3 {
  0%, 54.99% { opacity: 0; }
  55%, 64.99% { opacity: 1; }
  65%, 100% { opacity: 0; }
}
@keyframes inicio-pix-t4 {
  0%, 64.99% { opacity: 0; }
  65%, 99.99% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes inicio-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes inicio-check {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}
@keyframes inicio-auto-destaque {
  to { background-color: #EEF4FE; }
}
/* Resumo do dia no Pix Automático (8s; 1s = 12,5%): soma no check de cada cobrança recebida (0,7s, 1,2s e 1,7s). */
@keyframes inicio-auto-c1 {
  0%, 8.74% { opacity: 1; }
  8.75%, 100% { opacity: 0; }
}
@keyframes inicio-auto-c2 {
  0%, 8.74% { opacity: 0; }
  8.75%, 14.99% { opacity: 1; }
  15%, 100% { opacity: 0; }
}
@keyframes inicio-auto-c3 {
  0%, 14.99% { opacity: 0; }
  15%, 21.24% { opacity: 1; }
  21.25%, 100% { opacity: 0; }
}
@keyframes inicio-auto-c4 {
  0%, 21.24% { opacity: 0; }
  21.25%, 100% { opacity: 1; }
}
@keyframes inicio-sai {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes inicio-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes inicio-desce {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: none; }
}
@keyframes inicio-hibrido-espera {
  0%, 20% { opacity: 1; }
  22.857%, 47.143% { opacity: 0; }
  50%, 70% { opacity: 1; }
  72.857%, 100% { opacity: 0; }
}
@keyframes inicio-hibrido-pix {
  0%, 20% { opacity: 0; }
  22.857%, 47.143% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes inicio-hibrido-boleto {
  0%, 70% { opacity: 0; }
  72.857%, 100% { opacity: 1; }
}
@keyframes inicio-carne-paga {
  from { border-color: #0860DB; background-color: #ffffff; color: #0860DB; }
  to { border-color: transparent; background-color: #E3F6EC; color: #0B6B3E; }
}

/* ---------- Cenas nos painéis lado a lado (a partir de 992px) ----------
   As duas áreas ficam na mesma linha da grade e têm a mesma altura, a do boleto; o celular passa a medir 360/520 da
   largura dos documentos (360px com eles em 520px), e a mesma fração dele fica à vista nos dois painéis. De 992 a 1199px
   o painel é mais estreito e tudo encolhe na mesma proporção. */
@media (min-width: 992px) {
  .inicio-page .painel-produto-pix .cenas {
    height: calc(645 * var(--d) + 28 * (1px - var(--d)));
  }
}
@supports (width: 1cqw) {
  @media (min-width: 992px) {
    .inicio-page .cenas {
      --p: calc(var(--largura) * 9 / 4160);
    }
  }
}

/* ---------- Para o seu jeito de vender: abas ----------
   Sem JS, os quatro perfis ficam empilhados, cada um com o seu título. Com as abas (.is-abas, de pages/inicio.js), os
   quatro painéis ocupam a mesma célula da grade e só o da aba escolhida aparece: a caixa tem a altura do maior e não
   salta na troca. Links em linha a partir de 768px. */
.inicio-page .perfis {
  padding-bottom: 80px;
  background-color: #F6F9FE;
}
.inicio-page .perfis .title-section {
  margin-bottom: 16px;
}
.inicio-page .perfis .description-section {
  margin-bottom: 32px;
}
.inicio-page .perfis-abas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
}
.inicio-page .perfis-abas[hidden] {
  display: none;
}
/* width: auto desfaz o width: 100% que main.css põe em todo button. */
.inicio-page .perfis-aba {
  width: auto;
  padding: 10px 20px;
  border: 1px solid #C9D6EA;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.inicio-page .perfis-aba:hover {
  border-color: var(--color-1);
}
.inicio-page .perfis-aba[aria-selected="true"] {
  border-color: var(--color-1);
  background-color: var(--color-1);
  color: #ffffff;
}
.inicio-page .perfis-aba:focus-visible {
  outline: 3px solid var(--color-3);
  outline-offset: 2px;
}
.inicio-page .perfis-paineis {
  display: grid;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
.inicio-page .perfil-painel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 24px;
  border: 1px solid #E3EAF5;
  border-radius: 24px;
  background-color: #ffffff;
}
.inicio-page .perfis.is-abas .perfil-painel {
  grid-area: 1 / 1;
}
.inicio-page .perfis.is-abas .perfil-painel:not(.is-ativo) {
  visibility: hidden;
}
.inicio-page .perfil-painel .perfil-titulo {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
}
.inicio-page .perfis.is-abas .perfil-titulo {
  display: none;
}
.inicio-page .perfil-frase {
  margin: 0 0 20px;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.inicio-page .perfil-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.inicio-page .perfil-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.inicio-page .perfil-links a::after {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: url("../../images/icons/chevron-right.svg") center / contain no-repeat;
}
.inicio-page .perfil-links a:hover {
  color: #064AAB;
}
.inicio-page .perfil-links a:focus-visible {
  outline: 3px solid var(--color-3);
  outline-offset: 3px;
}

@media (min-width: 576px) {
  .inicio-page .perfil-painel {
    flex-direction: row;
    gap: 24px;
    padding: 40px;
  }
}

@media (min-width: 768px) {
  .inicio-page .perfil-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 32px;
  }
}

@media (min-width: 992px) {
  .inicio-page .perfis {
    padding-bottom: 128px;
  }
  .inicio-page .perfis .description-section {
    margin-bottom: 56px;
  }
  .inicio-page .perfis-abas {
    margin-bottom: 32px;
  }
}

/* ---------- Por que a PagHiper: editorial ----------
   Fundo branco, uma linha fina em cima e outra embaixo do bloco, e quatro colunas separadas por linhas verticais a partir
   de 992px; abaixo disso, os itens ficam empilhados, com a linha entre eles. Numeral no azul do site (5,7:1), título em
   var(--color-3) e texto em #5B6B82 (5,4:1). */
.inicio-page .porque-bloco {
  padding-top: 48px;
  padding-bottom: 48px;
  border-top: 1px solid #E3EAF5;
  border-bottom: 1px solid #E3EAF5;
}
.inicio-page .porque .title-section {
  margin-bottom: 32px;
}
.inicio-page .porque-lista {
  display: grid;
  margin: 0;
}
.inicio-page .porque-lista > li + li {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #E3EAF5;
}
.inicio-page .porque-numero {
  display: block;
  color: var(--color-1);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.inicio-page .porque-titulo {
  margin: 12px 0 8px;
  color: var(--color-3);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}
.inicio-page .porque-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 992px) {
  .inicio-page .porque-bloco {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .inicio-page .porque-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .inicio-page .porque-lista > li {
    padding: 0 32px;
  }
  .inicio-page .porque-lista > li:first-child {
    padding-left: 0;
  }
  .inicio-page .porque-lista > li:last-child {
    padding-right: 0;
  }
  .inicio-page .porque-lista > li + li {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid #E3EAF5;
  }
}

/* ---------- Quem recebe com a PagHiper (só com $mostrarClientes no index.php) ---------- */
/* Seis posições de 32px de altura, em cinza; enquanto não chegam os logos, cada uma é um espaço tracejado. */
.inicio-page .clientes-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;
  margin: 32px 0 0;
}
.inicio-page .clientes-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 700;
}
.inicio-page .clientes-logo img {
  width: auto;
  height: 32px;
  filter: grayscale(1);
}
.inicio-page .clientes-vaga {
  min-width: 120px;
  padding: 0 16px;
  border: 1px dashed #B8C4D6;
  border-radius: 8px;
  font-weight: 500;
}

/* ---------- Integrado às principais plataformas ---------- */
/* O marquee é o do produto e-commerce das páginas de produto (4 logos por vez, 3 abaixo de 991px); aqui fora de
   uma .produto, parts/pagina-produto.js o monta quando a seção chega a 200px da tela. Abaixo dele, uma linha com os
   três caminhos de integração. */
.inicio-page .integracoes .produto-parceiros {
  max-width: 960px;
  margin: 32px auto 40px;
}
/* Logos com 40px de altura visível, limitados pela largura do slide. Nos SVGs com margem em volta da marca
   (.logo-recortado), a caixa corta a margem de cima e de baixo (a marca fica centrada no arquivo): a largura é a que dá
   40px à marca, e a proporção fixa faz a altura acompanhar quando o slide é mais estreito, sem cortar os lados.
   Loja Integrada, Nuvemshop e Shooting House batem antes na largura do slide. */
.inicio-page .integracoes .produto-parceiros .parceiro img {
  width: auto;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
}
.inicio-page .integracoes .produto-parceiros .parceiro .logo-recortado {
  height: auto;
  object-fit: cover;
}
.inicio-page .integracoes .produto-parceiros .parceiro .logo-nuvemshop {
  width: 267px;
  aspect-ratio: 267 / 40;
}
.inicio-page .integracoes .produto-parceiros .parceiro .logo-vtex {
  width: 153px;
  aspect-ratio: 153 / 40;
}
.inicio-page .integracoes .produto-parceiros .parceiro .logo-woo {
  width: 152px;
  aspect-ratio: 152 / 40;
}
/* O SVG do Shoppub traz, embaixo da marca, a frase "Tecnologia que veste a sua marca" como texto numa fonte que o
   navegador não tem (sai em outra fonte e cortada); a caixa mostra só a marca, os 111 de cima das 148 unidades de altura
   do arquivo, com 40px de altura. */
.inicio-page .integracoes .produto-parceiros .parceiro .logo-shoppub {
  width: 190px;
  height: auto;
  aspect-ratio: 528 / 111;
  object-fit: cover;
  object-position: top;
}
.inicio-page .integracoes-texto {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.inicio-page .integracoes-texto .produto-link {
  font-size: inherit;
  vertical-align: bottom;
}

@media (min-width: 992px) {
  .inicio-page .integracoes .produto-parceiros {
    margin: 56px auto 48px;
  }
  .inicio-page .integracoes-texto {
    font-size: 1.125rem;
  }
}

/* ---------- Para desenvolvedores: seção clara com a janela de terminal escura ---------- */
.inicio-page .desenvolvedores {
  margin-top: 80px;
  padding-bottom: 80px;
  background-color: #F6F9FE;
}
.inicio-page .desenvolvedores-texto .title-section {
  margin-bottom: 16px;
}
.inicio-page .desenvolvedores-recursos {
  margin: 0 0 24px;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.inicio-page .desenvolvedores-visual {
  margin-top: 40px;
}

/* Abaixo de 360px "desenvolvedores" não cabe na coluna com os 2rem que main.css força (com !important) até 1024px. */
@media (max-width: 359.98px) {
  .inicio-page .desenvolvedores-texto .title-section {
    font-size: 1.75rem !important;
  }
}

@media (min-width: 992px) {
  .inicio-page .desenvolvedores {
    margin-top: 128px;
    padding-bottom: 128px;
  }
  .inicio-page .desenvolvedores-visual {
    margin-top: 0;
  }
}

/* Entre 1025 e 1439px o título de 3,5rem (home.css) não cabe na coluna de 5/12: "desenvolvedores" transbordaria
   sobre o terminal. Abaixo de 1025px main.css já reduz os títulos; a partir de 1440px a coluna comporta. */
@media (min-width: 1025px) and (max-width: 1439.98px) {
  .inicio-page .desenvolvedores-texto .title-section {
    font-size: 2.75rem;
  }
}

/* Janela de terminal: a moldura do .mock-tela (pagina-produto.css) em fundo escuro, com a largura da coluna até 640px.
   Diferente dos mockups, não é decorativa: tem abas, texto selecionável e o botão Copiar, e por isso não leva
   aria-hidden. */
.inicio-page .mock-tela.terminal {
  width: 100%;
  max-width: 640px;
  background-color: #0B1F44;
  box-shadow: 0 16px 48px rgba(2, 30, 70, 0.24);
  color: #E6EDF7;
}
.inicio-page .terminal-barra {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.inicio-page .terminal-barra > span {
  flex: 0 0 8px;
  background-color: rgba(255, 255, 255, 0.24);
}
/* Os três pontos saem nas telas estreitas, para as abas e o Copiar caberem numa linha. */
@media (max-width: 399.98px) {
  .inicio-page .terminal-barra > span {
    display: none;
  }
}
.inicio-page .terminal-abas {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}
.inicio-page .terminal-abas[hidden] {
  display: none;
}
/* width: auto desfaz o width: 100% que main.css põe em todo button. */
.inicio-page .terminal-aba,
.inicio-page .terminal-copiar {
  width: auto;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.inicio-page .terminal-aba:hover {
  color: #ffffff;
}
.inicio-page .terminal-aba[aria-selected="true"] {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.inicio-page .terminal-copiar {
  margin-left: auto;
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.inicio-page .terminal-copiar:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.inicio-page .terminal-copiar[hidden] {
  display: none;
}
/* Abaixo de 576px as abas e o Copiar, em 1rem, só cabem numa linha com menos respiro lateral;
   abaixo de 360px o Copiar desce para uma segunda linha, à direita. */
@media (max-width: 575.98px) {
  .inicio-page .terminal-aba,
  .inicio-page .terminal-copiar {
    padding-right: 8px;
    padding-left: 8px;
  }
}
@media (max-width: 399.98px) {
  .inicio-page .terminal-abas {
    margin-left: 0;
  }
}
.inicio-page .terminal-aba:focus-visible,
.inicio-page .terminal-copiar:focus-visible,
.inicio-page .terminal-painel:focus-visible {
  outline: 2px solid #9ECBFF;
  outline-offset: 2px;
}
.inicio-page .terminal-painel:focus-visible {
  outline-offset: -2px;
}
/* Cada tela rola na horizontal dentro da janela; o painel recebe o foco para a rolagem pelo teclado. */
.inicio-page .terminal-painel {
  overflow-x: auto;
  padding: 24px;
}
/* Sem JS, as duas telas ficam empilhadas, cada uma com o seu título; com as abas, os títulos saem e só a tela da aba
   escolhida aparece. */
.inicio-page .terminal-painel + .terminal-painel {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.inicio-page .terminal-titulo {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.inicio-page .terminal.is-abas .terminal-titulo {
  display: none;
}
.inicio-page .terminal.is-abas .terminal-painel:not(.is-ativo) {
  display: none;
}
.inicio-page .terminal.is-abas .terminal-painel + .terminal-painel {
  border-top: 0;
}
/* overflow visível: o bootstrap põe overflow:auto no pre, e a rolagem precisa ficar no painel, que recebe o foco.
   A altura mínima é a de 12 linhas: a requisição e a resposta cabem sem rolagem vertical, e a troca de aba não salta. */
.inicio-page .terminal pre {
  overflow: visible;
  min-height: calc(12 * 1.7em);
  margin: 0;
  color: #E6EDF7;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre;
}
/* main.css põe Montserrat em todo elemento (*): o código e os trechos coloridos voltam à fonte mono. */
.inicio-page .terminal pre,
.inicio-page .terminal pre * {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.inicio-page .terminal code {
  color: inherit;
  font-size: inherit;
}
.inicio-page .codigo-chave {
  color: #9ECBFF;
}
.inicio-page .codigo-texto {
  color: #C3E88D;
}

/* ---------- Abra sua conta em 4 passos: stepper ---------- */
/* Até 991px os passos ficam na vertical, com a linha à esquerda passando pelo centro dos números; a partir de 992px,
   em linha, com a linha ligando os números (como o mini-fluxo do QR Code, em pagina-produto.css). */
.inicio-page .como-abrir .title-section {
  margin-bottom: 40px;
}
.inicio-page .passos {
  position: relative;
  display: grid;
  gap: 32px;
  max-width: 520px;
  margin: 0 auto;
}
.inicio-page .passos::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 24px;
  border-left: 1px solid #C9D6EA;
}
.inicio-page .passo {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
}
.inicio-page .passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-1);
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
}
.inicio-page .passo-titulo {
  margin: 10px 0 6px;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}
.inicio-page .passo-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.inicio-page .como-abrir-cta {
  margin-top: 40px;
  text-align: center;
}
.inicio-page .como-abrir-cta .buttom-menu {
  display: inline-block;
  text-decoration: none;
}

@media (min-width: 992px) {
  .inicio-page .como-abrir .title-section {
    margin-bottom: 56px;
  }
  .inicio-page .passos {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: none;
  }
  .inicio-page .passos::before {
    right: 12.5%;
    bottom: auto;
    left: 12.5%;
    border-top: 1px solid #C9D6EA;
    border-left: 0;
  }
  .inicio-page .passo {
    grid-template-columns: none;
    justify-items: center;
    gap: 16px;
    text-align: center;
  }
  .inicio-page .passo-titulo {
    margin-top: 0;
    font-size: 1.25rem;
  }
  .inicio-page .como-abrir-cta {
    margin-top: 56px;
  }
}

/* ---------- Preço: duas caixas, Pix e boleto ---------- */
/* Empilhadas até 1199px, alinhadas à esquerda como o texto do banner; a partir de 1200px, lado a lado, cada uma com
   pelo menos 200px. */
.inicio-page .precos-caixas {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.inicio-page .precos-caixas .box-price {
  min-width: 200px;
  max-width: 400px;
}
/* O ornamento verde de home.css fica só na caixa de baixo (a da direita a partir de 1200px). Com as caixas empilhadas
   ele não encosta nelas: abaixo de 768px (SVG embaixo da caixa) desce 12px; de 768 a 1199px (PNG ao lado) fica
   inteiro à direita da caixa, no espaço livre do banner. A partir de 1200px fica como nas páginas de produto: nasce
   30px por trás da caixa (que fica por cima) e sai pela borda da tela; afastado da caixa, ficaria cortado pela borda. */
.inicio-page .precos-caixas .box-price:first-child::before {
  content: none;
}
.inicio-page .precos-caixas .box-price::before {
  bottom: -112px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .inicio-page .precos-caixas .box-price::before {
    bottom: auto;
    left: calc(100% + 16px);
  }
}

@media (min-width: 1200px) {
  .inicio-page .precos-caixas .box-price::before {
    bottom: auto;
  }
}
/* Nota do comercial em 1rem (pagina-produto.css usa 0,875rem); o link fica branco como o texto da faixa. */
.inicio-page .nota-preco {
  font-size: 1rem;
}
.inicio-page .nota-preco a {
  color: inherit;
  text-decoration: underline;
}
.inicio-page .nota-preco a:hover {
  color: inherit;
}
.inicio-page .nota-preco a:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px;
}

/* Até 1024px main.css já dá margem acima das caixas; de 1025 a 1199px as colunas ainda empilham sem respiro. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
  .inicio-page .precos-caixas {
    margin-top: 32px;
  }
}

@media (min-width: 1200px) {
  .inicio-page .precos-caixas {
    flex-direction: row;
    align-items: stretch;
    padding-left: 24px;
  }
  .inicio-page .precos-caixas .box-price {
    flex: 1 1 0;
    max-width: none;
  }
}

/* ---------- Depoimentos: três visíveis e o botão que mostra os outros dois ---------- */
/* Sem JS, os cinco aparecem e o botão não. O depoimento revelado recebe o foco (tabindex="-1", de pages/inicio.js). */
.inicio-page .depoimento-empresa {
  font-size: 1rem;
}
.inicio-page .depoimento:focus {
  outline: 3px solid var(--color-3);
  outline-offset: 2px;
}
.inicio-page .depoimento:focus:not(:focus-visible) {
  outline: 0;
}
.inicio-page .depoimentos-mais {
  margin-top: 40px;
  text-align: center;
}
.inicio-page .depoimentos-mais[hidden] {
  display: none;
}
/* width: auto desfaz o width: 100% que main.css põe em todo button. */
.inicio-page .depoimentos-botao {
  display: inline-block;
  width: auto;
  max-width: none;
  padding-right: 32px;
  padding-left: 32px;
}

/* ---------- Espaçamento: 80px entre as seções no mobile e 128px a partir de 992px ----------
   Cada seção leva o respiro em cima; as faixas com fundo (perfis e desenvolvedores) levam também embaixo e, antes
   delas, a mesma distância em branco. Títulos a 56px do conteúdo no desktop. O botão de pausa sobe para 1rem, como o
   resto do texto da página. */
.inicio-page .secao,
.inicio-page .secao-faq,
.inicio-page .main-cta-servicos,
.inicio-page .banner .container-banner {
  padding-top: 80px;
}
.inicio-page .perfis {
  margin-top: 80px;
}
.inicio-page .animacoes-botao {
  font-size: 1rem;
}

@media (min-width: 992px) {
  .inicio-page .secao,
  .inicio-page .secao-faq,
  .inicio-page .main-cta-servicos,
  .inicio-page .banner .container-banner {
    padding-top: 128px;
  }
  .inicio-page .perfis {
    margin-top: 128px;
  }
  .inicio-page .porque .title-section,
  .inicio-page .como-abrir .title-section,
  .inicio-page .secao-depoimentos .title-section,
  .inicio-page .secao-faq .title-section {
    margin-bottom: 56px;
  }
}

/* ---------- CTA fixo no mobile (criado por pages/inicio.js) ---------- */
/* Abaixo de 992px, aparece depois que o hero sai da tela e some quando o CTA final ou o "Fale conosco" chegam.
   Fica abaixo do banner de cookies (z-index 1000); enquanto aparece, o body ganha o respiro da altura dela e o
   botão flutuante do WhatsApp sobe. */
.inicio-page .cta-fixo {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  padding: 8px 24px calc(8px + env(safe-area-inset-bottom));
  background-color: #ffffff;
  box-shadow: 0 -8px 24px rgba(2, 30, 70, 0.12);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.inicio-page .cta-fixo.is-visivel {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.25s ease;
}
.inicio-page .cta-fixo .buttom-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: none;
  height: 56px;
  padding: 0 24px !important;
  font-size: 1.125rem;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .inicio-page .cta-fixo,
  .inicio-page .cta-fixo.is-visivel {
    transition: none;
  }
}

/* A reserva no fim da tela vale enquanto a barra existe (com JS), mesmo escondida: o foco que leva o hero para fora
   da tela faz a barra aparecer, e o elemento focado não pode ficar embaixo dela. */
@media (max-width: 991.98px) {
  html.cta-fixo-ativo {
    scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  body.cta-fixo-visivel {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  body.cta-fixo-visivel #waurlsite {
    bottom: 112px !important;
  }
  body.cta-fixo-visivel #msg1 {
    bottom: 124px !important;
  }
  body.cta-fixo-visivel #alertWapp {
    bottom: 162px !important;
  }
}

@media (min-width: 992px) {
  .inicio-page .cta-fixo {
    display: none;
  }
}