/* ============================================================
   PÁGINA /pdv-maquininha
   Só o que é exclusivo desta landing. Todo o resto vem dos
   arquivos compartilhados via styles.css.

   Escopo deliberado: nada aqui pode vazar para o index.html.
   Por isso todo seletor é prefixado por .hero--maquininha ou
   .verificador — nenhuma classe compartilhada é redefinida.
============================================================ */

/* ── Hero ─────────────────────────────────────────────────
   O hero do index tem `height: 80vh` FIXO e não tem CTA. Aqui
   entra um CTA dentro da primeira tela, e altura fixa em vh
   causa dois defeitos opostos: corta o botão em tela baixa e
   abre uma faixa morta de centenas de pixels em tela alta —
   empurrando o verificador para longe da dobra, que é
   justamente o que esta página não pode fazer.

   Altura passa a ser ditada pelo conteúdo. Medições atuais por tela
   estão no §10 do docs/plano-pagina-pdv-maquininha.md — não repetir
   número aqui, que envelhece a cada ajuste de layout.
*/
.hero--maquininha.hero--mobile {
  height: auto;
}

/* Duas linhas; a primeira em duas colunas:
     linha 1 → [ maquininha ] [ logo + título ]
     linha 2 → subtítulo + lista de recursos + CTA, largura cheia

   Pôr o aparelho AO LADO do título em vez de acima é o que devolve
   altura à dobra: empilhado, ele custava ~306px só de altura própria.
   O index sobrepõe o device ao texto e corta o aparelho pela direita;
   aqui ele aparece inteiro, dividindo a linha. */
.hero--maquininha.hero--mobile .hero__inner {
  padding: 1.25rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

.hero--maquininha.hero--mobile .hero__top {
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 0rem;
  /* stretch, não center: a coluna 2 precisa ter a altura da linha inteira
     para que "topo" signifique o topo da linha, e não o topo de um bloco
     já centralizado verticalmente. O `margin: auto` do .hero__device
     mantém a maquininha centrada na coluna 1 mesmo assim. */
  align-items: stretch;
}

/* Desfaz o posicionamento absoluto do hero.css. A largura agora vem da
   coluna do grid, não do elemento — foi o erro da versão anterior, em
   que um `width: %` na própria img virava percentual de si mesma e
   colapsava o aparelho para uma miniatura. */
.hero--maquininha.hero--mobile .hero__device {
  position: static;
  transform: none;
  top: auto;
  right: auto;
  z-index: auto;
  width: 80%;
  margin: auto;
}

.hero--maquininha.hero--mobile .hero__device img {
  width: 100%;
  height: auto;
}

.hero--maquininha.hero--mobile .hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* Logo no canto superior direito da coluna 2. */
.hero--maquininha.hero--mobile .hero__intro .hero__logo {
  align-self: flex-end;
}

/* Com o logo preso no topo, as margens automáticas centram o título no
   espaço que sobra — sem elas ele ficaria colado no logo, com uma faixa
   morta embaixo, ao lado da metade inferior da maquininha. */
.hero--maquininha.hero--mobile .hero__intro .hero__headline {
  margin-top: auto;
  margin-bottom: auto;
}

/* Título de uma frase só, alinhado à esquerda na coluna 2. */
.hero--maquininha.hero--mobile .hero__headline {
  display: block;
  font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-on-dark);
  text-align: left;
  max-width: none;
  margin-bottom: 0;
}

.hero--maquininha.hero--mobile .hero__content {
  max-width: 100%;
  align-items: flex-start;
  text-align: left;
  /* 0,5rem e não 0,75: com o subtítulo fora, sobraram dois vãos aqui
     (faixa→lista→CTA) e os 8px economizados são exatamente o que faltava
     para o CTA caber na primeira tela de um 360×640. A faixa tem
     margin-bottom próprio, então o respiro acima da lista não se perde. */
  gap: 0.5rem;
}

/* ── Selo de conformidade fiscal ──────────────────────────
   Reaproveita a pílula .feature-card__badge do features.css, que já é
   usada com estrela nos cards de funcionalidade.

   Só o fundo é ajustado: o --accent-soft é ouro a 12 por cento,
   calibrado para card branco. Sobre o #1e1e1e do hero ele quase some,
   então aqui sobe para 18 por cento com uma borda que dá contorno. O
   componente compartilhado não é tocado — o index.html também o usa.

   Base da afirmação: confirmado em 23/08 que o produto já emite
   NFC-e/NFe adequado à reforma. Ver docs/plano-pagina-pdv-maquininha.md
   §4 — não remexer no texto do selo sem esse respaldo. */
.hero__selo {
  margin: 0;
}

.hero__selo .feature-card__badge {
  background: rgba(212, 168, 83, 0.18);
  border: 1px solid rgba(212, 168, 83, 0.35);
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
}

/* ── Faixa de adquirentes compatíveis ─────────────────────
   Substitui a lista de nomes em texto. Logo é reconhecido mais rápido
   que nome lido, e cabem as 10 marcas em vez de 5 + "e mais".

   CSS puro, sem JS: são duas cópias da mesma lista deslizando -50%,
   o que faz o laço fechar sem salto. Como a animação é `transform`,
   não há reflow nem layout shift.
*/
.hero__marquee {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  /* Sem isto o `width: max-content` do inner vaza para o cálculo de
     tamanho do contêiner: uma track `1fr` de grid tem mínimo automático
     de min-content, então a faixa empurrava a coluna do hero desktop e
     estourava o layout inteiro. */
  min-width: 0;
  overflow: hidden;
  /* Esmaece as pontas para os logos não serem cortados em seco */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
}

.hero__marquee-inner {
  display: flex;
  width: max-content;
  animation: hero-marquee 32s linear infinite;
}

/* Folga nos DOIS lados, igual nos dois conjuntos: mantém as duas cópias
   com a mesma largura (o laço depende disso para o -50% fechar sem salto)
   e impede que o primeiro chip nasça colado na borda, dentro do
   esmaecimento — o primeiro é a Stone, que é palavra-chave da conta. */
.hero__marquee-set {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

/* Chip branco: os logos são coloridos e vários são escuros — sobre o
   fundo #1e1e1e do hero, metade sumiria. Silhueta branca resolveria a
   legibilidade, mas mataria a cor da marca, que é justamente o que
   torna o reconhecimento instantâneo. */
.hero__marquee-set li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 0.6rem;
  background-color: var(--bg-card);
  border-radius: var(--radius-sm);
}

.hero__marquee-set img {
  height: 15px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
}

@keyframes hero-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Mesmo respeito ao prefers-reduced-motion que o js/main.js:73 e o
   css/testimonials.css:172 já aplicam: sem movimento, a faixa vira uma
   grade estática que quebra linha — e ainda fica mais fácil de varrer. */
@media (prefers-reduced-motion: reduce) {
  .hero__marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__marquee-inner {
    animation: none;
    width: 100%;
  }

  .hero__marquee-set {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .hero__marquee-set[aria-hidden="true"] {
    display: none;
  }
}

/* O título voltou a ser uma frase só nas duas larguras — as classes
   .hero__h1-vertical / .hero__h1-main foram removidas junto com o título
   em duas partes. */
.hero--maquininha .hero__headline {
  margin-bottom: 0;
}

/* ── Lista de recursos ────────────────────────────────────
   A .hero__list já existia no hero.css desde o início e nunca foi
   usada — inclusive o quadradinho dourado do ícone de check. */
.hero--maquininha.hero--mobile .hero__list {
  align-items: start;
  text-align: left;
  gap: 0.5rem;
  margin: auto;
  width: auto;
}

.hero--maquininha.hero--mobile .hero__list li {
  font-size: 0.8rem;
}

/* O selo mora FORA do <ul> — `<ul>` só aceita `<li>`, e tê-lo dentro
   quebrava o anúncio da lista pelo leitor de tela. Só que dentro dele o
   selo herdava o `margin: auto` da regra acima, que é quem centraliza o
   bloco no mobile; solto em `.hero__content` (`align-items: flex-start`)
   ele ia para a margem esquerda e descolava da lista. Isto devolve o
   alinhamento publicado. */
.hero--maquininha.hero--mobile .hero__selo {
  margin-inline: auto;
}

.hero--maquininha.hero--mobile .hero__list li svg {
  width: 1rem;
  height: 1rem;
}

.hero--maquininha .hero__cta {
  margin-top: 1rem;
  margin-left: 0;
  width: 100%;
}

.hero--maquininha .hero__cta .btn {
  width: 100%;
}

@media (min-width: 1024px) {
  /* Mesma razão do min-width: 0 da .hero__marquee — aqui é a track do
     grid que precisa poder encolher abaixo do conteúdo. */
  .hero--maquininha.hero--desktop .hero__col-text {
    min-width: 0;
  }

  /* O .hero do desktop tem `height: 100vh`, mas quem pinta o fundo escuro
     é o .container, que só tem a altura do conteúdo. Com a lista de
     recursos o conteúdo deu 594px numa tela de 900 — sobrava uma faixa
     clara de 306px dentro do hero, e o H1 encostava no topo sem folga.
     Forçar o inner a preencher a viewport resolve os dois de uma vez, e
     ainda mantém espaço para a maquininha, que é absoluta e tem 774px. */
  .hero--maquininha.hero--desktop .hero__inner {
    min-height: 100vh;
    padding: 3rem 0;
  }

  /* ── As três colunas do hero desktop ────────────────────
     col 1 = mensagem (título + faixa)
     col 2 = maquininha, absoluta e sobreposta
     col 3 = marca + prova + ação (logo + lista + CTA)

     O .hero__col-text do responsive.css já dá flex column e centralização
     vertical; aqui fica só o espaçamento interno de cada uma. */
  .hero--maquininha.hero--desktop .hero__col-msg,
  .hero--maquininha.hero--desktop .hero__col-action {
    align-items: flex-start;
  }

  .hero--maquininha.hero--desktop .hero__col-msg {
    gap: 1.75rem;
  }

  .hero--maquininha.hero--desktop .hero__col-action {
    gap: 2rem;
  }

  /* O logo saiu da coluna em que era o único elemento e agora divide
     espaço com a lista e o CTA — os 20vw do responsive.css (288px numa
     tela de 1440) esmagariam os dois. */
  .hero--maquininha.hero--desktop .hero__logo img {
    width: clamp(170px, 13vw, 230px);
  }

  /* Zera o margin-top que a regra base aplica no mobile: no desktop quem
     espaça as colunas é o `gap` delas, e as duas coisas somariam. */
  .hero--maquininha.hero--desktop .hero__list,
  .hero--maquininha.hero--desktop .hero__cta {
    margin-top: 0;
  }

  .hero--maquininha .hero__cta {
    width: auto;
  }

  .hero--maquininha .hero__cta .btn {
    width: auto;
  }

  .hero--maquininha .hero__list li {
    font-size: 1.1rem;
  }

  .hero--maquininha .hero__list li svg {
    width: 1.5rem;
    height: 1.5rem;
    padding: 2px;
    border-radius: 16px;
  }
}

/* ── Verificador de compatibilidade ───────────────────────
   Reaproveita .compat__grid / .compat__card / .compat__device /
   .compat__brand / .compat__card--soon / .compat__soon-badge do
   compat.css, incluindo o carrossel mobile com snap e o
   centralizador do js/main.js (bloco 5), que age em qualquer
   .compat__grid da página sem precisar de alteração.
*/
.verificador {
  background-color: var(--bg-secondary);
}

/* O .section-padding padrão é 4rem em cima. Aqui a folga de cima é
   reduzida de propósito: cada pixel gasto antes do título é um pixel
   a menos de verificador visível logo abaixo da dobra. A folga de
   baixo continua a padrão. */
.verificador.section-padding {
  padding-top: 2rem;
}

.verificador__header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.verificador__title {
  max-width: 20ch;
  margin: 0 auto;
}

.verificador__hint {
  margin-top: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* O card vira <button>. O reset de base.css já zera borda e
   fundo; falta só o alvo de toque e o foco visível. */
.verificador__card {
  cursor: pointer;
  text-align: center;
  border-radius: var(--radius-md);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    box-shadow 0.2s ease;
}

.verificador__card:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Marca escolhida: some a atenuação do carrossel e ganha relevo,
   inclusive quando não é o card central. */
.verificador__card[aria-pressed="true"] {
  opacity: 1;
  box-shadow: var(--shadow-md);
  background-color: var(--bg-card);
}

/* ── Painel de resposta ───────────────────────────────────
   min-height reserva o espaço antes de existir resposta. Sem
   isso, o primeiro toque empurra a página inteira para baixo
   justamente enquanto o usuário está lendo.
*/
.verificador__resposta {
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
}

.verificador__resposta--vazio {
  border-style: dashed;
  background-color: transparent;
}

.verificador__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.verificador__status svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.verificador__status--ok {
  color: var(--accent-moss);
}

.verificador__status--soon {
  color: var(--text-secondary);
}

.verificador__resposta-text {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 40ch;
}

.verificador__placeholder {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 34ch;
}

.verificador__fallback {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.verificador__fallback a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verificador__fallback a:hover {
  color: var(--accent-hover);
}

@media (min-width: 1024px) {
  .verificador__resposta {
    min-height: 7.5rem;
    padding: 2rem;
  }

  .verificador__status {
    font-size: 1.5rem;
  }
}