/* ==========================================================================
   Q1Store — superfície: SITE PÚBLICO
   --------------------------------------------------------------------------
   DONO: o agente que trabalha `app/Views/public/**` (a home e as páginas
   internas da marca `q1store.me`).

   POR QUE ESTE ARQUIVO EXISTE, E NÃO SÓ O `q1store-ds.css`

   O design system (`q1store-ds.css`) é a FUNDAÇÃO: tokens, tipografia, escala,
   e os componentes que valem em qualquer superfície da marca. Ele é lido por
   todos e escrito por ninguém durante o trabalho paralelo — quatro frentes
   (site público, painel, auth/onboarding, loja pública) escrevendo no mesmo
   arquivo ao mesmo tempo se atropelam, e o resultado é CSS perdido sem aviso.

   Então cada superfície tem o seu arquivo, carregado DEPOIS do DS. Aqui vive o
   que é específico do site público: composição de hero, grade de recursos,
   faixa de segmentos, mockups de aparelho, seções de marketing.

   REGRAS (as mesmas do DS, porque um sistema só existe se as partes o seguem):
     - todo valor vem de `var(--q1s-*)`; NUNCA hex dentro de uma regra;
     - se falta um token, crie o TOKEN, não o valor solto;
     - escopo: `body.site-q1store`;
     - sem `@import`, sem `url()` externo, sem CDN.

   Quando uma regra daqui se provar útil em mais de uma superfície, ela sobe
   para o `q1store-ds.css` — mas num passo único, feito de propósito, não por
   dois agentes ao mesmo tempo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 — Revestimento das seções COMPARTILHADAS (vocabulário `r5-*`).

   Por que isto existe em vez de uma view própria: a seção `contact` é usada
   por TRÊS marcas (rede5, net5 e q1store) e só carrega UM CSS — o da marca que
   está no ar. Se a view emitisse classes do Q1Store, as outras duas marcas
   renderizariam sem estilo. E se cada marca tivesse a sua view de contato,
   seriam três implementações do mesmo formulário para manter.

   Então o markup continua no vocabulário compartilhado (`r5-*`, estilizado
   pelo `rede5.css`), e este arquivo REVESTE — mesma estrutura, tinta da marca.
   É o mesmo padrão dos temas de loja: o `store-*` é o vocabulário, o
   `.store-theme-<slug>` é a tinta.

   Escopo: `body.site-q1store` — fora da marca, nada muda.
   -------------------------------------------------------------------------- */

/* Cartão de contato: superfície, borda e raio da marca.
 *
 * Nomes conferidos no DS: `--q1s-radius-card` (16px), `--q1s-shadow-1`.
 * Usar um nome que não existe é pior que não revestir — a regra inteira vira
 * no-op silencioso e a seção fica com metade do estilo, que é exatamente o
 * tipo de inconsistência que este arquivo existe para evitar.
 */
body.site-q1store .r5-contact-card {
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
}

/* Pastilha do ícone: do azul genérico para o primário da marca. */
body.site-q1store .r5-contact-item i {
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    border-radius: var(--q1s-radius-icon);
}

/* Rótulo pequeno: do cinza genérico para o texto secundário da marca. */
body.site-q1store .r5-contact-item h4 {
    color: var(--q1s-text-secondary);
}

/* Botão primário: do azul genérico para o primário da marca. */
body.site-q1store .r5-btn-primary {
    background: var(--q1s-primary);
    border-radius: var(--q1s-radius-control);
}

body.site-q1store .r5-btn-primary:hover,
body.site-q1store .r5-btn-primary:focus-visible {
    background: var(--q1s-primary-hover);
}

/* Título e lead da seção: tipografia da marca, sem trocar a estrutura. */
body.site-q1store .r5-title {
    font-family: var(--q1s-font-sans);
}

body.site-q1store .r5-lead {
    color: var(--q1s-text-secondary);
}