/*
 * Design system do site do BuyPay.
 *
 * A COR NÃO FOI ESCOLHIDA AQUI. Ela é o espelho de `lib/tokens.ts` do
 * repositório do produto, valor por valor. O motivo é o mesmo das landings do
 * Obra Play: quem clica em "Criar conta grátis" cai no aplicativo, e se o site
 * fosse de outro verde — ou de outra cor — a pessoa sentiria que trocou de
 * produto no meio do caminho. Cor de landing é continuidade, não decoração.
 *
 * O verde da marca vem dos SVGs oficiais: gradiente de #00A944 no topo para
 * #2D6500 na base. `--verde-claro` (#5FD98D) é o ÚNICO verde que se lê sobre o
 * verde-escuro — está medido no app, não estimado aqui.
 *
 * Os neutros não são o cinza puro do Material: têm um sopro de verde, para não
 * brigarem com a marca. Também vêm do app.
 *
 * O BLOCO DE TOKENS ABAIXO É O ESPELHO INTEIRO, e alguns nomes ainda não têm
 * uso nesta página — `--alerta`, `--erro`, `--info`, `--zap`. Eles ficam de
 * propósito: o valor deles é serem o mesmo do produto no dia em que uma seção
 * precisar de um. Regra de COMPONENTE sem uso é outra coisa, e essa não fica.
 */

:root {
  /* Marca — espelho de lib/tokens.ts */
  --verde: #00a944;
  --verde-hover: #00913a;
  --verde-medio: #2bc062;
  --verde-claro: #5fd98d; /* o único que lê sobre o escuro */
  --verde-lavado: #e6f7ed;
  --escuro: #0f2a16; /* barra lateral do app, fundo das seções escuras */
  --escuro-fundo: #0a1d0f;
  --verde-profundo: #2d6500; /* base do gradiente da logo */

  /* Superfície e texto */
  --branco: #ffffff;
  --cinza-fundo: #f4f6f4;
  --cinza-afundado: #edefee;
  --tinta: #1a211c;
  --corpo: #5b665f;
  --apagado: #727d76;
  --linha: #dfe3e0;

  /* Estado — os mesmos significados do produto */
  --sucesso: #2e7d32;
  --sucesso-lavado: #e8f5e9;
  --alerta: #f57c00;
  --erro: #d32f2f;
  --info: #0277bd;

  /* WhatsApp. Cor de terceiro: não é nossa para mudar. */
  --zap: #25d366;

  --raio: 14px;
  --raio-cortina: 44px;
  --sombra: 0 1px 2px rgba(15, 42, 22, 0.06), 0 12px 32px rgba(15, 42, 22, 0.1);
  --largura: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* A nav flutuante cobriria o topo de cada âncora sem isto. */
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--corpo);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 16px É A BASE, e o desktop é que sobe para 17. Abaixo de 16 o Safari do
     iPhone dá zoom sozinho, e texto de corpo menor que o do sistema é o
     oposto do que o produto promete. Mesma decisão do aplicativo. */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  color: var(--tinta);
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 900;
}

h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 900;
}

h3 {
  font-size: 20px;
  font-weight: 700;
}

p {
  margin: 0 0 16px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Navegação ─────────────────────────────────────────────────────────── */
/*
 * MOBILE É A BASE. O que está escrito aqui, sem media query, é o celular; o
 * desktop entra depois, por `min-width`.
 *
 * A ordem importa e não é estilo: escrevendo o desktop primeiro e removendo
 * coisas com `max-width`, o celular vira "o desktop menos o que não coube" —
 * foi assim que esta barra nasceu com a logo colada num canto, o botão no
 * outro e um vazio de 200px no meio, que é um menu de desktop sem o miolo.
 */

.nav {
  position: sticky;
  top: 10px;
  z-index: 50;
  padding-inline: 12px;
  margin-bottom: -66px; /* flutua SOBRE o hero, sem empurrá-lo */
}

.nav-caixa {
  max-width: var(--largura);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 7px 7px 14px;
  border-radius: 999px;
  /* TRANSPARÊNCIA TEM PISO, e o piso é a leitura. Esta pílula passa por cima
     de duas coisas muito diferentes: o hero verde-escuro no topo e as seções
     brancas depois. Quanto mais translúcida, mais o verde escuro sobe através
     dela — e o texto cinza do menu, que lê bem sobre branco, começa a sumir.
     O que segura a queda é o `blur` alto: ele apaga o desenho do que está
     atrás, então a pílula continua parecendo uma superfície, e não um buraco.
     O `saturate` devolve a cor que o desfoque lava. */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  /* Sem isto, num navegador sem backdrop-filter a barra ficaria 72% branca
     sobre o verde escuro — ilegível. A borda e a sombra dão contorno. */
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--sombra);
}

@supports not (backdrop-filter: blur(1px)) {
  .nav-caixa {
    background: rgba(255, 255, 255, 0.94);
  }
}

.nav-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-marca img {
  height: 20px;
  width: auto;
}

/* Os links de seção NÃO existem na barra do celular — existem no rodapé, que
   é onde alguém procura índice num site de uma página só. Aqui eles entram
   a partir de 980px, que é quando sobra largura para eles sem espremer nada. */
.nav-links {
  display: none;
}

.nav-links a {
  /* `--tinta` e não `--corpo`: com a pílula a 72%, o cinza de corpo perde
     contraste justamente no trecho em que ela passa sobre o hero escuro. */
  color: var(--tinta);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--verde);
}

/* ── Botões ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 48px de altura mínima: alvo de toque, não estética. */
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s,
    transform 0.15s;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

/*
 * NO CELULAR O BOTÃO OCUPA A LINHA. É a diferença entre um alvo de 150px e um
 * de 320px para um polegar em movimento — e, num hero onde a coluna É a tela,
 * um botão estreito no meio parece perdido.
 *
 * O teto de 340px existe para o tablet: sem ele, a partir de 500px o botão
 * viraria uma faixa esticada. A partir de 700px ele volta a ter a largura do
 * próprio texto (ver o `min-width` mais abaixo).
 */
.hero-acoes .btn {
  width: 100%;
  max-width: 340px;
}

/* O da barra nunca estica: ele divide a linha com a logo. */
.btn-pequeno {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 15px;
  width: auto;
}

.btn-principal {
  background: var(--verde);
  color: var(--branco);
}

.btn-principal:hover {
  background: var(--verde-hover);
}

.btn-fantasma {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--branco);
}

.btn-fantasma:hover {
  border-color: var(--branco);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Seções ────────────────────────────────────────────────────────────── */

/* 72px é o respiro do celular; 100px entra quando há tela para gastar. */
.secao {
  padding: 72px 0;
}

.secao-cinza {
  background: var(--cinza-fundo);
}

.secao-escura {
  background: var(--escuro);
}

/* "Cortina": o canto arredondado que separa uma seção da outra. */
.cortina {
  border-radius: var(--raio-cortina) var(--raio-cortina) 0 0;
  margin-top: -1px;
  position: relative;
}

.escuro,
.escuro h1,
.escuro h2,
.escuro h3 {
  color: var(--branco);
}

.escuro p,
.escuro li {
  color: rgba(255, 255, 255, 0.78);
}

.destaque {
  color: var(--verde-claro);
}

.escuro .destaque {
  color: var(--verde-claro);
}

.secao:not(.escuro) .destaque {
  color: var(--verde);
}

.sobrancelha {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 700;
  color: var(--verde-claro);
  margin-bottom: 14px;
}

.secao:not(.escuro) .sobrancelha {
  color: var(--verde);
}

.linha-fina {
  font-size: 19px;
  max-width: 56ch;
}

.cabecalho-secao {
  max-width: 62ch;
  margin-bottom: 56px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
/*
 * CENTRALIZADO NO CELULAR, E O TEXTO JUNTO.
 *
 * Antes só os botões eram centralizados, com o texto à esquerda — e a
 * incoerência aparecia: o botão parecia desalinhado, não centrado. Numa tela
 * onde a coluna É a tela, não existe "eixo do texto" para o botão seguir; ou
 * tudo acompanha a esquerda, ou tudo acompanha o centro.
 *
 * No desktop volta a ser à esquerda, porque lá a coluna tem metade da largura
 * e o olho já está naquele eixo — ver o `min-width: 980px`.
 */

.hero {
  background:
    radial-gradient(1200px 600px at 78% 12%, rgba(0, 169, 68, 0.22), transparent 60%),
    linear-gradient(180deg, var(--escuro) 0%, var(--escuro-fundo) 100%);
  padding: 108px 0 72px;
  text-align: center;
}

.hero-grade {
  display: grid;
  gap: 44px;
}

.hero .linha-fina {
  margin-inline: auto;
}

.hero-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 26px 0 14px;
}

.hero-nota {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ── A conversa de WhatsApp (ilustração em HTML/CSS) ───────────────────── */

.palco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fone {
  width: 100%;
  max-width: 340px;
  background: #0b141a;
  border-radius: 26px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fone-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fone-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--verde) 0%, var(--verde-profundo) 100%);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.fone-nome {
  color: var(--branco);
  font-weight: 700;
  font-size: 15px;
}

.fone-status {
  color: var(--verde-claro);
  font-size: 12px;
}

.conversa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 4px 4px;
}

.balao {
  position: relative;
  max-width: 86%;
  padding: 8px 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #e9edef;
}

.balao-meu {
  align-self: flex-end;
  background: #005c4b;
}

.balao-dele {
  align-self: flex-start;
  background: #1f2c33;
}

.hora {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-size: 10px;
  color: rgba(233, 237, 239, 0.55);
}

/* `min-width` em px dentro de um balão que já é 86% de uma coluna estreita é
   piso que a tela não tem como pagar: no aparelho pequeno ele empurrava a
   conversa para fora. A onda encolhe; o play e o tempo não. */
.audio {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 190px;
  max-width: 100%;
}

.audio-play {
  color: #e9edef;
  font-size: 13px;
}

.audio-onda {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.audio-onda i {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: rgba(233, 237, 239, 0.6);
}

.audio-tempo {
  font-size: 11px;
  color: rgba(233, 237, 239, 0.7);
}

/* O comprovante que "cai" do balão: é o lançamento virando dado.
 *
 * ABAIXO do telefone, e não sobreposto a ele. Flutuando sobre o canto, ele
 * cobria exatamente a última mensagem — a que diz em qual conta entrou e como
 * ficou o orçamento, que é o argumento inteiro da página. Cartão bonito em
 * cima do texto que vende não é composição, é perda. */
.recibo {
  width: 100%;
  /* 340px: a mesma largura do telefone acima dele, para os dois lerem como um
     bloco só. */
  max-width: 340px;
  margin-top: 18px;
  background: var(--branco);
  border-radius: var(--raio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  border: 1px solid var(--linha);
}

.recibo-etiqueta {
  display: inline-block;
  background: var(--verde-lavado);
  color: var(--sucesso);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.recibo-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--corpo);
  padding: 5px 0;
  border-bottom: 1px solid var(--cinza-afundado);
}

.recibo-linha b {
  color: var(--tinta);
}

.recibo-conta {
  font-size: 12px;
  color: var(--apagado);
  margin-top: 10px;
}

/* ── Grades de cartão ──────────────────────────────────────────────────── */

/* `min(280px, 100%)` e não `280px` seco.
 *
 * `minmax(280px, 1fr)` obedece ao mínimo mesmo quando a TELA tem menos que
 * ele: num aparelho de 320px o cartão nascia com 280 + as margens e empurrava
 * a página inteira para o lado. O sintoma é uma barra de rolagem horizontal
 * que ninguém pediu, e o texto cortado na direita.
 *
 * `min(280px, 100%)` diz "280, ou a largura disponível, o que for menor". */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 28px 26px;
}

.escuro .cartao {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* SVG, e não emoji.
 *
 * Os ícones eram emoji, e emoji tem COR PRÓPRIA: a ampulheta é amarela, o
 * recibo é bege, as setas são azuis. Num cartão que veste a paleta verde, eles
 * entravam como um quarto e um quinto tom que ninguém escolheu — e emoji ainda
 * muda de desenho conforme o sistema de quem olha.
 *
 * Traçado em `currentColor`: a cor vem do token abaixo, e mudar a paleta muda
 * o ícone junto. */
.cartao-icone {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--verde-lavado);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.cartao-icone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.escuro .cartao-icone {
  background: rgba(95, 217, 141, 0.14);
  color: var(--verde-claro);
}

.cartao p:last-child {
  margin-bottom: 0;
}

/* ── Passos numerados ──────────────────────────────────────────────────── */

/* Mesmo motivo de `.grade`: o mínimo não pode ser maior que a tela. */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px;
  counter-reset: passo;
}

.passo {
  position: relative;
  padding-top: 56px;
}

.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 17px;
}

/* ── Lista de checagem ─────────────────────────────────────────────────── */

.lista-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.lista-check li {
  position: relative;
  padding-left: 30px;
}

.lista-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--verde);
  font-weight: 900;
}

.escuro .lista-check li::before {
  color: var(--verde-claro);
}

/* ── Fechamento ────────────────────────────────────────────────────────── */

.fechamento {
  text-align: center;
}

.fechamento .cabecalho-secao {
  margin-inline: auto;
  text-align: center;
}

.fechamento .hero-acoes {
  justify-content: center;
}

/* ── Páginas legais ────────────────────────────────────────────────────── */
/*
 * Termos e política não são landing: ninguém rola por prazer. O que vale aqui
 * é uma COLUNA DE LEITURA estreita, títulos que deixam achar a seção e nada
 * competindo com o texto — sem cartão, sem cor de fundo, sem ilustração.
 */

.legal-topo {
  background: var(--escuro);
  padding: 20px 0;
}

.legal-topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legal-topo img {
  height: 22px;
  width: auto;
}

.legal-topo a {
  color: var(--verde-claro);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.legal {
  /* 68ch: a medida de linha em que o olho não se perde ao voltar. Num monitor
     sem teto, um parágrafo de termos vira uma linha de 1900px. */
  max-width: 68ch;
  margin-inline: auto;
  padding: 48px 24px 80px;
}

.legal h1 {
  font-size: clamp(28px, 4.4vw, 40px);
}

.legal h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  margin-top: 44px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
}

.legal h3 {
  font-size: 17px;
  margin-top: 28px;
}

.legal ul {
  padding-left: 20px;
}

.legal li {
  margin-bottom: 10px;
}

.legal .atualizado {
  color: var(--apagado);
  font-size: 15px;
  margin-bottom: 32px;
}

/* O aviso de que o documento precisa de revisão jurídica, e qualquer outro
   destaque que o leitor não pode passar batido. */
.legal .aviso {
  background: var(--verde-lavado);
  border-left: 4px solid var(--verde);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 16px 18px;
  margin: 24px 0;
}

.legal .aviso p:last-child {
  margin-bottom: 0;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha);
}

.legal th {
  color: var(--tinta);
  font-weight: 700;
}

/* Tabela é a única coisa larga aqui: numa tela estreita ela rola sozinha, em
   vez de empurrar a página inteira para o lado. */
.legal .tabela-rolante {
  overflow-x: auto;
}

/* ── Rodapé ────────────────────────────────────────────────────────────── */

.rodape {
  background: var(--escuro-fundo);
  color: rgba(255, 255, 255, 0.6);
  padding: 56px 0 40px;
  font-size: 15px;
}

.rodape-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.rodape img {
  height: 24px;
  width: auto;
}

/* Coluna no celular, linha quando couber. Cada link é uma linha de 44px de
   alvo — lista de índice com links colados é o clássico "cliquei no errado". */
.rodape-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rodape-links a {
  padding: 10px 0;
}

@media (min-width: 700px) {
  .rodape-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 20px;
    justify-content: flex-end;
  }

  .rodape-links a {
    padding: 0;
  }
}

.rodape a {
  color: var(--verde-claro);
  text-decoration: none;
}

.rodape a:hover {
  text-decoration: underline;
}

.rodape-legal {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
}

/* ── Celular ───────────────────────────────────────────────────────────── */

/* ── Tela larga: o que o desktop ACRESCENTA ────────────────────────────── */
/*
 * Daqui para baixo é `min-width`. O celular já está pronto acima; estas regras
 * só entram quando há largura sobrando, e nenhuma delas desfaz um layout —
 * elas somam. É o que diferencia mobile-first de "desktop com remendos".
 */

/* A partir de 700px o botão volta a ter a largura do próprio texto: a linha
   inteira já não é um alvo, é uma faixa. */
@media (min-width: 700px) {
  body {
    font-size: 17px;
  }

  .secao {
    padding: 100px 0;
  }

  .hero-acoes {
    flex-direction: row;
    justify-content: center;
  }

  .hero-acoes .btn {
    width: auto;
  }
}

/* 980px é onde os quatro links da seção cabem na barra sem espremer a logo
   nem o botão. Abaixo disso eles vivem no rodapé. */
@media (min-width: 980px) {
  .nav {
    top: 16px;
    padding-inline: 16px;
    margin-bottom: -76px;
  }

  .nav-caixa {
    gap: 16px;
    padding: 10px 12px 10px 20px;
  }

  .nav-marca img {
    height: 22px;
  }

  .nav-links {
    display: flex;
    gap: 22px;
    margin-inline: auto;
  }

  .hero {
    padding: 148px 0 100px;
    text-align: left;
  }

  .hero-grade {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
  }

  .hero .linha-fina {
    margin-inline: 0;
  }

  .hero-acoes {
    justify-content: flex-start;
  }
}

/* ── Aparelho estreito ─────────────────────────────────────────────────── */
/* A régua aqui é 430px, a largura dos iPhone grandes em retrato. Abaixo dela
   a pílula do menu tem que caber com logo E botão, e nada pode ter piso em
   pixel maior que a tela. */
/* O rótulo do botão é UM item flex, embrulhado num `<span>` no HTML.
 *
 * Sem o embrulho, "Criar conta" e o `<span>` do "grátis" viravam dois itens
 * do `inline-flex` do `.btn` — e o `gap: 8px`, que existe para separar ícone
 * de texto, entrava NO MEIO DA FRASE, somado ao espaço normal. Saía
 * "Criar conta  grátis". */
@media (max-width: 430px) {
  .so-tela-larga {
    display: none;
  }

  .nav {
    padding-inline: 10px;
  }

  .nav-caixa {
    gap: 10px;
    padding: 8px 8px 8px 14px;
  }

  .nav-marca img {
    height: 20px;
  }

  .btn-pequeno {
    padding: 8px 14px;
    font-size: 14px;
  }

  .container {
    padding-inline: 18px;
  }
}