/* ══ MOTORBOX — os ajustes de marca do topo da home (Nelson 19/08/2026) ══
   Carregado por `Tema::estiloProprioUrl()`. Vive em
   `storage/app/public/marca/estilo.css`, então sobrevive à promoção e não
   toca no praticshop nem no art7.

   Por que aqui, e não na folha geral: cada regra abaixo depende de algo que é
   DESTA marca — a cor do botão, o comprimento do título, o tamanho da coluna.
   Mudá-las na folha comum mexeria nas outras duas instalações sem ninguém
   pedir. Ver o cabeçalho de `Tema::estiloProprioUrl` para o preço de usar
   este arquivo (CSS solto acumula; o que der certo aqui deve virar
   configuração de verdade depois).

   ── 🚨 POR QUE OS SELETORES SÃO MAIS ESPECÍFICOS DO QUE PARECEM PRECISAR ──

   O docblock de `estiloProprioUrl` diz "carregado DEPOIS de tudo", e isso
   vale para o `<head>` — mas a home põe o CSS do topo num `<style>` dentro de
   `@section('cabecalho')`, que o layout rende no `<body>` (`layouts/site`
   linha 51). Ou seja: o `<style>` da home vem DEPOIS deste arquivo no
   documento e ganha no desempate por ordem.

   Por isso cada regra abaixo qualifica o seletor com o container
   (`.ps-cabecalho`, `.ps-abertura`) — dois níveis batem um, e a regra passa a
   ganhar por ESPECIFICIDADE em vez de por ordem. Não é capricho: sem isso o
   arquivo carrega, a URL responde 200 e absolutamente nada muda na tela. */

/* ── 1. O botão "Sua Loja" com a letra do menu ────────────────────────────
   Nelson: *"Coloque a letra do botão 'Sua loja' menor, do mesmo tamanho e
   peso da fonte do menu do topo."* O menu é 1rem/500.

   🚨 ISTO SÓ PODE SER FEITO AQUI, e a razão está na folha geral: o
   `1.175rem/700` do `.ps-btn` existe para o texto passar como TEXTO GRANDE na
   WCAG AA, porque o laranja do PraticShop (#ff5e22) dá só 3,05:1 com branco —
   reprova como texto normal.

   O vermelho do Motorbox (#dc2626) dá 4,83:1, que passa em AA como texto
   NORMAL. Medi antes de encolher: aqui a fonte pode diminuir sem reprovar o
   contraste; na folha comum, não poderia. Se um dia a cor da marca clarear,
   esta regra tem de sair junto. */
.ps-cabecalho .ps-btn {
    font-size: 1rem;
    font-weight: 500;
    padding: .55rem 1rem;
}

@media (min-width: 1024px) {
    /* A folha geral sobe o botão para 1.05rem no computador; aqui ele
       acompanha o menu, que não muda de tamanho.

       SÓ o do cabeçalho: os dois botões grandes do fim do hero ("Quero ver os
       planos", "Quero ver a loja demo") são chamada para ação e continuam
       grandes — o pedido era sobre o "Sua Loja" do topo. */
    .ps-cabecalho .ps-btn { font-size: 1rem; }
}

/* ── 2. O título maior — NÃO está aqui, e isso é de propósito ────────────
   Nelson: *"Aumente o título 'Sua loja de veículos na internet'."*

   A primeira tentativa foi um `font-size` neste arquivo, e ele não fez
   absolutamente nada. O motivo está em `partials/tipografia-experimento-backlia`:

       h1, .ps-titulo { font-size: var(--ps-titulo-teto, 72px) !important; }

   Um `!important` que vence qualquer folha — o comentário lá registra que ele
   já tinha derrotado a folha de marca do Art7 do mesmo jeito silencioso.

   A alavanca certa é a VARIÁVEL, e ela já tem um lugar de verdade: a home lê
   `Configuracao::obter('home.hero_titulo_px')` e só cai na tabela por
   comprimento de texto quando não há valor gravado. Gravei **72px** no banco
   do Motorbox (era 62, o degrau para títulos de 31 a 40 caracteres).

   72 e não mais: medi de 62 a 84 nesta frase, e a partir de 76px "internet"
   quebra e o título vira TRÊS linhas, empurrando o resto do bloco.

   Fica registrado aqui porque é onde alguém vai procurar. */

/* ── 3. O subtítulo com a largura do título ───────────────────────────────
   Nelson: *"Deixe a largura do bloco que exibe o subtítulo mais largo, da
   mesma largura do div do título."*

   A folha geral prende o `.ps-texto` em `max-width: 510px` enquanto o título
   usa a coluna inteira (656px num monitor de 1400) — é o degrau que ele viu.
   `none` devolve a largura da coluna da grade, que é exatamente a do título.

   Só no computador: no celular a coluna é a tela inteira, e ali o limite de
   510px é o que segura a linha num comprimento legível. */
@media (min-width: 1024px) {
    .ps-abertura .ps-texto { max-width: none; }
}
