/* ==========================================================================
   Página /pix-no-pdv/: só o que é desta página. Hero, faixa de confiança, faixas, mockups, FAQ e faixa final vêm de
   components/pagina-produto.css (e os títulos de seção também de pages/home.css), carregados antes deste arquivo. Vários
   blocos são cópias dos da /split-de-pagamento/ (pages/split-de-pagamento.css), com o prefixo pdv- no lugar de sp-: as
   fontes de reserva, o respiro, os destaques de "O que é", o mini-fluxo vertical, a cena com palco e o toast, a lista
   em duas colunas das regras, a seção de tarifas, os cartões de perfil, o painel da habilitação e o painel "Por que
   confiar". Regras escopadas em .pdv-page. Mobile first.
   ========================================================================== */

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

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

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

/* Tetos de largura dos textos do hero. A reserva e a Montserrat quebram as linhas no mesmo lugar em quase toda largura
   de caixa, mas não em faixas estreitas; quando a caixa de um texto cai numa delas numa das telas mais usadas, a coluna
   muda de altura com a chegada da Montserrat e desloca o hero. Os tetos deixam a caixa fora dessas faixas:
   - o título de 2rem quebra diferente com a caixa de 341 a 345px: fica com 340px;
   - a linha do integrador quebra diferente com a caixa de 366 a 371px: fica com 365px;
   - a partir de 992px, o título de 2,4rem e a descrição de 18px ficam com 476px (quebram igual de 410 a 530px e de
     428 a 496px);
   - de 1200 a 1439px, o título de 3rem quebra diferente com a caixa de 511 a 512px: fica com 500px;
   - a partir de 1200px, a descrição de 20px fica com 530px (quebra igual de 475 a 541px); de 1200 a 1211px, onde a
     coluna cai na faixa de 460 a 474px, que quebra diferente, fica com 459px;
   - a partir de 1200px, o chip fica com 600px (quebra igual de 411 a 672px);
   - a partir de 1440px, o título de 3,75rem fica com 520px (quebra igual de 463 a 636px). */
@media (min-width: 389px) and (max-width: 393.98px) {
  .pdv-page .main-hero-pix .title {
    max-width: 340px;
  }
}

@media (min-width: 414px) and (max-width: 419.98px) {
  .pdv-page .pdv-hero-integrador {
    max-width: 365px;
  }
}

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

@media (min-width: 1200px) {
  .pdv-page .main-hero-pix .title {
    max-width: 500px;
  }
  .pdv-page .main-hero-pix .description {
    max-width: 530px;
  }
  .pdv-page .main-hero-pix .hero-chip {
    max-width: 600px;
  }
}

@media (min-width: 1200px) and (max-width: 1211.98px) {
  .pdv-page .main-hero-pix .description {
    max-width: 459px;
  }
}

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

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

/* ---------- Respiro ----------
   O da /split-de-pagamento/: 96px no alto de cada seção (144px a partir de 992px) e 72px em cima e embaixo de cada
   faixa (128px a partir de 992px). A faixa de confiança continua encaixada na abertura, como no componente. */
.pdv-page .secao,
.pdv-page .secao-faq,
.pdv-page .main-cta-servicos {
  padding-top: 96px;
}
.pdv-page .produto {
  padding: 72px 0;
}

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

/* ---------- Abertura: a linha do integrador ----------
   Embaixo do chip, discreta: o texto no tamanho da descrição menor e o link sublinhado só em "Veja a integração.",
   branco sobre o painel azul até 991px e, a partir de 992px, no azul dos links sobre o branco. */
.pdv-page .pdv-hero-integrador {
  margin: 16px 0 0;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.pdv-page .pdv-hero-integrador a {
  color: #ffffff;
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdv-page .pdv-hero-integrador a:hover {
  color: #ffffff;
  text-decoration-thickness: 2px;
}
.pdv-page .pdv-hero-integrador a:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .pdv-page .pdv-hero-integrador {
    color: var(--color-3);
  }
  .pdv-page .pdv-hero-integrador a,
  .pdv-page .pdv-hero-integrador a:hover {
    color: var(--color-1);
  }
  .pdv-page .pdv-hero-integrador a:focus-visible {
    outline-color: var(--color-3) !important;
  }
}

/* ---------- Abertura: o caixa ----------
   O caixa fica direto sobre o azul do hero. Cada cenário (.pdv-cenario) é uma grade: o caixa, a janela branca do
   sistema com a venda, o valor, o Pix selecionado e o estado, nas duas primeiras colunas; o celular do cliente,
   coadjuvante, com "Pagamento enviado"; o toast da entrada no saldo embaixo, à direita; e, no alto, no respiro de 36px,
   a etiqueta do público (a pílula branca do componente). No cenário do restaurante o QR Code aparece na própria tela do
   caixa (.pdv-caixa-qr); nos outros, num aparelho na frente do caixa (o bloco seguinte). Os modos:
   - empilhado (abaixo de 576px e de 992 a 1328px, onde a forma azul é estreita): o caixa na largura toda, com o QR à
     direita do valor e do Pix (abaixo de 360px, embaixo do estado); o celular sai do pé do caixa, à direita;
   - lado a lado (de 576 a 991px e a partir de 1329px): o QR do caixa na coluna da direita do corpo, embaixo, e o
     celular numa terceira coluna, à direita do caixa.
   O toast tem largura fixa (para a caixa não mudar quando a Montserrat chega) e fica encostado à direita: embaixo, à
   esquerda, ele sairia da curva da forma azul de 992 a 1199px. A linha de baixo do caixa (--pdv-sobre) e a de baixo
   dela (--pdv-sai) têm altura fixa, a do aparelho mais alto: o toast fica no mesmo lugar em todos os cenários.
   O conjunto inteiro (.pdv-hero-visual) é que é observado por parts/pagina-produto.js. Sem animação, o cenário 1. */
.pdv-page .pdv-hero-visual {
  --pdv-obj: 132px;
  --pdv-zona: 80px;
  --pdv-cel: 88px;
  --pdv-sobre: 20px;
  --pdv-sai: 167px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin: 0 auto;
  color: var(--color-3);
  text-align: left;
}
.pdv-page .pdv-cenario {
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1fr) var(--pdv-obj);
  grid-template-rows: auto var(--pdv-sobre) var(--pdv-sai) auto;
  align-self: start;
  padding-top: 36px;
}
.pdv-page .pdv-cenario + .pdv-cenario {
  visibility: hidden;
}
.pdv-page .pdv-etiqueta {
  position: absolute;
  top: 0;
  left: 0;
  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;
}
.pdv-page .pdv-cenario .pdv-caixa {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  box-shadow: 0 24px 64px rgba(2, 30, 70, 0.18);
}
.pdv-page .pdv-cenario-caixa .pdv-caixa-corpo {
  grid-template-columns: minmax(0, 1fr) var(--pdv-zona);
  grid-template-areas: "venda venda" "valor zona" "forma zona" "estado estado";
}
/* O QR na tela do caixa: um quadro com o QR decorativo do sprite. Empilhado, o quadro tem a altura das linhas do valor
   e do Pix (80px + os 13px de baixo = 93px, as duas linhas com as margens), para o caixa ter a mesma altura nos quatro
   cenários. */
.pdv-page .pdv-caixa-qr {
  display: flex;
  grid-area: zona;
  align-items: center;
  justify-content: center;
  align-self: start;
  height: var(--pdv-zona);
  margin-bottom: 13px;
  border: 1px solid #E3EAF5;
  border-radius: 12px;
}
.pdv-page .pdv-qr {
  display: block;
  fill: var(--color-3);
  shape-rendering: crispEdges;
}
.pdv-page .pdv-caixa-qr .pdv-qr {
  width: calc(var(--pdv-zona) - 18px);
  height: calc(var(--pdv-zona) - 18px);
}
/* O celular do cliente: moldura fina no navy do celular da /pix-automatico/ (3px), com o raio proporcional à largura
   (20% dela: 17,6px com 88px e 19,2px com 96px; a tela, 3px menos), a sombra suave, e na tela branca o check,
   "Pagamento enviado" (em duas linhas) e, embaixo, o valor do cenário, em negrito tabular, numa linha, como um app de
   banco mostraria. A tela tem 2px de respiro dos lados, o que basta para "Pagamento" e o valor caberem numa linha
   cada. No cenário do restaurante ele fica embaixo do QR do caixa (segunda coluna); nos outros, ao lado do aparelho. */
.pdv-page .pdv-celular {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: start;
  justify-self: end;
  width: var(--pdv-cel);
  padding: 3px;
  border-radius: calc(var(--pdv-cel) * 0.2);
  background-color: #0B1F44;
  box-shadow: 0 14px 32px rgba(2, 30, 70, 0.2);
}
.pdv-page .pdv-celular-tela {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: calc(var(--pdv-cel) * 1.6);
  padding: 6px 2px;
  border-radius: calc(var(--pdv-cel) * 0.2 - 3px);
  background-color: #ffffff;
  text-align: center;
}
.pdv-page .pdv-celular-tela .mock-marca-ok {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
}
.pdv-page .pdv-celular-tela .mock-marca-ok svg {
  width: 16px;
  height: 16px;
}
.pdv-page .pdv-celular-texto {
  color: var(--color-3);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}
.pdv-page .pdv-celular-valor {
  margin-top: -2px;
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.pdv-page .pdv-hero-toast {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: end;
  width: min(236px, 100%);
}

/* Abaixo de 360px, o QR do caixa do restaurante desce para baixo do estado: ao lado do valor, não cabe. */
@media (max-width: 359.98px) {
  .pdv-page .pdv-cenario-caixa .pdv-caixa-corpo {
    grid-template-areas: "venda venda" "valor valor" "forma forma" "estado estado" "zona zona";
  }
  .pdv-page .pdv-caixa-qr {
    justify-self: end;
    width: var(--pdv-zona);
    margin: 14px 0 0;
  }
}

/* Lado a lado: de 576 a 991px e a partir de 1329px. O QR do caixa (ou o lugar dele) fica na coluna da direita do corpo,
   embaixo; a linha de baixo do caixa (--pdv-sobre) cobre esse lugar, onde fica o aparelho nos outros cenários; o
   celular vai para uma terceira coluna, à direita do caixa. */
@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1329px) {
  .pdv-page .pdv-hero-visual {
    --pdv-obj: 150px;
    --pdv-zona: 118px;
    --pdv-cel: 96px;
    --pdv-sobre: 150px;
    --pdv-sai: 49px;
  }
  .pdv-page .pdv-cenario {
    grid-template-columns: minmax(0, 1fr) var(--pdv-obj) calc(var(--pdv-cel) + 20px);
  }
  .pdv-page .pdv-cenario .pdv-caixa-corpo {
    grid-template-columns: minmax(0, 1fr) var(--pdv-zona);
    grid-template-areas: "venda venda" "valor zona" "forma zona" "estado zona";
  }
  .pdv-page .pdv-caixa-qr {
    align-self: end;
    margin-bottom: 0;
  }
  .pdv-page .pdv-celular {
    grid-column: 3;
  }
}

/* A partir de 992px, encostado à direita da coluna; de 992 a 1328px, empilhado com 340px (a forma azul é estreita),
   e a partir de 1329px lado a lado com 540px. */
@media (min-width: 992px) {
  .pdv-page .pdv-hero-visual {
    margin: 0 0 0 auto;
  }
}

@media (min-width: 992px) and (max-width: 1328.98px) {
  .pdv-page .pdv-hero-visual {
    max-width: 340px;
  }
}

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

/* ---------- Abertura: os aparelhos ----------
   Nos cenários 2 a 4, o QR Code aparece num aparelho na frente do caixa, na segunda coluna da grade: por cima da linha
   de baixo do caixa (lado a lado, o lugar do QR do caixa) e saindo por baixo dele. No traço dos mockups: formas simples,
   sem marca, as telas brancas e as molduras no navy do celular.
   - pinpad (farmácia): o corpo navy, a telinha com o QR e o valor e o teclado em traços, doze teclas sem número;
   - cupom (loja de roupas): o papel da térmica com o picote embaixo (o do cupom do componente), a venda, o QR e o valor;
   - monitor do cliente (pet shop): a moldura navy, a tela com o QR e o valor, e o pé.
   O pinpad é o mais alto (187px empilhado e 199px lado a lado) e decide a linha de baixo da grade (--pdv-sai). O
   celular fica na primeira coluna, encostado no aparelho (12px dele); lado a lado, na terceira, como no cenário do
   restaurante. */
.pdv-page .pdv-superficie {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: start;
  width: 100%;
}
.pdv-page .pdv-superficie-valor {
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.pdv-page .pdv-tela-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pdv-page .pdv-pinpad .pdv-qr,
.pdv-page .pdv-monitor .pdv-qr {
  width: 64px;
  height: 64px;
}
.pdv-page .pdv-pinpad {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 8px 12px;
  border-radius: 18px;
  background-color: #0B1F44;
  box-shadow: 0 24px 56px rgba(2, 30, 70, 0.28);
}
.pdv-page .pdv-pinpad-tela {
  padding: 10px 6px 8px;
  border-radius: 11px;
  background-color: #ffffff;
}
.pdv-page .pdv-teclas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
  padding: 0 8px;
}
.pdv-page .pdv-teclas span {
  height: 9px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.22);
}
.pdv-page .pdv-cupom {
  filter: drop-shadow(0 16px 28px rgba(2, 30, 70, 0.24));
}
.pdv-page .pdv-cupom-papel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 24px;
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95% 100%, 90% calc(100% - 8px), 85% 100%, 80% calc(100% - 8px), 75% 100%, 70% calc(100% - 8px), 65% 100%, 60% calc(100% - 8px), 55% 100%, 50% calc(100% - 8px), 45% 100%, 40% calc(100% - 8px), 35% 100%, 30% calc(100% - 8px), 25% 100%, 20% calc(100% - 8px), 15% 100%, 10% calc(100% - 8px), 5% 100%, 0 calc(100% - 8px));
}
.pdv-page .pdv-cupom-venda {
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}
.pdv-page .pdv-cupom .pdv-qr {
  width: 80px;
  height: 80px;
}
.pdv-page .pdv-monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 16px 28px rgba(2, 30, 70, 0.24));
}
.pdv-page .pdv-monitor-tela {
  width: 100%;
  padding: 10px 6px 8px;
  border: 6px solid #0B1F44;
  border-radius: 12px;
  background-color: #ffffff;
}
.pdv-page .pdv-monitor-pe {
  width: 44px;
  height: 22px;
  background:
    linear-gradient(#0B1F44, #0B1F44) center top / 14px 16px no-repeat,
    linear-gradient(#0B1F44, #0B1F44) center bottom / 44px 6px no-repeat;
}
.pdv-page .pdv-cenario:not(.pdv-cenario-caixa) .pdv-celular {
  grid-column: 1;
  margin-right: 12px;
}

@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1329px) {
  .pdv-page .pdv-cenario:not(.pdv-cenario-caixa) .pdv-celular {
    grid-column: 3;
    margin-right: 0;
  }
  .pdv-page .pdv-pinpad .pdv-qr,
  .pdv-page .pdv-monitor .pdv-qr {
    width: 76px;
    height: 76px;
  }
  .pdv-page .pdv-cupom .pdv-qr {
    width: 92px;
    height: 92px;
  }
}

/* ---------- Abertura: animação ----------
   Um loop de 31s (21,7s com o --mock-vel de 0,7) que percorre os quatro cenários, na ordem, e começa pelo cenário 1
   completo. Cada cenário tem 7,75s: um corte põe o cenário (a etiqueta, o caixa vazio e o aparelho sem o QR); 0,2s
   depois a venda aparece no caixa, abrindo de cima para baixo em 0,3s (a venda, o valor, o Pix e "Aguardando Pix");
   0,15s depois o QR aparece onde o cenário o mostra, do mesmo jeito (na tela do caixa, na telinha do pinpad, no cupom,
   que sai como da impressora, ou na tela do monitor); 0,15s depois o celular sobe com "Pagamento enviado", por um corte
   que abre de baixo para cima e 8px de deslocamento; 0,25s depois o caixa confirma, o momento forte: o bloco verde ("Pix
   confirmado · hh:mm" e "Venda fechada") passa por cima do âmbar, da esquerda para a direita, em 0,3s, com o check
   crescendo junto, e o âmbar sai; 0,15s depois o toast do saldo sobe como o celular. Tudo fica parado 4,35s (3s com o
   --mock-vel); então o cenário se desmonta ao contrário, um passo de cada vez, em 0,2s cada (o toast desce, o celular
   desce, o QR some, a venda fecha de baixo para cima) e, 0,2s depois, um corte troca o cenário. O loop começa no tempo
   parado do cenário 1 e termina com a montagem dele (de 28,6 a 31s). O que há dentro dos cenários 2 a 4 usa as regras
   do 1 com um atraso negativo (--pdv-atraso, posto no bloco e herdado); o bloco de cada cenário, que aparece e some no
   corte, tem as suas, sem atraso e em degrau. Nada esmaece: o que entra e sai é corte, escala ou deslocamento, e a
   altura de nada muda. Sem animação (sem JS, com prefers-reduced-motion ou pausado), o cenário 1 completo. O conjunto
   inteiro (.pdv-hero-visual) é que é observado por parts/pagina-produto.js e liga o --mock-estado. */
.pdv-page .pdv-hero-visual.is-visible {
  --mock-estado: running;
}
.pdv-page .pdv-cenario:nth-child(2) {
  --pdv-atraso: -23.25s;
}
.pdv-page .pdv-cenario:nth-child(3) {
  --pdv-atraso: -15.5s;
}
.pdv-page .pdv-cenario:nth-child(4) {
  --pdv-atraso: -7.75s;
}

@media (prefers-reduced-motion: no-preference) {
  .pdv-page .pdv-hero-visual.is-observado .pdv-cenario,
  .pdv-page .pdv-hero-visual.is-observado .pdv-caixa-corpo,
  .pdv-page .pdv-hero-visual.is-observado .pdv-caixa-qr .pdv-qr,
  .pdv-page .pdv-hero-visual.is-observado .pdv-tela-conteudo,
  .pdv-page .pdv-hero-visual.is-observado .pdv-cupom,
  .pdv-page .pdv-hero-visual.is-observado .pdv-celular,
  .pdv-page .pdv-hero-visual.is-observado .pdv-espera,
  .pdv-page .pdv-hero-visual.is-observado .pdv-confirmado,
  .pdv-page .pdv-hero-visual.is-observado .pdv-confirmado .mock-marca-ok,
  .pdv-page .pdv-hero-visual.is-observado .pdv-hero-toast {
    animation-duration: calc(31s * var(--mock-vel));
    animation-delay: calc(var(--pdv-atraso, 0s) * var(--mock-vel));
    animation-iteration-count: infinite;
    animation-play-state: var(--mock-estado, paused);
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-caixa-corpo {
    animation-name: pdv-hero-corpo;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-caixa-qr .pdv-qr,
  .pdv-page .pdv-hero-visual.is-observado .pdv-tela-conteudo,
  .pdv-page .pdv-hero-visual.is-observado .pdv-cupom {
    animation-name: pdv-hero-qr;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-celular {
    animation-name: pdv-hero-celular;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-espera {
    animation-name: pdv-hero-espera;
    animation-timing-function: step-end;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-confirmado {
    animation-name: pdv-hero-confirmado;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-confirmado .mock-marca-ok {
    animation-name: pdv-hero-check;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-hero-toast {
    animation-name: pdv-hero-toast;
  }
  /* A troca de cenário: cada bloco com as suas, sem atraso e em degrau (step-end), para o corte cair no mesmo instante
     nos dois blocos. */
  .pdv-page .pdv-hero-visual.is-observado .pdv-cenario {
    animation-delay: 0s;
    animation-timing-function: step-end;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-cenario:nth-child(1) {
    animation-name: pdv-hero-cenario1;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-cenario:nth-child(2) {
    animation-name: pdv-hero-cenario2;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-cenario:nth-child(3) {
    animation-name: pdv-hero-cenario3;
  }
  .pdv-page .pdv-hero-visual.is-observado .pdv-cenario:nth-child(4) {
    animation-name: pdv-hero-cenario4;
  }
}

/* Os cortes, de um cenário para o seguinte (1s = 3,2258%): 5,35s, 13,1s, 20,85s e 28,6s (do 4 para o 1). */
@keyframes pdv-hero-cenario1 {
  0% { visibility: visible; }
  17.2581% { visibility: hidden; }
  92.2581%, 100% { visibility: visible; }
}
@keyframes pdv-hero-cenario2 {
  0% { visibility: hidden; }
  17.2581% { visibility: visible; }
  42.2581%, 100% { visibility: hidden; }
}
@keyframes pdv-hero-cenario3 {
  0% { visibility: hidden; }
  42.2581% { visibility: visible; }
  67.2581%, 100% { visibility: hidden; }
}
@keyframes pdv-hero-cenario4 {
  0% { visibility: hidden; }
  67.2581% { visibility: visible; }
  92.2581%, 100% { visibility: hidden; }
}
/* Dentro de cada cenário (os tempos do cenário 1): a venda abre de 28,8 a 29,1s e fecha de 4,95 a 5,15s; o QR aparece
   de 29,25 a 29,55s e some de 4,75 a 4,95s; o celular sobe de 29,7 a 30s e desce de 4,55 a 4,75s; "Aguardando Pix" fica
   de 28,8 a 30,55s; o verde passa de 30,25 a 30,55s, com o check, e sai com a venda, aos 5,15s; o toast sobe de 30,7 a
   31s e desce de 4,35 a 4,55s. */
@keyframes pdv-hero-corpo {
  0%, 15.9677% { visibility: visible; clip-path: inset(0 0 0 0); animation-timing-function: ease-in; }
  16.6129%, 92.9032% { visibility: hidden; clip-path: inset(0 0 100% 0); animation-timing-function: ease-out; }
  93.871%, 100% { visibility: visible; clip-path: inset(0 0 0 0); }
}
@keyframes pdv-hero-qr {
  0%, 15.3226% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); animation-timing-function: ease-in; }
  15.9677%, 94.3548% { visibility: hidden; clip-path: inset(-56px -56px calc(100% + 56px) -56px); animation-timing-function: ease-out; }
  95.3226%, 100% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); }
}
@keyframes pdv-hero-celular {
  0%, 14.6774% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  15.3226%, 95.8065% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  96.7742%, 100% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
}
@keyframes pdv-hero-espera {
  0% { visibility: hidden; }
  92.9032% { visibility: visible; }
  98.5484%, 100% { visibility: hidden; }
}
@keyframes pdv-hero-confirmado {
  0%, 16.6129% { visibility: visible; clip-path: inset(0 0 0 0); }
  16.613%, 97.5806% { visibility: hidden; clip-path: inset(0 100% 0 0); animation-timing-function: ease-out; }
  98.5484%, 100% { visibility: visible; clip-path: inset(0 0 0 0); }
}
@keyframes pdv-hero-check {
  0%, 16.6129% { transform: scale(1); }
  16.613%, 97.5806% { transform: scale(0); animation-timing-function: ease-out; }
  98.5484%, 100% { transform: scale(1); }
}
@keyframes pdv-hero-toast {
  0%, 14.0323% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  14.6774%, 99.0323% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  100% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
}

/* ---------- O caixa (abertura) e o pagamento (abertura e passo 4) ----------
   A janela do sistema de caixa, no traço dos mockups do componente: a venda, o valor (2rem, peso 700, tabular), o Pix
   selecionado (uma pílula com o rádio marcado, como a opção ativa do checkout) e o estado; a pílula e o estado são
   também o pagamento da tela de venda do passo 4. O estado são dois blocos na mesma célula, com a altura do maior:
   "Aguardando Pix" (o âmbar do selo de espera do componente, com o relógio) e "Pix confirmado · hh:mm" com "Venda
   fechada" embaixo (o verde dos mockups, com o check cheio). Parado, o confirmado; o de espera só aparece na animação.
   Em telas estreitas, "Pix confirmado · hh:mm" não cabe numa linha: ali ele quebra depois do "·" (espaços inseparáveis
   no resto), e a hora fica na linha de baixo, a mesma quebra nos quatro cenários. */
.pdv-page .pdv-caixa {
  max-width: none;
  margin: 0;
}
.pdv-page .pdv-caixa-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "venda" "valor" "forma" "estado";
  column-gap: 16px;
  align-items: start;
}
.pdv-page .pdv-caixa-venda {
  grid-area: venda;
  margin: 0 0 4px;
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}
.pdv-page .pdv-valor {
  grid-area: valor;
  margin: 0 0 12px;
  color: var(--color-3);
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.pdv-page .pdv-forma {
  display: inline-flex;
  grid-area: forma;
  align-items: center;
  justify-self: start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 14px 5px 8px;
  border: 1px solid var(--color-1);
  border-radius: 999px;
  background-color: #F4F8FF;
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.pdv-page .pdv-radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 5px solid var(--color-1);
  border-radius: 50%;
  background-color: #ffffff;
}
.pdv-page .pdv-estado {
  display: grid;
  grid-area: estado;
}
.pdv-page .pdv-espera,
.pdv-page .pdv-confirmado {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}
.pdv-page .pdv-espera {
  visibility: hidden;
  background-color: #FFF4D6;
  color: #8A5A00;
}
.pdv-page .pdv-espera svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}
.pdv-page .pdv-confirmado {
  background-color: #EAF8F0;
  color: #0B6B3E;
}
.pdv-page .pdv-confirmado .mock-marca-ok {
  background-color: #0B6B3E;
  color: #ffffff;
}
.pdv-page .pdv-confirmado-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pdv-page .pdv-confirmado-hora {
  font-variant-numeric: tabular-nums;
}
.pdv-page .pdv-fechada {
  color: var(--color-3);
}

/* Toast: cartão branco com sombra e o check verde dos mockups. Na cena do passo 4, sobre o pé do cartão, saindo dele
   20px para baixo e 12px para a direita; o pé do cartão é reservado para ele (nenhum texto embaixo). */
.pdv-page .pdv-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 14px 36px rgba(2, 30, 70, 0.18), 0 2px 6px rgba(2, 30, 70, 0.06);
  color: var(--color-3);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}
.pdv-page .pdv-toast .mock-marca-ok {
  flex-basis: 24px;
}
.pdv-page .pdv-hero-toast {
  max-width: none;
  margin-top: 20px;
}

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

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

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

/* ---------- Faixas (como funciona, o que acontece e integração) ----------
   As faixas de produto do componente (.produto; as duas primeiras dentro de .produtos, antes da qual
   parts/pagina-produto.js põe o botão "Pausar animações"). O fundo é por classe, e não pela posição (o componente
   pinta as faixas ímpares): "Três jeitos de ter", entre as duas primeiras faixas, e a integração levam o #F6F9FE. */
.pdv-page .produto:nth-of-type(n) {
  background-color: transparent;
}
.pdv-page .produto.pdv-faixa-clara {
  background-color: #F6F9FE;
}
.pdv-page .pdv-faixa .produto-titulo {
  margin-bottom: 24px;
}

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

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

/* ---------- Cenas ----------
   Cada mockup fica numa .pdv-cena, o contêiner aria-hidden, com o palco atrás e, no passo 4, o segundo elemento (o
   toast do saldo) por cima do canto de baixo do cartão. O palco é um painel de raio 32px no degradê #EEF4FE → branco a
   160°, com um brilho radial azul, deslocado 24px para baixo e para a direita; é um elemento, e não um ::before da
   cena, porque as ferramentas de contraste tomam um pseudo-elemento com fundo pelo fundo de todo texto de dentro. A
   cena tem 24px a menos que a coluna e anda 12px para a esquerda, para o conjunto ficar centrado sem passar da coluna.
   A cena é que é observada por parts/pagina-produto.js e liga o --mock-estado. */
.pdv-page .pdv-cena {
  position: relative;
  left: -12px;
  isolation: isolate;
  width: calc(100% - 24px);
  max-width: 440px;
  margin: 0 auto;
}
.pdv-page .pdv-cena .mock-tela {
  max-width: none;
}
/* O mockup tem a sua camada (z-index 0) por cima do palco: as ferramentas de contraste só ordenam o palco (z-index -1)
   abaixo do texto do mockup quando o mockup também é posicionado. */
.pdv-page .pdv-cena > .mock-tela {
  position: relative;
  z-index: 0;
}
.pdv-page .pdv-palco {
  position: absolute;
  z-index: -1;
  top: 24px;
  right: -24px;
  bottom: -24px;
  left: 24px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 100%, rgba(8, 96, 219, 0.12), transparent 70%),
    linear-gradient(160deg, #EEF4FE, #ffffff);
}
/* O toast é absoluto, preso ao pé do cartão. */
.pdv-page .pdv-cena .pdv-toast {
  position: absolute;
  z-index: 2;
}

@media (max-width: 319.98px) {
  .pdv-page .pdv-cena .mock-corpo {
    padding-right: 12px;
    padding-left: 12px;
  }
}

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

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

/* Passo 4 (o instante): a tela de venda do PDV inteira, a do sistema de caixa cuja janela de pagamento o hero mostra. No
   alto, o título do cartão (a mesa e a venda); embaixo, os itens (quantidade, nome e valor, os valores tabulares à
   direita), um filete e o total, o maior número do cartão (2rem); e o pagamento, com a pílula do Pix e o estado do caixa
   do hero. Até 1199px, um embaixo do outro, o pagamento sem moldura, como no hero: na cena estreita, a moldura não
   deixaria o estado caber. A partir de 1200px, onde a cena tem 472px úteis, o pagamento num painel claro à direita, da
   altura dos itens, com a pílula no alto e o estado embaixo, ao lado do total: 238px de painel, para o estado caber
   numa linha, e 16px entre as colunas deixam 218px para os itens. Quando o valor não cabe ao lado do nome ou do
   "Total", ele desce para a linha de baixo, à direita; o título, quando não cabe, quebra só depois do "·" (espaços
   inseparáveis no resto, como no estado). O toast do saldo fica sobre o canto de baixo, à direita, saindo 20px para
   baixo e 12px para a direita, com o alto 8px abaixo do conteúdo: o pé do cartão tem os 24px do toast que ficam dentro
   dele mais 8px. */
.pdv-page .pdv-venda-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titulo" "itens" "pagamento";
  padding-bottom: 32px;
}
.pdv-page .pdv-venda-titulo {
  grid-area: titulo;
  margin: 0 0 8px;
  line-height: 1.4;
}
.pdv-page .pdv-itens {
  grid-area: itens;
}
.pdv-page .pdv-itens-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdv-page .pdv-item,
.pdv-page .pdv-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  margin: 0;
  color: var(--color-3);
}
.pdv-page .pdv-item {
  padding: 6px 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.pdv-page .pdv-item-qtd {
  color: #5B6B82;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pdv-page .pdv-item-valor,
.pdv-page .pdv-total-valor {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdv-page .pdv-item-valor {
  font-weight: 600;
}
.pdv-page .pdv-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #E3EAF5;
}
.pdv-page .pdv-total-rotulo {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}
.pdv-page .pdv-total-valor {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
}
.pdv-page .pdv-pagamento {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-area: pagamento;
  margin-top: 20px;
}
.pdv-page .pdv-pagamento .pdv-forma {
  margin-bottom: 12px;
}
.pdv-page .pdv-pagamento .pdv-estado {
  align-self: stretch;
}
.pdv-page .pdv-toast-cena {
  right: -12px;
  bottom: -20px;
}

@media (min-width: 1200px) {
  .pdv-page .pdv-venda-corpo {
    grid-template-columns: minmax(0, 1fr) 238px;
    grid-template-areas: "titulo titulo" "itens pagamento";
    column-gap: 16px;
  }
  .pdv-page .pdv-pagamento {
    margin: 0;
    padding: 8px;
    border-radius: 14px;
    background-color: #F6F9FE;
  }
  .pdv-page .pdv-pagamento .pdv-estado {
    margin-top: auto;
  }
  .pdv-page .pdv-pagamento .pdv-espera,
  .pdv-page .pdv-pagamento .pdv-confirmado {
    padding: 10px;
  }
}
.pdv-page .pdv-cena.is-visible,
.pdv-page .pdv-cena-fluxo.is-visible {
  --mock-estado: running;
}

/* Loop de 6,75s (4,7s com o --mock-vel de 0,7), que começa pela cena completa: tudo parado 4,35s (3s com o --mock-vel);
   o toast desce e some em 0,2s; o pagamento fecha de baixo para cima em 0,2s e, 0,2s depois, abre de novo, de cima para
   baixo, em 0,3s, com "Aguardando Pix"; 0,75s depois o caixa confirma: o verde passa por cima do âmbar, da esquerda
   para a direita, em 0,3s, com o check crescendo junto; 0,15s depois o toast sobe, por um corte que abre de baixo para
   cima e 8px de deslocamento (os movimentos do hero). O título, os itens e o total não se mexem, nem o cartão. Parada, a
   cena completa. Os tempos: o toast desce de 4,35 a 4,55s e sobe de 6,45 a 6,75s; o pagamento fecha de 4,55 a 4,75s e
   abre de 4,95 a 5,25s; "Aguardando Pix" de 4,95 a 6,3s; o verde passa de 6 a 6,3s (1s = 14,8148%). */
@media (prefers-reduced-motion: no-preference) {
  .pdv-page .pdv-cena-passo4.is-observado .pdv-pagamento,
  .pdv-page .pdv-cena-passo4.is-observado .pdv-espera,
  .pdv-page .pdv-cena-passo4.is-observado .pdv-confirmado,
  .pdv-page .pdv-cena-passo4.is-observado .pdv-confirmado .mock-marca-ok,
  .pdv-page .pdv-cena-passo4.is-observado .pdv-toast-cena {
    animation-duration: calc(6.75s * var(--mock-vel));
    animation-iteration-count: infinite;
    animation-play-state: var(--mock-estado, paused);
  }
  .pdv-page .pdv-cena-passo4.is-observado .pdv-pagamento {
    animation-name: pdv-passo4-pagamento;
  }
  .pdv-page .pdv-cena-passo4.is-observado .pdv-espera {
    animation-name: pdv-passo4-espera;
    animation-timing-function: step-end;
  }
  .pdv-page .pdv-cena-passo4.is-observado .pdv-confirmado {
    animation-name: pdv-passo4-confirmado;
  }
  .pdv-page .pdv-cena-passo4.is-observado .pdv-confirmado .mock-marca-ok {
    animation-name: pdv-passo4-check;
  }
  .pdv-page .pdv-cena-passo4.is-observado .pdv-toast-cena {
    animation-name: pdv-passo4-toast;
  }
}

@keyframes pdv-passo4-pagamento {
  0%, 67.4074% { visibility: visible; clip-path: inset(0 0 0 0); animation-timing-function: ease-in; }
  70.3704%, 73.3333% { visibility: hidden; clip-path: inset(0 0 100% 0); animation-timing-function: ease-out; }
  77.7778%, 100% { visibility: visible; clip-path: inset(0 0 0 0); }
}
@keyframes pdv-passo4-espera {
  0% { visibility: hidden; }
  73.3333% { visibility: visible; }
  93.3333%, 100% { visibility: hidden; }
}
@keyframes pdv-passo4-confirmado {
  0%, 70.3704% { visibility: visible; clip-path: inset(0 0 0 0); }
  70.3705%, 88.8889% { visibility: hidden; clip-path: inset(0 100% 0 0); animation-timing-function: ease-out; }
  93.3333%, 100% { visibility: visible; clip-path: inset(0 0 0 0); }
}
@keyframes pdv-passo4-check {
  0%, 70.3704% { transform: scale(1); }
  70.3705%, 88.8889% { transform: scale(0); animation-timing-function: ease-out; }
  93.3333%, 100% { transform: scale(1); }
}
@keyframes pdv-passo4-toast {
  0%, 64.4444% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); animation-timing-function: ease-in; }
  67.4074%, 95.5556% { visibility: hidden; clip-path: inset(calc(100% + 56px) -56px -56px -56px); transform: translateY(8px); animation-timing-function: ease-out; }
  100% { visibility: visible; clip-path: inset(-56px -56px -56px -56px); transform: translateY(0); }
}

/* ---------- Três jeitos de ter (#como-ter) ----------
   Fundo #F6F9FE, entre duas faixas brancas. Três cartões com a mesma estrutura (o logo ou o ícone, o título, o texto e
   a ação, no pé): o do SiTef em destaque, com a borda azul e o logo da Fiserv (o arquivo da /pix-qrcode/, com 28px de
   altura, como lá), e o fluxo dele, com o botão verde do comercial; o da API e o do Pix PDV com um botão de contorno
   cada (a integração e a conta), para as três ações terem pesos coerentes. A partir de 768px, o do SiTef na largura
   toda, com o fluxo à direita, e os outros dois lado a lado embaixo. */
.pdv-page .pdv-jeitos-secao {
  padding-bottom: 96px;
  background-color: #F6F9FE;
}
.pdv-page .pdv-jeitos-secao .title-section {
  margin-bottom: 40px;
}
.pdv-page .pdv-jeitos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
}
.pdv-page .pdv-jeito {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 24px;
  box-shadow: none;
}
.pdv-page .pdv-jeito-sitef {
  border-color: var(--color-1);
}
.pdv-page .pdv-jeito-logo {
  display: block;
  width: auto;
  height: 28px;
  margin: 6px 0;
}
.pdv-page .pdv-jeito-titulo {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.pdv-page .pdv-jeito-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}
.pdv-page .pdv-jeito-acao {
  margin-top: auto;
  padding-top: 8px;
}
.pdv-page .pdv-jeito .botoes {
  align-self: stretch;
}

/* O fluxo do SiTef, como um percurso, sobre o palco das cenas (aqui sem o deslocamento: ele fica dentro do cartão): uma
   linha vertical contínua (2px, no #C9D6EA dos traços) do meio do primeiro nó ao meio do último; os quatro nós sobre
   ela, círculos brancos com a borda de 2px na cor da linha e o ícone em azul, e o último preenchido no verde dos
   mockups, com o check branco; os rótulos em negrito ao lado, sem fundo e sem sombra. O ponto azul (o Pix) corre pela
   linha, por baixo dos círculos, e só aparece nos trechos entre eles: parado, ele fica atrás do terceiro nó (chegou à
   PagHiper). A partir de 360px, círculos de 40px, 32px entre eles e o rótulo de 15px; abaixo de 360px, onde a cena tem
   de 172 a 261px, círculos de 36px, 28px entre eles, o rótulo de 14px, 10px entre o círculo e o rótulo e 12px de respiro
   dos lados, para o nó com o rótulo mais longo ("Confirmação") caber na cena. */
.pdv-page .pdv-cena-fluxo {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  margin: 8px 0 4px;
  padding: 28px 24px;
}
.pdv-page .pdv-cena-fluxo .pdv-palco {
  inset: 0;
  border-radius: 20px;
}
.pdv-page .pdv-fluxo {
  --pdv-circulo: 40px;
  --pdv-passo: 72px;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.pdv-page .pdv-fluxo::before {
  content: "";
  position: absolute;
  top: calc(var(--pdv-circulo) / 2);
  bottom: calc(var(--pdv-circulo) / 2);
  left: calc(var(--pdv-circulo) / 2 - 1px);
  border-left: 2px solid #C9D6EA;
}
.pdv-page .pdv-fluxo-ponto {
  position: absolute;
  z-index: 1;
  top: calc(var(--pdv-circulo) / 2 + var(--pdv-passo) * 2 - 5px);
  left: calc(var(--pdv-circulo) / 2 - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-1);
}
.pdv-page .pdv-fluxo-nos {
  display: grid;
  gap: calc(var(--pdv-passo) - var(--pdv-circulo));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdv-page .pdv-fluxo-no {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-3);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.pdv-page .pdv-fluxo-icone {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 0 var(--pdv-circulo);
  align-items: center;
  justify-content: center;
  width: var(--pdv-circulo);
  height: var(--pdv-circulo);
  border: 2px solid #C9D6EA;
  border-radius: 50%;
  background-color: #ffffff;
  color: var(--color-1);
}
.pdv-page .pdv-fluxo-icone svg {
  width: calc(var(--pdv-circulo) / 2);
  height: calc(var(--pdv-circulo) / 2);
}
/* A confirmação: o disco verde, com o check branco, cobre o círculo inteiro, a borda também. */
.pdv-page .pdv-fluxo-fim .mock-marca-ok {
  position: absolute;
  inset: -2px;
  width: auto;
  height: auto;
  background-color: #0B6B3E;
  color: #ffffff;
}

@media (max-width: 359.98px) {
  .pdv-page .pdv-cena-fluxo {
    padding: 20px 12px;
  }
  .pdv-page .pdv-fluxo {
    --pdv-circulo: 36px;
    --pdv-passo: 64px;
  }
  .pdv-page .pdv-fluxo-no {
    gap: 10px;
    font-size: 0.875rem;
  }
}

/* Loop de 6,85s (4,8s com o --mock-vel de 0,7), que começa pelo fluxo completo: tudo parado 4,35s (3s com o
   --mock-vel); um corte leva o ponto de volta ao alto (de trás do terceiro nó para trás do primeiro: o corte não se vê)
   e, junto, a confirmação se esvazia, o verde encolhendo para o meio em 0,15s; 0,15s depois o ponto desce pela linha, do
   primeiro ao terceiro nó, por trás do segundo, em 1,8s (lento na saída e na chegada, onde a linha aparece); 0,1s depois
   a confirmação se preenche de verde, o disco com o check crescendo do meio, em 0,3s. Os nós e os rótulos não se mexem.
   Parado, o fluxo completo. Os tempos (1s = 14,5985%): o corte aos 4,35s; o verde encolhe de 4,35 a 4,5s e cresce de
   6,55 a 6,85s; o ponto desce de 4,65 a 6,45s. */
@media (prefers-reduced-motion: no-preference) {
  .pdv-page .pdv-cena-fluxo.is-observado .pdv-fluxo-ponto,
  .pdv-page .pdv-cena-fluxo.is-observado .pdv-fluxo-fim .mock-marca-ok {
    animation-duration: calc(6.85s * var(--mock-vel));
    animation-iteration-count: infinite;
    animation-play-state: var(--mock-estado, paused);
  }
  .pdv-page .pdv-cena-fluxo.is-observado .pdv-fluxo-ponto {
    animation-name: pdv-fluxo-ponto;
  }
  .pdv-page .pdv-cena-fluxo.is-observado .pdv-fluxo-fim .mock-marca-ok {
    animation-name: pdv-fluxo-confirmacao;
  }
}

@keyframes pdv-fluxo-ponto {
  0%, 63.5036% { transform: translateY(0); }
  63.5037%, 67.8832% { transform: translateY(calc(var(--pdv-passo) * -2)); animation-timing-function: ease-in-out; }
  94.1606%, 100% { transform: translateY(0); }
}
@keyframes pdv-fluxo-confirmacao {
  0%, 63.5036% { transform: scale(1); animation-timing-function: ease-in; }
  65.6934%, 95.6204% { transform: scale(0); animation-timing-function: ease-out; }
  100% { transform: scale(1); }
}

@media (min-width: 768px) {
  .pdv-page .pdv-jeitos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pdv-page .pdv-jeito-sitef {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "logo fluxo" "titulo fluxo" "texto fluxo" "acao fluxo";
    column-gap: 40px;
    row-gap: 12px;
    align-items: start;
    padding: 32px;
  }
  .pdv-page .pdv-jeito-sitef .pdv-jeito-logo {
    grid-area: logo;
  }
  .pdv-page .pdv-jeito-sitef .pdv-jeito-titulo {
    grid-area: titulo;
  }
  .pdv-page .pdv-jeito-sitef .pdv-jeito-texto {
    grid-area: texto;
  }
  .pdv-page .pdv-jeito-sitef .pdv-jeito-acao {
    grid-area: acao;
    align-self: end;
  }
  .pdv-page .pdv-jeito-sitef .pdv-cena-fluxo {
    grid-area: fluxo;
    align-self: center;
    margin: 0;
  }
  .pdv-page .pdv-jeito .botoes {
    align-self: start;
  }
}

@media (min-width: 992px) {
  .pdv-page .pdv-jeitos-secao {
    padding-bottom: 144px;
  }
  .pdv-page .pdv-jeitos-secao .title-section {
    margin-bottom: 48px;
  }
}

/* ---------- O que acontece se… (#o-que-acontece) e a lista da integração ----------
   A lista: sem cena, ocupa a largura da faixa, num bloco de até 1040px, centralizado; uma coluna no celular e duas a
   partir de 768px. Sem marcador: o começo em negrito e um filete entre um item e o de baixo; em duas colunas os itens
   vão da esquerda para a direita, na ordem do HTML, e os filetes de uma mesma linha ficam alinhados. */
.pdv-page .pdv-regras-bloco {
  max-width: 1040px;
  margin: 0 auto;
}
.pdv-page .pdv-regras {
  display: grid;
  margin: 0;
}
.pdv-page .pdv-regras li {
  padding: 14px 0;
  border-top: 1px solid #E3EAF5;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.pdv-page .pdv-regras li:first-child {
  padding-top: 0;
  border-top: 0;
}
.pdv-page .pdv-regras li:last-child {
  padding-bottom: 0;
}
.pdv-page .pdv-regras strong {
  font-weight: 700;
}

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

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

/* ---------- Tarifas (#tarifas) ----------
   A seção de tarifas: largura total no azul-claro #EEF4FE, título e subtítulo centralizados, o preço num cartão branco
   com o filete azul no alto, o exemplo de uma venda num mockup, o que não é cobrado em pílulas e o fecho.
   O exemplo é um comprovante e fica parado. Até 991px, o preço e o comprovante um embaixo do outro; a partir de 992px,
   lado a lado (.pdv-tarifas-corpo): o preço à esquerda, mais estreito, e o comprovante à direita, alinhados pelo alto,
   com as pílulas e o fecho centralizados embaixo dos dois. */
.pdv-page .pdv-tarifas {
  padding-bottom: 96px;
  background-color: #EEF4FE;
}
.pdv-page .pdv-tarifas .description-section {
  margin-bottom: 40px;
}
.pdv-page .pdv-tarifas-corpo {
  margin-bottom: 48px;
}
/* O filete no alto é um ::before no fluxo, recortado pelos cantos do cartão: absoluto, as ferramentas de contraste o
   tomariam pelo fundo do texto do cartão. */
.pdv-page .pdv-preco {
  overflow: hidden;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 24px 28px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 12px 40px rgba(2, 30, 70, 0.08);
  text-align: center;
}
.pdv-page .pdv-preco::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 -24px 28px;
  background-color: var(--color-1);
}
.pdv-page .pdv-preco-valor {
  margin: 0;
  color: var(--color-3);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.pdv-page .pdv-preco-unidade {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Exemplo de uma venda: um comprovante num mockup como os das cenas (moldura de components/pagina-produto.css), mas sem
   aria-hidden, com hierarquia: no alto, a venda (o rótulo cinza e o valor, o maior número do comprovante); no meio,
   numa faixa suave na largura do cartão, entre dois filetes, a tarifa, menor; e embaixo, como linha de total, o que
   entra no saldo, com o rótulo em negrito. O olho percorre venda, tarifa e saldo: 2rem (2,25rem a partir de 992px),
   1,0625rem e 1,5rem, todos menores que o preço do cartão ao lado (2,5rem, e 3,25rem e 3,5rem a partir de 992 e de
   1200px). Os números são tabulares e ficam à direita, na linha do rótulo; quando não cabem ali, descem para a linha de
   baixo, ainda à direita (flex-wrap). A legenda fica embaixo do comprovante. */
.pdv-page .pdv-exemplo {
  max-width: 560px;
  margin: 48px auto 0;
}
.pdv-page .pdv-exemplo-tela {
  max-width: none;
}
.pdv-page .pdv-exemplo-tela .mock-corpo {
  --pdv-exemplo-respiro: 20px;
  padding: 24px var(--pdv-exemplo-respiro) 0;
}
.pdv-page .pdv-exemplo-titulo {
  margin: 0 0 20px;
  line-height: 1.4;
}
.pdv-page .pdv-comprovante-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
}
.pdv-page .pdv-comprovante-rotulo {
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.pdv-page .pdv-comprovante-valor {
  margin-left: auto;
  color: var(--color-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.pdv-page .pdv-comprovante-venda {
  padding-bottom: 20px;
}
.pdv-page .pdv-comprovante-venda .pdv-comprovante-valor {
  font-size: 2rem;
}
.pdv-page .pdv-comprovante-tarifa {
  margin: 0 calc(var(--pdv-exemplo-respiro) * -1);
  padding: 14px var(--pdv-exemplo-respiro);
  border-top: 1px solid #E3EAF5;
  border-bottom: 1px solid #E3EAF5;
  background-color: #F6F9FE;
}
.pdv-page .pdv-comprovante-tarifa .pdv-comprovante-valor {
  font-size: 1.0625rem;
}
.pdv-page .pdv-comprovante-saldo {
  padding: 18px 0 24px;
}
.pdv-page .pdv-comprovante-saldo .pdv-comprovante-rotulo {
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 700;
}
.pdv-page .pdv-comprovante-saldo .pdv-comprovante-valor {
  font-size: 1.5rem;
}
.pdv-page .pdv-exemplo-nota {
  margin: 12px 0 0;
  color: #5B6B82;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 576px) {
  .pdv-page .pdv-exemplo-tela .mock-corpo {
    --pdv-exemplo-respiro: 28px;
    padding-top: 28px;
  }
  .pdv-page .pdv-comprovante-saldo {
    padding-bottom: 28px;
  }
}
/* O que não é cobrado: pílulas brancas com o check verde, centralizadas, que quebram naturalmente (sem media query). */
.pdv-page .pdv-tarifas-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 880px;
  margin: 0 auto 40px;
}
.pdv-page .pdv-tarifas-lista li {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.pdv-page .pdv-tarifas-lista svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 0.5px;
  padding: 3px;
  border-radius: 50%;
  background-color: rgba(36, 209, 122, 0.16);
  color: #0B6B3E;
  stroke-width: 3;
}
.pdv-page .pdv-tarifas-fecho {
  margin: 0;
  color: var(--color-3);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 992px) {
  .pdv-page .pdv-tarifas {
    padding-bottom: 144px;
  }
  .pdv-page .pdv-tarifas .description-section {
    margin-bottom: 48px;
  }
  /* Lado a lado: o preço com até 380px e o comprovante com até 560px, centralizados, 40px entre eles. */
  .pdv-page .pdv-tarifas-corpo {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 560px);
    justify-content: center;
    align-items: start;
    gap: 40px;
  }
  .pdv-page .pdv-tarifas-corpo .pdv-preco,
  .pdv-page .pdv-tarifas-corpo .pdv-exemplo {
    max-width: none;
    margin: 0;
  }
  .pdv-page .pdv-comprovante-venda .pdv-comprovante-valor {
    font-size: 2.25rem;
  }
  .pdv-page .pdv-preco {
    padding: 0 36px 36px;
  }
  .pdv-page .pdv-preco::before {
    margin: 0 -36px 36px;
  }
  .pdv-page .pdv-preco-valor {
    font-size: 3.25rem;
  }
  .pdv-page .pdv-tarifas-fecho {
    font-size: 1.5rem;
  }
}

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

/* ---------- Para quem é ----------
   Seis cartões com o ícone num círculo de 40px (o desenho com 20px), o título e a frase. Não são botões: no hover de
   verdade (@media (hover: hover)) o cartão sobe 2px, com sombra e borda azul, e não há foco nem cursor de link.
   Transições de 150ms, desligadas com prefers-reduced-motion. A seção seguinte é a faixa clara da integração: embaixo
   dos cartões fica o mesmo respiro do alto das seções (96px, 144px a partir de 992px). */
.pdv-page .pdv-para-quem {
  padding-bottom: 96px;
}
.pdv-page .pdv-perfis {
  row-gap: 16px;
  margin: 0;
}
.pdv-page .pdv-perfil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 24px;
  box-shadow: none;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}
.pdv-page .pdv-perfil-titulo {
  margin: 4px 0 0;
  color: var(--color-3);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.pdv-page .pdv-perfil-texto {
  margin: 0;
  color: #5B6B82;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}
@media (hover: hover) {
  .pdv-page .pdv-perfil:hover {
    border-color: var(--color-1);
    box-shadow: 0 8px 24px rgba(2, 30, 70, 0.10);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdv-page .pdv-perfil {
    transition: none;
  }
}

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

/* ---------- Integração (#integracao) ----------
   A faixa clara: o título e o parágrafo ao lado da cena e, embaixo dos dois, os seis itens na lista em duas colunas das
   regras e os dois botões. */
.pdv-page .pdv-integracao-texto {
  margin: 0;
  color: var(--color-3);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.pdv-page .pdv-integracao-bloco {
  margin-top: 56px;
}
.pdv-page .pdv-integracao-bloco .botoes {
  margin-top: 32px;
}

@media (min-width: 992px) {
  .pdv-page .pdv-integracao-bloco {
    margin-top: 80px;
  }
  .pdv-page .pdv-integracao-bloco .botoes {
    margin-top: 40px;
  }
}

/* A cena: o que o seu sistema troca com a PagHiper, num diagrama de sequência no traço dos mockups, sem código. No alto,
   as duas raias, com o cabeçalho numa pílula navy, "Seu sistema" (100px) à esquerda e "PagHiper" (80px) à direita, e a
   linha de vida de cada uma, tracejada, descendo do meio da pílula; entre elas, as trocas, de cima para baixo: o rótulo
   em negrito, centrado entre as linhas de vida (em duas linhas quando não cabe), a seta azul de uma linha de vida à
   outra, no sentido da troca, e embaixo, na ponta de chegada, o chip do detalhe (uma pílula azul-clara), encostado na
   borda daquele lado, por cima da linha de vida de chegada e longe da outra. A terceira troca é o marcador, discreto e
   sem seta, centrado entre as raias: "O cliente paga", numa pílula cinza. O chip mais largo, "+ identificador da
   cobrança", para 4px antes da linha de vida da PagHiper, a 40px da borda: as raias cabem a partir de 240px úteis
   (352px de tela) e começam em 360px. Abaixo disso, a lista da alternativa: os dois cabeçalhos no alto e, em cada
   troca, a seta de direção à esquerda (→ sai do seu sistema, ← chega a ele), o rótulo ao lado e o chip embaixo; abaixo
   de 320px, o chip com 11px, para caber na cena. */
.pdv-page .pdv-seq-titulo {
  margin: 0 0 16px;
  line-height: 1.4;
}
.pdv-page .pdv-seq {
  --pdv-raia-a: 100px;
  --pdv-raia-b: 80px;
  position: relative;
}
/* As linhas de vida: do meio da pílula ao pé do diagrama, atrás das pílulas e dos chips. */
.pdv-page .pdv-seq::before,
.pdv-page .pdv-seq::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 0;
  border-left: 1px dashed #B7C6DD;
}
.pdv-page .pdv-seq::before {
  left: calc(var(--pdv-raia-a) / 2 - 0.5px);
}
.pdv-page .pdv-seq::after {
  right: calc(var(--pdv-raia-b) / 2 - 0.5px);
}
.pdv-page .pdv-raias {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin: 0 0 18px;
}
.pdv-page .pdv-raia {
  width: var(--pdv-raia-a);
  padding: 4px 0;
  border-radius: 999px;
  background-color: var(--color-3);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
.pdv-page .pdv-raia + .pdv-raia {
  width: var(--pdv-raia-b);
}
.pdv-page .pdv-seq-lista {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}
.pdv-page .pdv-seq-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 6px;
}
.pdv-page .pdv-seq-rotulo {
  margin: 0 calc(var(--pdv-raia-b) / 2 + 8px) 0 calc(var(--pdv-raia-a) / 2 + 8px);
  color: var(--color-3);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
/* A seta: o traço (::before), de uma linha de vida à outra, e a ponta (::after), no lado de chegada, separados para a
   animação desenhar o traço sem deformar a ponta. */
.pdv-page .pdv-seq-seta {
  position: relative;
  height: 10px;
  margin: 0 calc(var(--pdv-raia-b) / 2) 0 calc(var(--pdv-raia-a) / 2);
}
.pdv-page .pdv-seq-seta::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  border-top: 2px solid var(--color-1);
}
.pdv-page .pdv-seq-seta::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-1);
  border-bottom: 2px solid var(--color-1);
}
.pdv-page .pdv-seq-ida .pdv-seq-seta::after {
  right: 2px;
  transform: rotate(-45deg);
}
.pdv-page .pdv-seq-volta .pdv-seq-seta::after {
  left: 2px;
  transform: rotate(135deg);
}
.pdv-page .pdv-seq-chip {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #EEF4FE;
  color: var(--color-3);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}
.pdv-page .pdv-seq-ida .pdv-seq-chip {
  justify-self: end;
}
.pdv-page .pdv-seq-marco .pdv-seq-rotulo {
  justify-self: center;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #F1F5FB;
  color: #5B6B82;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 359.98px) {
  .pdv-page .pdv-seq::before,
  .pdv-page .pdv-seq::after {
    content: none;
  }
  .pdv-page .pdv-raias {
    margin-bottom: 14px;
  }
  .pdv-page .pdv-seq-lista {
    gap: 12px;
  }
  .pdv-page .pdv-seq-item {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 8px;
  }
  .pdv-page .pdv-seq-rotulo,
  .pdv-page .pdv-seq-marco .pdv-seq-rotulo {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    text-align: left;
  }
  .pdv-page .pdv-seq-seta {
    grid-column: 1;
    grid-row: 1;
    margin: 5px 0 0;
  }
  .pdv-page .pdv-seq-chip,
  .pdv-page .pdv-seq-ida .pdv-seq-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 319.98px) {
  .pdv-page .pdv-seq-chip {
    font-size: 0.6875rem;
  }
}

/* Loop de 5,6s (3,92s com o --mock-vel de 0,7), que começa pela cena completa: tudo parado 4,35s (3s com o
   --mock-vel); na troca 4, o chip some por corte e a ponta da seta encolhe em 0,1s; o traço se recolhe para a PagHiper
   em 0,3s; 0,3s depois ele se desenha de novo, da PagHiper para o seu sistema, em 0,4s; a ponta cresce em 0,05s e, 0,1s
   depois, o chip aparece por corte, na chegada. As trocas 1 a 3, as raias e o cartão não se mexem. Parada, a cena
   completa. Os tempos (1s = 17,857%): o chip some aos 4,35s e volta aos 5,6s (o fim do loop); a ponta encolhe de 4,35 a
   4,45s e cresce de 5,45 a 5,5s; o traço se recolhe de 4,45 a 4,75s e se desenha de 5,05 a 5,45s. */
@media (prefers-reduced-motion: no-preference) {
  .pdv-page .pdv-cena-integracao.is-observado .pdv-seq-aviso .pdv-seq-seta::before,
  .pdv-page .pdv-cena-integracao.is-observado .pdv-seq-aviso .pdv-seq-seta::after,
  .pdv-page .pdv-cena-integracao.is-observado .pdv-seq-aviso .pdv-seq-chip {
    animation-duration: calc(5.6s * var(--mock-vel));
    animation-iteration-count: infinite;
    animation-play-state: var(--mock-estado, paused);
  }
  .pdv-page .pdv-cena-integracao.is-observado .pdv-seq-aviso .pdv-seq-seta::before {
    transform-origin: right;
    animation-name: pdv-seq-traco;
  }
  .pdv-page .pdv-cena-integracao.is-observado .pdv-seq-aviso .pdv-seq-seta::after {
    animation-name: pdv-seq-ponta;
  }
  .pdv-page .pdv-cena-integracao.is-observado .pdv-seq-aviso .pdv-seq-chip {
    animation-name: pdv-seq-chip;
    animation-timing-function: step-end;
  }
}

@keyframes pdv-seq-traco {
  0%, 79.4643% { transform: scaleX(1); animation-timing-function: ease-in; }
  84.8214%, 90.1786% { transform: scaleX(0); animation-timing-function: ease-out; }
  97.3214%, 100% { transform: scaleX(1); }
}
@keyframes pdv-seq-ponta {
  0%, 77.6786% { transform: rotate(135deg) scale(1); animation-timing-function: ease-in; }
  79.4643%, 97.3214% { transform: rotate(135deg) scale(0); animation-timing-function: ease-out; }
  98.2143%, 100% { transform: rotate(135deg) scale(1); }
}
@keyframes pdv-seq-chip {
  0% { visibility: visible; }
  77.6786% { visibility: hidden; }
  100% { visibility: visible; }
}

/* ---------- Habilitação (#habilitacao): painel claro ----------
   O painel claro do componente (fundo #EEF4FE, raio 24px e respiros), com o título, o parágrafo centralizado e os dois
   botões. */
.pdv-page .pdv-painel {
  padding: 56px 24px;
  border-radius: 24px;
  background-color: #EEF4FE;
  text-align: center;
}
.pdv-page .pdv-painel .title-section {
  margin: 0 0 24px;
}
.pdv-page .pdv-habilitacao-texto {
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-3);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}
.pdv-page .pdv-painel .botoes {
  justify-content: center;
  margin-top: 32px;
}

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

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

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

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

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

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

/* Até 575px os dois painéis ficam com menos respiro e o título deles um pouco menor que os 2rem que o main.css força
   (com !important) em todo .title-section até 1024px, e o selo com menos respiro. */
@media (max-width: 575.98px) {
  .pdv-page .pdv-painel,
  .pdv-page .pdv-painel-escuro {
    padding: 40px 20px;
  }
  .pdv-page .pdv-painel .title-section,
  .pdv-page .pdv-painel-escuro .title-section {
    font-size: 1.625rem !important;
    line-height: 1.25 !important;
  }
  .pdv-page .pdv-selo {
    padding: 24px;
  }
}

/* Abaixo de 320px os números ficam com 2,25rem, para o "+R$ 20 bi" caber no painel. */
@media (max-width: 319.98px) {
  .pdv-page .pdv-numeros strong {
    font-size: 2.25rem;
  }
}

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

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