/*
 * A FONTE VEM DO NOSSO DOMÍNIO, e não do Google.
 *
 * Havia aqui um `@import` do fonts.googleapis.com. Ele funcionava, e cobrava
 * três preços:
 *
 * 1. PRIVACIDADE. Buscar a fonte em `fonts.gstatic.com` entrega o IP de cada
 *    visitante ao Google, e obrigava a política de privacidade a declarar um
 *    compartilhamento que não precisava existir.
 * 2. UM TERCEIRO NO CAMINHO CRÍTICO. É a lição do `cdn.onesignal.com` deste
 *    projeto: bloqueador por DNS derruba serviço de terceiro em silêncio — e
 *    fonte que não carrega é a página inteira trocando de tipografia.
 * 3. UMA IDA A MAIS. `@import` dentro do CSS só começa a baixar DEPOIS de o
 *    CSS chegar: era servidor → CSS → CSS do Google → arquivo da fonte.
 *
 * É a fonte VARIÁVEL (200–800), então um arquivo cobre todos os pesos. Os dois
 * alfabetos vêm com `unicode-range`, como o Google os serve: o navegador baixa
 * o `latin-ext` só se a página tiver um caractere que o exija — em português,
 * quase nunca.
 *
 * Manrope é licenciada em OFL 1.1, que permite hospedar (ver fontes/OFL.txt).
 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fontes/manrope-latin.woff2') format('woff2');
  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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fontes/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * beegoride.app — a página que vende o aplicativo aos motoclubes.
 *
 * ═══ É A MESMA LINGUAGEM DA hidra. ═══
 *
 * A BeeGo tem mais de um produto, e quem abre os dois precisa reconhecer a
 * mesma casa. Por isso o sistema vem de lá inteiro: a barra preta com o logo,
 * o nome do produto em minúscula com ponto, o olho (a etiqueta) em pílula, a
 * headline grande com entrelinha curta, os cartões de borda fina, o bloco
 * escuro arredondado, o FAQ em `details`.
 *
 * O QUE MUDA É A COR DO PRODUTO, e só ela. Na hidra. é o azul da água; aqui é
 * o mel sobre um escuro quente — estrada, couro, fim de tarde.
 *
 * ═══ POR QUE A PÁGINA DEIXOU DE SER PRETA ═══
 *
 * A anterior era preta de ponta a ponta com amarelo forte, e lia como
 * oficina: muito contraste, pouco ar, o telefone escuro sobre fundo escuro
 * quase sumindo. O mesmo mel sobre creme, com espaço em volta, lê como
 * produto. O escuro não some — vira UM bloco, no meio, onde ele pesa a favor.
 *
 * ═══ O MEL NÃO É COR DE TEXTO ═══
 *
 * `#EEA200` sobre creme dá cerca de 2:1 — ilegível. Ele é o acento: fundo de
 * botão, detalhe, número do passo. Quem escreve é `--tinta`. Onde o mel
 * precisa ser texto sobre claro, existe `--mel-escuro`: o mesmo tom fechado
 * até passar no AA (4,6:1) — a mesma conta que o painel já usa.
 */

:root {
  --tinta: #17140D;
  --medio: #6E6353;
  --suave: #A99C86;
  --gelo: #F4E9D2;
  --neve: #FCF8F0;
  --mel: #EEA200;
  /*
   * MEDIDO, E NAO ESTIMADO: 5,54:1 sobre branco, 5,23 sobre a neve e 4,93
   * sobre o gelo — AA de texto nos TRES fundos da pagina.
   *
   * Era #966600, que passava em dois e reprovava no terceiro por 0,05 (4,45
   * sobre o gelo). O gelo nasceu depois do tom, quando as secoes passaram a
   * alternar de cor, e ninguem voltou para remedir — que e exatamente como
   * um contraste se perde: nao no dia em que a cor e escolhida, no dia em que
   * o FUNDO muda debaixo dela.
   *
   * Ele e cor de LEGENDA e de olho de secao, em 0,8rem. Texto pequeno nao tem
   * a folga do titulo, entao a conta tem que fechar no pior fundo.
   */
  --mel-escuro: #8C6000;
  --texto: rgba(23, 20, 13, .74);
  --linha: rgba(23, 20, 13, .12);
  /* o mesmo tom, para quando a linha precisa ser vista: borda de botao
     secundario e contorno de cartao sob o dedo. Estava sendo usada em
     dois lugares sem nunca ter sido definida. */
  --linha-forte: rgba(23, 20, 13, .3);
  --raio: 22px;
  --raio-g: 34px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--tinta);
  background: #fff;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p { color: var(--texto); }
a { color: inherit; }
img { max-width: 100%; }

/* A faixa sangra até a borda e o conteúdo fica num corredor central: é o que
   dá o respiro da referência sem um container extra em cada seção.

   O `overflow-x: clip` no body não é zelo: `100vw` inclui a largura da barra
   de rolagem VERTICAL, então a faixa fica alguns pixels mais larga que a área
   visível e a página ganha uma barra horizontal — dá para arrastar o site
   inteiro para o lado. `clip` e não `hidden` porque `hidden` cria uma região
   rolável e quebra o `position: sticky` da barra do topo. */
body { overflow-x: clip; }
/*
 * `padding-inline`, e NUNCA o shorthand `padding`.
 *
 * Escrito como `padding: 0 max(...)`, ele zerava topo e base de toda seção —
 * e como `.faixa` é classe contra o `section` do seletor de elemento, ganhava
 * por especificidade: a página inteira ficou sem respiro vertical, e isso
 * passa por escolha de design em vez de bug. Separar os eixos é o que impede
 * o erro de voltar.
 */
/*
 * A FAIXA NÃO SANGRA — ela só centraliza o conteúdo em 1200px.
 *
 * Havia aqui um `margin-inline: calc(50% - 50vw)` para ir de borda a borda, e
 * ele era desnecessário: toda `.faixa` desta página já mora dentro de um
 * <header>, <main> ou <footer>, que ocupam a largura inteira sozinhos.
 *
 * Desnecessário e ERRADO: `50vw` conta a BARRA DE ROLAGEM, e a largura de
 * quem está dentro do body não. A conta dava -7px de cada lado, a página
 * ganhava rolagem lateral, e o `overflow-x: clip` do body escondia o sintoma
 * sem desfazer a causa — a barra do topo aparecia deslocada e não havia como
 * saber por quê. O `clip` fica, como rede, mas já não tem o que cortar.
 *
 * O padding também deixou de sair de `vw` pelo mesmo motivo: percentual de
 * padding mede o bloco que contém, que é a largura de verdade. Com `50vw` o
 * conteúdo ficava com 1185 onde devia ter 1200 — os 15px da barra de rolagem,
 * invisíveis até alguém medir.
 */
.faixa { padding-inline: max(20px, calc((100% - 1200px) / 2)); }

/* ── a barra ──────────────────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 40; background: #0B0A07; color: #fff; }
.barra .faixa { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.barra .logo { display: flex; align-items: center; text-decoration: none; color: #fff; }
.barra .logo img { height: 26px; width: auto; display: block; }

/*
 * A ENTRADA SUAVE das seções (o `site.js` põe e tira estas classes).
 *
 * Sem `.entra` no CSS, o JS acrescentaria uma classe que não pinta nada — e o
 * efeito simplesmente não existiria, sem erro nenhum. Com `prefers-reduced-
 * motion` o JS nem chega a marcar, então não há nada a desfazer aqui.
 */
.entra { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.entra.dentro { opacity: 1; transform: none; }

/* A dica do endereço: livre, ocupado, ou só a explicação. */
#dica-codigo.ok { color: #14683F; font-weight: 600; }
#dica-codigo.nao { color: #8A2C22; font-weight: 600; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.barra nav a { color: rgba(255,255,255,.74); text-decoration: none; font-size: .95rem; font-weight: 500; }
.barra nav a:hover { color: #fff; }
.barra .cta {
  background: var(--mel); color: #17140D; padding: 10px 20px;
  border-radius: 99px; font-weight: 700; font-size: .95rem;
}
.barra .cta:hover { color: #17140D; background: #FFB61F; }

/* ── o alto ───────────────────────────────────────────────────────────── */
.hero {
  background: radial-gradient(120% 90% at 80% 0%, #F7E9CC 0%, #FDF7EC 45%, #FFFCF7 100%);
  padding-top: 62px; padding-bottom: 0; overflow: hidden;
}
/*
 * O TEXTO CENTRALIZA, O TELEFONE ENCOSTA NA BASE.
 *
 * Com `align-items: end` nos dois, a coluna de texto — que é mais curta que a
 * imagem — descia junto e deixava 126px vazios no alto do hero. Enquanto a
 * marca do produto morava aqui ela tapava esse vão; quando ela subiu para a
 * barra, o buraco apareceu. O telefone continua no fim porque é ele que
 * precisa tocar a borda de baixo.
 */
.hero-grade { display: grid; gap: 40px; grid-template-columns: 1.05fr .95fr; align-items: center; }
.hero-grade > .palco { align-self: end; }
.olho {
  display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mel-escuro); background: #fff;
  border: 1px solid var(--linha); padding: 6px 14px; border-radius: 99px; margin-bottom: 18px;
}
h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.04;
  letter-spacing: -.035em; font-weight: 600; margin: 0 0 18px;
}
.chamada { font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 38ch; margin: 0 0 30px; }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 26px; border-radius: 16px; background: var(--tinta); color: #fff;
  text-decoration: none; font: 600 1.02rem Manrope, sans-serif; border: 0; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(23, 20, 13, .18);
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(23, 20, 13, .24); }
.botao--linha { background: #fff; color: var(--tinta); border: 1px solid var(--linha); box-shadow: none; }
.botao--mel { background: var(--mel); color: #17140D; box-shadow: 0 10px 24px rgba(238,162,0,.3); }
.botao--mel:hover { box-shadow: 0 16px 34px rgba(238,162,0,.38); }
.nota { font-size: .88rem; color: var(--texto); margin: 0 0 34px; }

.palco { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.palco img {
  width: min(300px, 78%); height: auto; border-radius: 34px;
  box-shadow: 0 30px 60px rgba(23, 20, 13, .24); display: block;
}

/*
 * AS PROVAS SÃO UMA FAIXA ESCURA, logo depois do hero.
 *
 * Eram um `<div>` com `border-top` dentro do hero: a régua parava onde o
 * container parava. Como seção com fundo próprio, ela vai de ponta a ponta — e
 * o escuro faz dela a virada entre o hero e o corpo da página, em vez de uma
 * linha fina que se lê como sobra.
 *
 * O `padding-block` é menor que o das outras seções: ela é uma tarja de quatro
 * frases, não um capítulo.
 */
/*
 * QUATRO COLUNAS, e não `flex-wrap`.
 *
 * Em flex, cada prova ocupava a largura do próprio texto: as três primeiras
 * enchiam a linha e a quarta ("Nas lojas") caía sozinha embaixo, encostada na
 * esquerda. Centralizar a órfã resolveria a aparência e não a causa — bastava
 * um texto mudar de tamanho para a quebra cair noutro lugar.
 *
 * Em grade as quatro têm a mesma largura e a mesma linha, e o comprimento de
 * cada frase deixa de decidir o desenho da faixa.
 */
.provas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 30px;
  padding-block: 26px; font-size: .92rem;
  background: var(--tinta); color: rgba(255, 255, 255, .72);
}
.provas b { color: #fff; font-weight: 600; display: block; margin-bottom: 2px; }

/* Duas a duas antes de virar uma coluna só: quatro colunas de 300px ainda se
   leem, mas de 150px viram uma palavra por linha. */
@media (max-width: 1040px) { .provas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .provas { grid-template-columns: 1fr; gap: 14px; } }

/* ── seções ───────────────────────────────────────────────────────────── */
section { padding-block: clamp(64px, 7vw, 104px); }

/*
 * CADA BLOCO TEM A SUA COR.
 *
 * Nenhuma seção tinha fundo, então o corpo aparecia entre uma e outra e a
 * página lia como uma coluna de texto solta sobre branco — foi o que o
 * Valério apontou. Alternando os dois tons de papel, cada seção vira um
 * bloco com começo e fim.
 *
 * A alternância é ESCRITA NO HTML, e não calculada por `nth-child`: com a
 * regra automática, inserir uma seção no meio repinta todas as de baixo, e
 * ninguém liga uma coisa à outra. Foi uma seção inserida no meio (a dupla da
 * agenda) que produziu esta página.
 */
.tom-neve { background: var(--neve); }
.tom-gelo { background: #F8F1E4; }
h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.12;
  letter-spacing: -.03em; font-weight: 600; margin: 0 0 14px;
}
.sub { max-width: 58ch; margin: 0 0 38px; font-size: 1.05rem; }

.recursos { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.cartao {
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px;
  background: linear-gradient(180deg, #fff, var(--neve));
}
.cartao h3 { font-size: 1.16rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.cartao p { margin: 0; font-size: .97rem; }
.ponto {
  width: 38px; height: 38px; border-radius: 12px; background: var(--gelo);
  display: grid; place-items: center; margin-bottom: 14px;
}
.ponto svg {
  width: 20px; height: 20px; stroke: var(--mel-escuro); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.dupla { display: grid; gap: 48px; grid-template-columns: 1fr 1fr; align-items: center; }
/*
 * A IMAGEM CABE EM DOIS LIMITES: largura e ALTURA.
 *
 * Era so `width`, e isso bastava enquanto todas as capturas tinham a mesma
 * proporcao. A da agenda tem 2240px de altura (tres passeios nao cabem em
 * 1600), e a 280px de largura ela saía com 804px — contra 574px das outras, e
 * ao lado de um texto de 272px, o que deixava uns 260px vazios acima e abaixo
 * dele.
 *
 * `max-width` em vez de `width`, com `max-height` ao lado: a imagem respeita
 * os dois e mantem a proporcao sozinha. Quem cabe nao muda (as outras duas
 * continuam com 280px); quem nao cabe encolhe pelo lado que estoura.
 *
 * E REGRA, e nao excecao para esta dupla: a proxima captura de proporcao
 * diferente ja nasce enquadrada, em vez de esticar a secao e ninguem notar.
 */
.dupla img {
  max-width: min(280px, 80%); max-height: 700px; width: auto; height: auto;
  border-radius: 30px;
  box-shadow: 0 24px 50px rgba(23, 20, 13, .2); display: block; margin: 0 auto;
}
.lista { list-style: none; padding: 0; margin: 22px 0 0; }
.lista li { position: relative; padding-left: 30px; margin-bottom: 13px; color: var(--texto); }
.lista li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--gelo);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--suave);
}

/* ── o bloco escuro ───────────────────────────────────────────────────── */
/*
 * O ESCURO É A SEÇÃO INTEIRA, de ponta a ponta.
 *
 * Era um cartão dentro dela, com cantos arredondados e margem dos dois lados.
 * O fundo passou para a própria seção — o conteúdo continua centralizado em
 * 1200px pelo padding da `.faixa`, e o padding lateral que existia aqui saiu
 * junto, senão somaria com o dela e estreitaria o bloco.
 */
.escuro {
  background: linear-gradient(160deg, #241F14, #17140D 55%, #100E09);
  color: #fff;
}
.escuro h2, .escuro h3 { color: #fff; }
.escuro p, .escuro .lista li { color: rgba(255,255,255,.82); }
.escuro .lista li::before {
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.9), 0 0 0 1px rgba(255,255,255,.35);
}

.passos { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-top: 32px; }
.passo {
  border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 22px;
  background: rgba(255,255,255,.05);
}
.passo b {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px;
  background: var(--mel); color: #17140D; font-size: .95rem; margin-bottom: 12px;
}
.passo h3 { font-size: 1.05rem; margin: 0 0 6px; font-weight: 600; }
.passo p { margin: 0; font-size: .93rem; }

/* ── assinar ──────────────────────────────────────────────────────────── */
/*
 * SEM `background` AQUI: quem pinta a secao e a classe de tom no HTML.
 *
 * Havia um `.assinar { background: var(--neve) }`, escrito antes de os tons
 * existirem, e ele GANHAVA da classe — a secao recebia `tom-gelo` e pintava
 * neve, deixando tres secoes seguidas da mesma cor bem onde esta o
 * formulario. Duas fontes para a mesma decisao e o que faz o HTML dizer uma
 * coisa e a tela mostrar outra.
 */
.assinar .dupla { align-items: start; }
form.cartao { display: grid; gap: 16px; padding: 30px; }
form label { display: grid; gap: 7px; font-weight: 600; font-size: .95rem; }
form input {
  font: 400 16px Manrope, sans-serif; padding: 0 14px; min-height: 52px; width: 100%;
  border: 1.5px solid var(--linha); border-radius: 12px; background: #fff; color: var(--tinta);
}
form input:focus { outline: none; border-color: var(--mel); box-shadow: 0 0 0 4px rgba(238,162,0,.2); }
form small { font-weight: 400; font-size: .85rem; color: var(--texto); }
.endereco { display: flex; align-items: center; }
.endereco input { border-radius: 12px 0 0 12px; border-right: 0; }
.sufixo {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 14px;
  border: 1.5px solid var(--linha); border-left: 0; border-radius: 0 12px 12px 0;
  background: var(--gelo); color: var(--medio); font-size: .95rem; font-weight: 600; white-space: nowrap;
}
form button {
  font: 600 1.02rem Manrope, sans-serif; min-height: 56px; border: 0; cursor: pointer;
  border-radius: 14px; background: var(--mel); color: #17140D;
  box-shadow: 0 10px 24px rgba(238,162,0,.3);
}
form button:hover { background: #FFB61F; }
form button:disabled { opacity: .6; cursor: default; box-shadow: none; }
.recado {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: .95rem;
  background: #FBEDEB; border: 1px solid #E7C3BE; color: #8A2C22;
}
.mini { font-size: .84rem; color: var(--texto); margin: 0; }

/* ── dúvidas ──────────────────────────────────────────────────────────── */
details {
  border: 1px solid var(--linha); border-radius: 18px; padding: 18px 22px;
  margin-bottom: 12px; background: #fff;
}
details summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--mel-escuro); }
details[open] summary::after { content: '\2212'; }
details p { margin: 12px 0 0; }

/* ── o fecho ──────────────────────────────────────────────────────────── */
/* O fecho também vai de ponta a ponta, pelo mesmo motivo do escuro. */
.final {
  text-align: center;
  background: radial-gradient(70% 120% at 50% 0%, #F7E9CC, var(--neve));
}
.final .acoes { justify-content: center; }
.final .chamada { margin-left: auto; margin-right: auto; }
/*
 * O RODAPÉ É FAIXA DE LARGURA INTEIRA, e escura.
 *
 * Antes ele vivia dentro da section do fecho: parava na borda do container e
 * ficava pendurado embaixo de um cartão claro, sem nada terminando a página.
 * Escuro e de ponta a ponta, ele fecha — e é onde a marca da BeeGo passou a
 * assinar, agora que a barra do topo leva a marca do produto.
 */
.rodape {
  background: #0B0A07; color: rgba(255,255,255,.66);
  padding-block: 40px 44px; font-size: .92rem;
}
/*
 * TRÊS COLUNAS, e a primeira é mais larga: ela tem a marca e a frase que situa
 * o produto; as outras duas são listas curtas de links. Colunas iguais dariam
 * uma faixa de links com um logo perdido no canto.
 */
.rodape-grade {
  display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: 40px;
  padding-bottom: 34px;
}
.rodape-marca img { height: 36px; width: auto; display: block; margin-bottom: 16px; }
/*
 * A COR DO <p> PRECISA SER DITA AQUI, e não herdada do `.rodape`.
 *
 * Existe uma regra global `p { color: var(--texto) }` — tinta escura —, e ela
 * MIRA O ELEMENTO. Herança perde para qualquer regra que mire, por menos
 * específica que seja: o parágrafo saía com a tinta do papel sobre o fundo
 * preto, contraste 1,08:1. O texto estava lá, do tamanho certo, e ninguém
 * conseguia ler.
 *
 * O `.escuro` já tem um `.escuro p` pelo mesmo motivo: quem o escreveu topou
 * com isto antes. Vale para qualquer bloco de fundo escuro que venha depois.
 */
.rodape-marca p { margin: 0; max-width: 46ch; line-height: 1.6; color: rgba(255, 255, 255, .62); }

.rodape-links { display: flex; flex-direction: column; gap: 10px; }
.rodape-links h2 {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin: 0 0 4px; font-weight: 600;
}
.rodape a { color: rgba(255,255,255,.82); text-decoration: none; }
.rodape a:hover { color: var(--mel); }

/*
 * A ASSINATURA DA EMPRESA fica separada por uma régua: ela é de outra ordem —
 * quem é a empresa, e não o que o produto faz.
 */
.rodape-fim {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px;
}
/*
 * O `display: flex` valia para o par "texto + logo" que havia aqui antes. Com
 * o credito, ele separava "Feito com", o coracao e "por beego.dev" em tres
 * itens com 10px entre cada — uma frase com buracos.
 *
 * Agora e flex so onde ainda ha logo ao lado de texto; o credito e frase
 * corrida, e o coracao volta a ser `inline-block` (que e o que a animacao
 * precisa para escalar sem empurrar o texto).
 */
.rodape-fim > span { display: inline; }
.rodape-fim > span.casa { display: flex; align-items: center; gap: 10px; }
.rodape-fim img { height: 22px; width: auto; display: block; }
.rodape-fim .mini { color: rgba(255,255,255,.45); font-size: .84rem; }

@media (max-width: 760px) {
  .rodape-grade { grid-template-columns: 1fr; gap: 30px; }
  .rodape-fim { justify-content: flex-start; }
}
.miudo { font-size: .82rem; color: rgba(23, 20, 13, .6); margin-top: 18px; }

/* ── telas menores ────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .recursos { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero-grade, .dupla { grid-template-columns: 1fr; }
  .palco { margin-top: 10px; }
  /*
   * NO TELEFONE O TEXTO VEM PRIMEIRO, NAS DUAS DUPLAS.
   *
   * Aqui estava `order: 2` no texto — que nao inverte nada: na dupla
   * invertida o DOM ja e imagem → texto, entao a regra reafirmava a ordem que
   * ele ja tinha. Medido em 375px, a Jornada abria com uma foto de tela ANTES
   * de qualquer titulo dizendo o que ela era.
   *
   * A regra existir prova a intencao: alguem quis inverter e escreveu o lado
   * errado da conta.
   */
  .dupla--invertida .texto { order: -1; }
  section { padding: 54px 0; }
  .barra nav { gap: 16px; }
  .barra nav a:not(.cta) { display: none; }
}
@media (max-width: 620px) {
  .recursos, .passos { grid-template-columns: 1fr; }
  .botao { flex: 1 1 100%; }
}

/* ── A página de privacidade ───────────────────────────────────────────── */
/*
 * TEXTO CORRIDO, e por isso estreito: a landing tem 1200px porque desenha em
 * colunas; um parágrafo com 1200px de largura é ilegível — o olho perde a
 * linha na volta. ~72ch é a medida em que se lê sem esforço.
 */
.legal { max-width: 72ch; margin-inline: auto; }
.legal h1 { margin-bottom: 14px; }
.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin: 38px 0 10px;
  letter-spacing: -.02em; font-weight: 600;
}
.legal p { margin: 0 0 14px; }
.legal .chamada { margin-bottom: 10px; }
.legal .lista { margin: 0 0 16px; }
.legal code {
  font-size: .92em; background: var(--gelo); border-radius: 6px; padding: 1px 6px;
}
.legal a { color: var(--mel-escuro); }

.legal .volta { margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--linha); }

/* ── Os preços ─────────────────────────────────────────────────────────── */
/*
 * DUAS COLUNAS DESIGUAIS: o plano é o que se compra, o app exclusivo é um
 * adicional. Colunas iguais fariam parecer duas opções entre as quais escolher
 * — e não são: a mensalidade é a mesma com ou sem o app próprio.
 */
.precos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .precos { grid-template-columns: 1fr; } }

.preco { display: flex; flex-direction: column; gap: 4px; }
.preco-rotulo {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mel-escuro); font-weight: 600;
}
.preco-valor { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/*
 * O RISCADO É MENOR E MAIS FRACO que o preço que vale. Do mesmo tamanho, os
 * dois competem e o olho lê o errado primeiro — que é justamente o número que
 * ninguém vai pagar.
 */
.preco-valor s { font-size: 1.5rem; color: var(--suave); text-decoration-thickness: 2px; }
/* A cor e dita, e nao herdada: o `p { color: var(--texto) }` global mira o
   elemento, e o numero que vale sairia com a mesma opacidade de um paragrafo.
   E a segunda vez hoje que essa regra me pega — a primeira foi no rodape. */
.preco-valor strong {
  font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--tinta);
}
.preco-valor em { font-style: normal; font-size: 1.05rem; color: var(--medio); }
.preco-nota { margin: 0 0 10px; font-size: .92rem; color: var(--medio); }
.preco .lista { margin-top: 6px; margin-bottom: 22px; }
.preco .botao { align-self: flex-start; margin-top: auto; }

/* O adicional é visivelmente secundário: fundo de papel em vez do cartão
   branco, e sem botão próprio — ele não é uma segunda compra. */
.preco--extra { background: var(--neve); }
.preco--extra .preco-valor strong { font-size: clamp(1.9rem, 3.6vw, 2.4rem); }

/*
 * O CREDITO DA CASA: "Feito com ❤️ por beego.dev", o mesmo do
 * royalridersbrasil.com.br. Substituiu o logo da BeeGo, que competia com o do
 * beeRide a poucos centimetros no mesmo rodape.
 */
.rodape-fim .credito { color: rgba(255, 255, 255, .62); }
.rodape-fim .credito a { color: rgba(255, 255, 255, .82); }
.rodape-fim .credito a:hover { color: var(--mel); }
.rodape-fim .coracao { font-style: normal; }

/* ── O par: o mesmo instante, de dois pontos de vista ──────────────────── */
/*
 * TRES TELAS NUMA SECAO SO, e nao tres duplas.
 *
 * Modo Ride e aba Equipe sao o mesmo momento visto de dois lados — separa-los
 * faria a pagina contar duas vezes. O Modo Ride ocupa DOIS enquadramentos
 * porque a tela e alta: num recorte so seria preciso escolher entre o relogio
 * e os botoes, e cada um prova metade da frase.
 */
.par { display: grid; gap: 40px; }

/* Juntas e centralizadas: soltas num container de 1200 elas ficam longe umas
   das outras, e o argumento do bloco e serem O MESMO MOMENTO. */
.par-telas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2.2vw, 28px);
  align-items: start; max-width: 900px; margin-inline: auto;
}
.par-telas figure { margin: 0; display: grid; gap: 12px; justify-items: center; }

/* A mesma altura das outras capturas da pagina: 574px e o que uma tela de
   780x1600 mede a 280px de largura nas duplas. */
.par-telas img {
  max-width: 100%; max-height: 574px; width: auto; height: auto;
  border-radius: 26px; box-shadow: 0 24px 50px rgba(23, 20, 13, .2); display: block;
}

/*
 * A LEGENDA NAO E ENFEITE: sem ela, tres telas lado a lado sao tres telas.
 * Com ela, sao tres momentos de um dia so.
 */
.par-telas figcaption {
  font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mel-escuro); font-weight: 600; text-align: center;
}

/* No telefone, tres colunas dariam telas de 100px. Duas em cima e a terceira
   embaixo — e a de baixo e a de quem organiza, que e a que muda de lado. */
@media (max-width: 700px) {
  .par-telas { grid-template-columns: 1fr 1fr; max-width: 420px; }
  .par-telas figure:last-child { grid-column: 1 / -1; justify-self: center; max-width: 62%; }
}

/* ── Movimento ─────────────────────────────────────────────────────────── */
/*
 * O CORACAO DO RODAPE BATE, com a mesma curva do royalridersbrasil.com.br.
 *
 * E um batimento DUPLO — forte, volta, mais fraco, pausa — e e essa curva que
 * faz parecer coracao. Um `scale` simples pulsando parece algo inflando.
 */
@keyframes bate {
  0%, 40%, 100% { transform: scale(1); }
  10%           { transform: scale(1.25); }
  20%           { transform: scale(1); }
  30%           { transform: scale(1.18); }
}
.rodape-fim .coracao {
  display: inline-block !important;   /* o `> span { display: inline }` acima nao
                                          pode alcancar o coracao: `inline` nao
                                          aceita `transform`, e a animacao sumiria
                                          sem nada indicando por que. */
  transform-origin: center center;
  animation: bate 1.6s ease-in-out infinite;
}

/*
 * O RESTO RESPONDE AO TOQUE, e nao corre sozinho.
 *
 * Numa pagina de venda, movimento sem causa cansa em duas rolagens. Movimento
 * que reage ao dedo diz outra coisa: que a coisa esta viva e que vale tocar.
 */
.cartao { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.recursos .cartao:hover,
.preco:hover {
  transform: translateY(-3px);
  border-color: var(--linha-forte);
  box-shadow: 0 18px 38px rgba(23, 20, 13, .08);
}

/* As capturas se levantam um pouco: sao a prova do produto, e o movimento
   convida a olhar de perto — que e o que queremos que a pessoa faca. */
.dupla img, .par-telas img { transition: transform .3s ease, box-shadow .3s ease; }
.dupla img:hover, .par-telas img:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px rgba(23, 20, 13, .26);
}

/* O botao afunda ao ser pressionado: e o unico retorno tatil que uma pagina
   tem, e sem ele um toque no celular nao parece ter acontecido. */
.botao, .barra .cta { transition: transform .14s ease, background-color .2s ease, color .2s ease; }
.botao:active, .barra .cta:active { transform: translateY(1px) scale(.99); }

/* As perguntas do FAQ abrem com o sinal girando, em vez de trocar de sinal. */
#duvidas summary::after { transition: transform .2s ease; }
#duvidas details[open] summary::after { transform: rotate(45deg); }

/*
 * QUEM PEDIU MENOS MOVIMENTO RECEBE MENOS MOVIMENTO.
 *
 * A pagina ja respeitava isto na animacao de entrada das secoes. Um coracao
 * batendo sem parar e justamente o que incomoda quem tem enjoo, vertigem ou
 * sensibilidade a movimento — e a preferencia do sistema existe para ser
 * obedecida, nao contornada.
 */
@media (prefers-reduced-motion: reduce) {
  .rodape-fim .coracao { animation: none; }
  .cartao, .dupla img, .par-telas img, .botao, .barra .cta,
  #duvidas summary::after { transition: none; }
  .recursos .cartao:hover, .preco:hover,
  .dupla img:hover, .par-telas img:hover { transform: none; }
}

/* ── As telas do painel, que sao de desktop ────────────────────────────── */
/*
 * OCUPAM A LARGURA DA COLUNA, e nao uma moldura de telefone.
 *
 * Elas tem 1280 de largura util (2560 em tela retina) e a barra lateral a
 * mostra. Espremidas numa moldura de celular, viram uma mancha com texto
 * ilegivel — e ainda mentem sobre o que sao: o painel e uma tela de
 * computador, e quem organiza vai usa-lo sentado.
 *
 * `width` e `height` no HTML, com `aspect-ratio` aqui: sem os tres, a pagina
 * PULA quando cada imagem chega, e sao imagens grandes.
 */
.telona { margin: 26px 0 0; }
.telona img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid var(--linha);
  box-shadow: 0 20px 44px rgba(23, 20, 13, .14);
  background: var(--neve);
}
@media (max-width: 700px) {
  /* No telefone a tela de desktop fica pequena demais para ler. Em vez de
     fingir que da, ela rola de lado dentro do proprio quadro. */
  .telona { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .telona img { min-width: 640px; }
}

/* ── As telas do aplicativo na página "Por dentro" ──────────────────────── */
/*
 * UMA CLASSE QUE SERVE PARA UMA, DUAS OU TRÊS TELAS.
 *
 * A página cresce a cada captura que chega, e algumas provam sozinhas
 * (a arte do fim do rolê) enquanto outras só provam em par (o passeio e o
 * pagamento são o MESMO toque, visto antes e depois). Uma classe por
 * quantidade envelheceria na primeira captura nova.
 *
 * `justify-content: center` com colunas automáticas: uma tela sozinha fica no
 * meio, duas ficam juntas no meio. Com `1fr` elas se esparramariam pela
 * largura da coluna, e duas telas longe uma da outra deixam de parecer duas
 * metades do mesmo argumento.
 */
.telinhas {
  display: grid; grid-auto-flow: column; justify-content: center;
  gap: clamp(14px, 2.4vw, 32px); align-items: start; margin: 26px 0 0;
}
.telinhas figure { margin: 0; display: grid; gap: 12px; justify-items: center; }

/* A mesma altura das capturas da página inicial, para as duas páginas
   parecerem o mesmo produto. */
.telinhas img {
  max-width: 100%; max-height: 600px; width: auto; height: auto;
  border-radius: 26px; box-shadow: 0 24px 50px rgba(23, 20, 13, .2); display: block;
}
.telinhas figcaption {
  font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mel-escuro); font-weight: 600; text-align: center; max-width: 24ch;
}

/* No telefone, duas telas lado a lado dariam 160px cada. Empilha. */
@media (max-width: 640px) {
  .telinhas { grid-auto-flow: row; }
  .telinhas img { max-height: 70vh; }
}

.telinhas img { transition: transform .3s ease, box-shadow .3s ease; }
.telinhas img:hover { transform: translateY(-6px); box-shadow: 0 34px 60px rgba(23, 20, 13, .26); }
@media (prefers-reduced-motion: reduce) {
  .telinhas img { transition: none; }
  .telinhas img:hover { transform: none; }
}

/* ── O item da página em que a pessoa está ─────────────────────────────── */
/*
 * A MARCA DE "VOCÊ ESTÁ AQUI" É O QUE IMPEDE O CLIQUE VAZIO.
 *
 * Sem ela o item da página atual fica igual aos outros: a pessoa clica, a
 * página não muda, e ela acha que o site travou. Ela também tira a mão do
 * cursor, porque não há para onde ir.
 *
 * O seletor é `[aria-current="page"]`, e não uma classe: assim a marca visual
 * e a que o leitor de tela anuncia são A MESMA COISA, e não há como pôr uma
 * sem a outra.
 */
.barra nav a[aria-current="page"] {
  color: var(--mel); font-weight: 600; cursor: default;
}

/* ── O menu no telefone ────────────────────────────────────────────────── */
/*
 * OS LINKS DESCEM PARA UMA SEGUNDA LINHA, EM VEZ DE SUMIR.
 *
 * Abaixo de 860px eles ficavam `display: none` e sobrava só o botão. Isso
 * deixou a página de Funcionalidades sem caminho nenhum a partir do topo no
 * telefone, e ninguém rola 13 seções até o rodapé para procurar um menu.
 *
 * SEM HAMBÚRGUER, e é decisão. Ele custaria JavaScript, um estado aberto e
 * fechado, foco preso e tecla Esc, tudo para esconder quatro links atrás de um
 * toque, num site de quatro páginas. Aqui eles ficam à vista, sempre.
 *
 * A faixa rola na horizontal se não couber, com as margens negativas levando o
 * primeiro e o último item até a borda da tela: sem isso, o padding da
 * `.faixa` corta o começo da rolagem e o primeiro link nasce encostado numa
 * parede invisível.
 *
 * O público deste produto é mais velho, então o alvo fica em 44px de altura.
 * Isso vem do padding, não do tamanho da letra.
 */
@media (max-width: 860px) {
  .barra .faixa { flex-wrap: wrap; row-gap: 2px; }

  /* o logo e o "Começar" continuam na primeira linha, lado a lado */
  .barra .logo { flex: 1 1 auto; }
  .barra .faixa > .cta { flex: 0 0 auto; order: 2; }

  /* e os links quebram para a linha de baixo, ocupando a largura inteira.
     `flex: 0 0 100%` e nao `width: 100%`: dentro de um flex o nav encolhe ate
     caber no que sobrou da primeira linha, e foi assim que ele nasceu com 40px
     de largura, com os quatro links empilhados numa coluna de um caractere. */
  .barra nav {
    order: 3; flex: 0 0 100%; min-width: 0; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .barra nav::-webkit-scrollbar { display: none; }

  .barra nav a:not(.cta) {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 11px 9px; font-size: .95rem;
  }
}

/* ── Os botões das lojas ───────────────────────────────────────────────── */
/*
 * DESENHADOS AQUI, e não os selos oficiais em PNG.
 *
 * Os dois motivos são os mesmos que valem para o resto do site: o selo oficial
 * é uma imagem de outro domínio (ou um arquivo a mais para servir e versionar),
 * e ele vem numa altura fixa que briga com o botão ao lado. Aqui os dois têm a
 * mesma altura, a mesma tipografia do site e escalam com a fonte de quem
 * aumentou a letra no sistema.
 *
 * O formato é o que as pessoas reconhecem: ícone à esquerda, linha pequena em
 * cima ("Baixe no"), nome da loja em baixo. Trocar essa ordem faz o botão
 * deixar de parecer botão de loja, que é a única coisa que ele precisa
 * parecer.
 */
.lojas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.btn-loja {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: 14px;
  background: var(--tinta); color: #fff; text-decoration: none;
  border: 1px solid var(--tinta);
  transition: transform .14s ease, box-shadow .2s ease;
}
.btn-loja:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23, 20, 13, .22); }
.btn-loja:active { transform: translateY(0); }

.btn-loja svg { width: 26px; height: 26px; flex: 0 0 auto; }
.btn-loja .ll { display: grid; line-height: 1.15; }
.btn-loja .ll small { font-size: .7rem; opacity: .82; letter-spacing: .02em; }
.btn-loja .ll b { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) {
  .btn-loja { transition: none; }
  .btn-loja:hover { transform: none; }
}

@media (max-width: 520px) {
  .lojas { gap: 10px; }
  .btn-loja { flex: 1 1 100%; justify-content: center; }
}

/* ── O link de rede social no rodapé ───────────────────────────────────── */
/*
 * ÍCONE E PALAVRA JUNTOS, e o ícone herda a cor do texto.
 *
 * Esta coluna é de links escritos ("suporte@beego.dev", "Privacidade"), então
 * um glifo solto no meio deles leria como enfeite, e não como link. Com a
 * palavra ao lado ele vira o que é.
 *
 * `currentColor` no SVG é o que faz o ícone acompanhar o link no hover e em
 * qualquer tema futuro. Cor escrita à mão aqui seria um segundo lugar para
 * lembrar de mudar, e o sintoma de esquecer é um ícone de cor diferente do
 * texto que ele acompanha.
 */
.rodape-links a.rede { display: inline-flex; align-items: center; gap: 8px; }
.rodape-links a.rede svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: currentColor; opacity: .9;
}

/* ── A lista NUMERADA ──────────────────────────────────────────────────── */
/*
 * IRMÃ DA `.lista`, E NÃO A MESMA COISA.
 *
 * A `.lista` apaga o marcador e desenha uma bolinha: certo para itens sem
 * ordem ("o que é excluído, o que é mantido"), e errado para uma receita.
 * Aplicada a uma `<ol>`, ela some com o 1, 2 e 3 sem dar erro nenhum. O HTML
 * estava certo, o CSS estava certo, e a tela perdia a única coisa que uma
 * lista ordenada tem a dizer. Foi assim que a página de excluir conta ficou
 * com três bolinhas ocas iguais no lugar dos passos.
 *
 * O NOME NÃO É `.passos`, e isso é conserto de um erro que quase entrou: essa
 * classe já existe, e é a grade de quatro colunas do "Como funciona" na home.
 * Reaproveitar o nome teria pintado aquela seção com o desenho desta lista,
 * calado — a mesma família do `.cel` que pintou a carteira do piloto de preto
 * no outro projeto.
 *
 * O número é desenhado em vez de herdado do `list-style` para alinhar com o
 * texto e usar a cor da marca. `counter` conta sozinho: passo novo no meio não
 * obriga ninguém a renumerar à mão, que é como uma receita passa a mentir.
 */
.numerada {
  list-style: none; padding: 0; margin: 22px 0 0;
  counter-reset: passo;
}
.numerada li {
  position: relative; padding-left: 42px; margin-bottom: 15px;
  color: var(--texto); min-height: 28px;
}
.numerada li::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tinta); color: #fff;
  font-size: .9rem; font-weight: 600; line-height: 1;
  display: grid; place-items: center;
}

/* ── o pagamento dentro do site (pagamento.js, 06/10/2026) ───────────────
 * Pix e cartão na própria página. O formulário do cartão é um iframe do
 * Mercado Pago: aqui só se arruma o que fica em volta dele. */
.pg { display: grid; gap: 14px; border-top: 1px solid var(--linha); padding-top: 18px; }
.pg-titulo { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--tinta); }
.pg-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
form .pg-aba, .pg-aba {
  min-height: 52px; border-radius: 12px; border: 1.5px solid var(--linha); background: #fff;
  color: var(--tinta); box-shadow: none; font: 600 1rem Manrope, sans-serif; cursor: pointer;
}
form .pg-aba:hover { background: var(--gelo); }
form .pg-aba[aria-selected="true"], .pg-aba[aria-selected="true"] { border-color: var(--mel); background: #FFF6E0; }
.pg-corpo { display: grid; gap: 12px; justify-items: stretch; }
.pg-explica { margin: 0; font-size: .95rem; color: var(--texto); }
.pg-valor { margin: 0; font: 700 1.6rem Manrope, sans-serif; color: var(--tinta); text-align: center; }
.pg-qr { justify-self: center; width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--linha); border-radius: 12px; background: #fff; padding: 8px; }
form input.pg-codigo, .pg-codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.pg-principal { min-height: 56px; }
.pg-espera { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--gelo); font-size: .95rem; color: var(--tinta); }
.pg-espera::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--mel); animation: pg-pulsa 1.2s ease-in-out infinite; }
@keyframes pg-pulsa { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pg-espera::before { animation: none; } }
form .pg-corrigir, .pg-corrigir {
  min-height: 44px; background: none; box-shadow: none; color: var(--medio); text-decoration: underline;
  font-weight: 600; justify-self: start; padding: 0;
}
form .pg-corrigir:hover { background: none; color: var(--tinta); }
form input[readonly]:not(.pg-codigo) { background: var(--gelo); color: var(--medio); }
.pg-pagina { padding: 26px; max-width: 560px; margin-top: 18px; }
/* Fora de <form> (a página /pagar/) os botões e o campo do código não herdam `form button` nem `form input`. */
.pg .pg-principal {
  font: 600 1.02rem Manrope, sans-serif; border: 0; cursor: pointer; border-radius: 14px;
  background: var(--mel); color: #17140D; box-shadow: 0 10px 24px rgba(238,162,0,.3); padding: 0 18px;
}
.pg .pg-principal:hover { background: #FFB61F; }
.pg .pg-principal:disabled { opacity: .6; cursor: default; box-shadow: none; }
.pg .pg-codigo {
  padding: 0 14px; min-height: 52px; width: 100%; border: 1.5px solid var(--linha);
  border-radius: 12px; background: #fff; color: var(--tinta);
}
/* `display: grid` acima ganha do atributo `hidden`: sem isto, "Corrigir os dados" escondia o pagamento e ele continuava na tela. */
.pg[hidden], .pg-pagina[hidden], .pg-corrigir[hidden] { display: none !important; }
.pg-pagina .pg { border-top: 0; padding-top: 0; }

/* ── o cartão com os campos seguros do Mercado Pago (06/10/2026) ──────────
 * Os três primeiros campos são iframes do Mercado Pago montados nestas caixas:
 * a caixa é nossa (borda, altura, foco), o que se digita dentro é deles. */
.pg-cartao { display: grid; gap: 8px; }
.pg-rotulo { font-weight: 600; font-size: .95rem; margin-top: 6px; color: var(--tinta); }
.pg-bandeira { font-weight: 600; color: var(--mel-escuro); }
.pg-campo-mp, .pg .pg-entrada {
  height: 52px; width: 100%; border: 1.5px solid var(--linha); border-radius: 12px; background: #fff;
  font: 400 16px Manrope, sans-serif; color: var(--tinta); padding: 0;
}
.pg .pg-entrada { padding: 0 14px; min-height: 52px; }
.pg-campo-mp.pg-foco, .pg .pg-entrada:focus { outline: none; border-color: var(--mel); box-shadow: 0 0 0 4px rgba(238,162,0,.2); }
.pg-campo-mp.pg-ruim, .pg .pg-entrada.pg-ruim { border-color: #C0392B; }
.pg-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-cartao[hidden] { display: none !important; }
.pg-cartao .pg-principal { margin-top: 12px; }