/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   §2 — Fidelidade ao mockup do dono (home, recursos, planos, para quem é,
   como começar).

   O mockup tem o hero NAVY com brilho azul (não o azul liso), o destaque do
   título em azul claro, botões em PÍLULA, cabeçalho em uma linha com
   "Entrar" + "Começar grátis", faixa final navy e rodapé legível. O raio
   menor dos botões vale para o PAINEL; o site público mantém a pílula.
   -------------------------------------------------------------------------- */

body.site-q1store {
    --q1s-hero-bg: #061546;
    --q1s-hero-glow-1: rgba(32, 98, 255, 0.55);
    --q1s-hero-glow-2: rgba(70, 60, 255, 0.35);
    --q1s-hl-bright: #3a86ff;
    --q1s-btn-radius-site: var(--q1s-radius-pill);
}

/* Botões do site público: pílula (o painel usa o raio do input). */
body.site-q1store .q1s-btn,
body.site-q1store .r5-btn,
body.site-q1store .btn {
    border-radius: var(--q1s-btn-radius-site);
}

/* Cabeçalho: uma linha só, links menores, ações à direita sem quebrar. */
body.site-q1store .r5-header .r5-nav a,
body.site-q1store .r5-header nav a {
    white-space: nowrap;
}

body.site-q1store .r5-header-actions {
    flex-wrap: nowrap;
}

body.site-q1store .r5-header-actions .r5-btn {
    white-space: nowrap;
    padding: 0.5rem 1.15rem;
    font-size: 0.875rem;
}

/* Hero navy com brilho azul à direita e embaixo. */
body.site-q1store .r5-hero-store {
    background:
        radial-gradient(ellipse 45% 55% at 78% 40%, var(--q1s-hero-glow-1) 0, transparent 100%),
        radial-gradient(ellipse 30% 40% at 94% 45%, var(--q1s-hero-glow-2) 0, transparent 100%),
        linear-gradient(180deg, #050f33 0%, var(--q1s-hero-bg) 100%);
}

body.site-q1store .r5-hero-store .q1s-hero__eyebrow {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Destaque do título: azul brilhante (não amarelo); "QR" no mesmo tom. */
body.site-q1store .q1s-hero__hl-accent,
body.site-q1store .q1s-hero__hl-qr {
    color: var(--q1s-hl-bright);
    background: linear-gradient(90deg, #3a86ff 0%, #6aa8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.site-q1store .r5-hero-store h1 {
    color: #ffffff;
}

/* Botão secundário do hero: contorno branco, fundo transparente. */
body.site-q1store .r5-hero-store .q1s-btn--outline-light,
body.site-q1store .r5-hero-store .q1s-btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

/* Botão primário do hero: azul vivo com leve brilho, como no mockup. */
body.site-q1store .r5-hero-store .q1s-btn:not(.q1s-btn--outline-light):not(.q1s-btn--ghost) {
    background: #0a54e8;
    border-color: #0a54e8;
    color: #ffffff;
    box-shadow: 0 8px 24px -8px rgba(10, 84, 232, 0.8);
}

/* Faixa final navy: título e texto legíveis sobre o fundo escuro. */
body.site-q1store .q1s-banner {
    background:
        radial-gradient(50% 120% at 85% 50%, rgba(32, 98, 255, 0.55) 0, transparent 70%),
        linear-gradient(90deg, #07143f 0%, #0b2a8f 100%);
}

body.site-q1store .q1s-banner h2,
body.site-q1store .q1s-banner .q1s-banner__title {
    color: #ffffff;
}

body.site-q1store .q1s-banner .q1s-banner__text {
    color: rgba(255, 255, 255, 0.85);
}

/* Rodapé: links claros sobre o navy (estavam no azul do link e sumiam). */
body.site-q1store .r5-footer {
    background: #050f33;
}

body.site-q1store .r5-footer a,
body.site-q1store .r5-footer li a {
    color: rgba(255, 255, 255, 0.78);
}

body.site-q1store .r5-footer a:hover,
body.site-q1store .r5-footer a:focus-visible {
    color: #ffffff;
}

body.site-q1store .r5-footer h6 {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}

/* Cabeçalho do mockup: links compactos em cinza-azulado, ações menores. */
body.site-q1store .r5-header .r5-nav a {
    color: #1b2559;
    font-size: 0.8rem;
    padding: 0.35rem 0.55rem;
}

body.site-q1store .r5-header .r5-nav a:hover {
    color: var(--q1s-primary);
    background: transparent;
}

body.site-q1store .r5-header-actions .r5-btn-ghost {
    background: #ffffff;
    border: 1px solid var(--q1s-border);
    color: #0b1436;
}

body.site-q1store .r5-header-actions .r5-btn {
    padding: 0.45rem 1.1rem;
    font-size: 0.8rem;
}

body.site-q1store .r5-header nav > a:first-child::after {
    height: 24px;
}

/* O cabeçalho usa a mesma largura e o mesmo respiro do conteúdo (o container
   do Bootstrap era mais estreito e o logo não alinhava com o hero). */
body.site-q1store .r5-header > .container {
    max-width: var(--q1s-container);
    padding-inline: var(--q1s-gutter);
}

/* Chips do hero: pílula azul-escura com texto branco, como no mockup. */
body.site-q1store .r5-hero-store .q1s-hero-chip {
    background: rgba(8, 28, 110, 0.88);
    color: #ffffff;
    border: 1px solid rgba(120, 160, 255, 0.45);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

/* Checagens do hero em duas colunas que não quebram a frase. */
body.site-q1store .r5-hero-store .q1s-hero__checks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem 2rem;
}

@media (min-width: 576px) {
    body.site-q1store .r5-hero-store .q1s-hero__checks {
        grid-template-columns: max-content max-content;
    }

    body.site-q1store .r5-hero-store .q1s-hero__checks .q1s-checklist__item {
        white-space: nowrap;
    }
}

/* O brilho laranja do `.r5-hero` compartilhado não existe no mockup. */
body.site-q1store .r5-hero-store::after {
    display: none;
}

/* Recursos da home: texto à esquerda, grade de cards (3 por linha) à direita. */
body.site-q1store .q1s-features-side {
    display: grid;
    gap: var(--q1s-space-7);
    align-items: start;
}

@media (min-width: 992px) {
    body.site-q1store .q1s-features-side {
        grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr);
        gap: var(--q1s-space-8);
    }

    body.site-q1store .q1s-features-side__head {
        padding-top: var(--q1s-space-4);
    }

    body.site-q1store .q1s-features-side .q1s-lead {
        font-size: var(--q1s-fs-small);
    }
}

/* Rodapé: o DS pinta todo `a` de azul-link; sobre o navy isso some. A
   especificidade acompanha a regra do DS para vencê-la sem `!important`. */
body.site-q1store .r5-footer a:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]) {
    color: rgba(255, 255, 255, 0.78);
}

body.site-q1store .r5-footer a:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]):hover {
    color: #ffffff;
}

body.site-q1store .r5-footer > .container {
    max-width: var(--q1s-container);
    padding-inline: var(--q1s-gutter);
}

/* Para quem é: título à esquerda, cartões de segmento à direita (como no
   mockup), cada um com o miniatura, o nome e uma seta redonda. */
body.site-q1store .q1s-seg-side {
    display: grid;
    gap: var(--q1s-space-7);
    align-items: center;
}

@media (min-width: 992px) {
    body.site-q1store .q1s-seg-side {
        grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
        gap: var(--q1s-space-8);
    }
}

body.site-q1store .q1s-seg-side .q1s-seg-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
    gap: var(--q1s-space-3);
    overflow: visible;
    margin: 0;
    padding: 0;
}

body.site-q1store .q1s-seg-side .q1s-seg {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--q1s-space-3);
    min-width: 0;
    padding: var(--q1s-space-4);
}

body.site-q1store .q1s-seg-side .q1s-seg__label {
    font-size: var(--q1s-fs-caption);
    line-height: 1.3;
    white-space: normal;
}

body.site-q1store .q1s-seg__go {
    display: none;
}

body.site-q1store .q1s-seg-side .q1s-seg__go {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--q1s-border);
    color: var(--q1s-text-secondary);
    font-size: 0.7rem;
}

/* Faixa final: largura cheia, navy com brilho, três colunas (texto, botões,
   pontos) como no mockup. */
body.site-q1store .q1s-section--cta {
    padding: 0;
    background:
        radial-gradient(ellipse 40% 140% at 92% 50%, rgba(32, 98, 255, 0.55) 0, transparent 100%),
        linear-gradient(90deg, #07143f 0%, #0a2480 100%);
}

body.site-q1store .q1s-section--cta .q1s-banner {
    background: transparent;
    border-radius: 0;
    padding: var(--q1s-space-7) 0;
    display: grid;
    gap: var(--q1s-space-6);
    align-items: center;
}

@media (min-width: 992px) {
    body.site-q1store .q1s-section--cta .q1s-banner {
        grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 0.9fr);
    }
}

body.site-q1store .q1s-section--cta .q1s-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-3);
}

@media (min-width: 992px) {
    body.site-q1store .q1s-seg-side .q1s-seg-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body.site-q1store .q1s-section--cta .q1s-banner__title {
    font-size: var(--q1s-fs-h3, 1.6rem);
    line-height: 1.2;
}

/* Seções no vocabulário `r5-*` (planos, comparativo, contato) na mesma largura
   do resto do site. */
body.site-q1store main .container {
    max-width: var(--q1s-container);
    padding-inline: var(--q1s-gutter);
}

/* Cartões de plano: seis em linha, compactos, como no mockup. */
@media (min-width: 992px) {
    body.site-q1store .r5-plan {
        padding: var(--q1s-space-4);
    }

    body.site-q1store .r5-plan-name { font-size: 1rem; }
    body.site-q1store .r5-plan-price { font-size: 1.05rem; }
    body.site-q1store .r5-plan-text,
    body.site-q1store .r5-plan-list li { font-size: 0.72rem; }
    body.site-q1store .r5-plan-list { gap: 0.4rem; }
    body.site-q1store .r5-plan .r5-btn { font-size: 0.72rem; padding: 0.45rem 0.5rem; }
    body.site-q1store .r5-plan-badge { font-size: 0.55rem; padding: 0.15rem 0.5rem; }
}

body.site-q1store .r5-plan-price { white-space: nowrap; }
body.site-q1store .r5-plan-list { align-content: start; justify-content: flex-start; }

/* Cartões de segmento/resultado (`store_cards`): ícone colorido em tile. */
body.site-q1store .q1s-cards__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--q1s-space-3);
    border-radius: 50%;
    font-size: 1.15rem;
    color: #ffffff;
    background: var(--q1s-primary);
}

body.site-q1store .q1s-cards__icon--orange { background: #ff7a1a; }
body.site-q1store .q1s-cards__icon--red { background: #e5484d; }
body.site-q1store .q1s-cards__icon--green { background: #1faa59; }
body.site-q1store .q1s-cards__icon--teal { background: #0fa3a3; }
body.site-q1store .q1s-cards__icon--purple { background: #7a4dff; }
body.site-q1store .q1s-cards__icon--pink { background: #e5408a; }
body.site-q1store .q1s-cards__icon--dark { background: #2a3350; }

/* Passo a passo: sete cartões em linha, número em círculo. */
body.site-q1store .q1s-steps-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--q1s-space-3);
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

body.site-q1store .q1s-step-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.site-q1store .q1s-step-card .q1s-card__body { flex: 1; }
body.site-q1store .q1s-step-card .q1s-card__title { font-size: var(--q1s-fs-small); }
body.site-q1store .q1s-step-card .q1s-card__text { font-size: var(--q1s-fs-caption); }

body.site-q1store .q1s-step-card__num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--q1s-space-3);
    border-radius: 50%;
    background: var(--q1s-primary);
    color: #ffffff;
    font-weight: 700;
}

body.site-q1store .q1s-step-card__icon {
    display: inline-grid;
    place-items: center;
    margin-top: var(--q1s-space-3);
    width: 40px;
    height: 40px;
    border-radius: var(--q1s-radius-icon);
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: 1.2rem;
}

body.site-q1store .q1s-step-card__benefit {
    margin: 0;
    padding: var(--q1s-space-3);
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: var(--q1s-fs-caption);
    font-weight: 600;
    text-align: center;
}

@media (min-width: 992px) {
    body.site-q1store .q1s-steps-row {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: var(--q1s-space-2);
    }
}

body.site-q1store .q1s-step-card {
    padding: 0;
}

body.site-q1store .q1s-step-card .q1s-card__body {
    padding: var(--q1s-space-3);
}

body.site-q1store .q1s-step-card .q1s-card__title { overflow-wrap: anywhere; }

/* ==========================================================================
   §3 — Imagens recortadas dos mockups, Integrações, Blog, Ajuda e Contato
   ========================================================================== */

/* Foto/ilustração do hero (recorte do mockup): as bordas somem no fundo navy. */
body.site-q1store .q1s-hero-photo {
    display: block;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    height: auto;
    -webkit-mask-image: radial-gradient(ellipse 72% 78% at 52% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 78% at 52% 50%, #000 55%, transparent 100%);
}

/* Cartões de recurso com foto. */
body.site-q1store .q1s-resource__photo {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

/* Cartões de segmento com foto em faixa, badge circular sobreposto. */
body.site-q1store .q1s-cards__item--photo {
    padding: 0;
    overflow: hidden;
}

body.site-q1store .q1s-cards__photo {
    display: block;
    width: 100%;
    aspect-ratio: 245 / 64;
    object-fit: cover;
}

body.site-q1store .q1s-cards__item--photo .q1s-card__body {
    position: relative;
    padding-top: var(--q1s-space-3);
}

body.site-q1store .q1s-cards__item--photo .q1s-cards__icon {
    margin-top: -1.6rem;
    border: 3px solid #ffffff;
    box-shadow: var(--q1s-shadow-2);
}

/* Integrações ---------------------------------------------------------- */
body.site-q1store .q1s-int-bar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-3);
    justify-content: center;
    margin-top: -1.6rem;
    padding: var(--q1s-space-3) var(--q1s-space-4);
    background: var(--q1s-surface);
    border-radius: var(--q1s-radius-banner);
    box-shadow: var(--q1s-shadow-3);
    max-width: 780px;
}

body.site-q1store .q1s-int-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-2);
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-pill);
    font-size: var(--q1s-fs-caption);
    color: var(--q1s-text-primary);
    text-decoration: none;
}

body.site-q1store .q1s-int-bar__item.is-active {
    background: var(--q1s-primary);
    border-color: var(--q1s-primary);
    color: #ffffff;
}

body.site-q1store .q1s-int-group {
    margin-bottom: var(--q1s-space-6);
    padding: var(--q1s-space-4);
    background: var(--q1s-surface-alt);
    border-radius: var(--q1s-radius-card);
}

body.site-q1store .q1s-int-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-3);
    margin-bottom: var(--q1s-space-4);
}

body.site-q1store .q1s-int-group__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-primary);
    color: #ffffff;
}

body.site-q1store .q1s-int-group__title { margin: 0; font-size: var(--q1s-fs-h3); }
body.site-q1store .q1s-int-group__lead { margin: 0; flex: 1; font-size: var(--q1s-fs-caption); color: var(--q1s-text-secondary); }
body.site-q1store .q1s-int-group__count { font-size: var(--q1s-fs-caption); font-weight: 600; color: var(--q1s-primary); }

body.site-q1store .q1s-int-grid {
    display: grid;
    gap: var(--q1s-space-3);
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

body.site-q1store .q1s-int-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--q1s-space-2);
    padding: var(--q1s-space-4) var(--q1s-space-3);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    text-align: center;
}

body.site-q1store .q1s-int-card__logo {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--q1s-radius-icon);
    font-size: 1.4rem;
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
}

body.site-q1store .q1s-int-card__logo--green { background: #e3f7ec; color: #1faa59; }
body.site-q1store .q1s-int-card__logo--pink { background: #fde7f0; color: #e5408a; }
body.site-q1store .q1s-int-card__logo--orange { background: #fff0e0; color: #ff7a1a; }

body.site-q1store .q1s-int-card__name { margin: 0; font-size: var(--q1s-fs-small); }
body.site-q1store .q1s-int-card__text { margin: 0; flex: 1; font-size: var(--q1s-fs-caption); color: var(--q1s-text-secondary); }

body.site-q1store .q1s-int-status {
    margin-top: var(--q1s-space-2);
    padding: 0.2rem 1rem;
    border-radius: var(--q1s-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
}

body.site-q1store .q1s-int-status--available { background: #e3f7ec; color: #12864a; }
body.site-q1store .q1s-int-status--beta { background: #e4efff; color: #0a54e8; }
body.site-q1store .q1s-int-status--soon { background: #fff0e0; color: #c25b00; }

body.site-q1store .q1s-int-custom {
    display: grid;
    gap: var(--q1s-space-5);
    align-items: center;
    padding: var(--q1s-space-6);
    border-radius: var(--q1s-radius-banner);
    color: #ffffff;
    background: linear-gradient(90deg, #07143f 0%, #0a2480 100%);
}

@media (min-width: 992px) {
    body.site-q1store .q1s-int-custom { grid-template-columns: 1fr 1.2fr auto; }
}

body.site-q1store .q1s-int-custom__eyebrow { margin: 0; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
body.site-q1store .q1s-int-custom__title { margin: 0; font-size: var(--q1s-fs-h3); color: #ffffff; }
body.site-q1store .q1s-int-custom__text { margin: 0 0 var(--q1s-space-3); font-size: var(--q1s-fs-caption); opacity: 0.9; }
body.site-q1store .q1s-int-custom__points { display: flex; flex-wrap: wrap; gap: var(--q1s-space-3); margin: 0; padding: 0; list-style: none; font-size: var(--q1s-fs-caption); }

/* Blog ------------------------------------------------------------------- */
body.site-q1store .q1s-blog-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-3);
    margin-top: -1.6rem;
    position: relative;
    z-index: 2;
    padding: var(--q1s-space-4);
    background: var(--q1s-surface);
    border-radius: var(--q1s-radius-banner);
    box-shadow: var(--q1s-shadow-3);
}

body.site-q1store .q1s-blog-bar__search {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-2);
    flex: 1 1 16rem;
    padding: 0 var(--q1s-space-3);
    background: var(--q1s-surface-alt);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
}

body.site-q1store .q1s-blog-bar__input { flex: 1; min-height: 40px; border: 0; background: transparent; outline: none; font: inherit; }
body.site-q1store .q1s-blog-bar__cats { display: flex; flex-wrap: wrap; gap: var(--q1s-space-2); }

body.site-q1store .q1s-blog-chip,
body.site-q1store .q1s-help-chip {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-pill);
    font-size: var(--q1s-fs-caption);
    background: var(--q1s-surface);
    color: var(--q1s-text-primary);
    text-decoration: none;
}

body.site-q1store .q1s-blog-chip.is-active { background: var(--q1s-primary); border-color: var(--q1s-primary); color: #ffffff; }

body.site-q1store .q1s-blog-featured {
    display: grid;
    margin-bottom: var(--q1s-space-7);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    overflow: hidden;
}

@media (min-width: 992px) {
    body.site-q1store .q1s-blog-featured { grid-template-columns: 0.9fr 1.1fr; }
}

body.site-q1store .q1s-blog-featured__img { width: 100%; height: 100%; object-fit: cover; }
body.site-q1store .q1s-blog-featured__body { padding: var(--q1s-space-6); align-self: center; }
body.site-q1store .q1s-blog-featured__tags { display: flex; gap: var(--q1s-space-3); align-items: center; margin: 0 0 var(--q1s-space-3); }
body.site-q1store .q1s-blog-featured__flag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #c25b00; }
body.site-q1store .q1s-blog-featured__title { font-size: var(--q1s-fs-h3); margin: 0 0 var(--q1s-space-3); }
body.site-q1store .q1s-blog-featured__text { color: var(--q1s-text-secondary); }

body.site-q1store .q1s-blog-tag {
    display: inline-block;
    padding: 0.15rem 0.8rem;
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: 0.7rem;
    font-weight: 600;
}

body.site-q1store .q1s-blog-tag--float { position: absolute; left: var(--q1s-space-3); top: var(--q1s-space-3); background: #ffffff; border: 1px solid var(--q1s-primary); }

body.site-q1store .q1s-blog-soon {
    display: inline-block;
    padding: 0.15rem 0.8rem;
    border-radius: var(--q1s-radius-pill);
    background: #fff0e0;
    color: #c25b00;
    font-size: 0.7rem;
    font-weight: 600;
}

body.site-q1store .q1s-blog-head { margin-bottom: var(--q1s-space-4); }
body.site-q1store .q1s-blog-head__title { margin: 0; font-size: var(--q1s-fs-h3); }

body.site-q1store .q1s-blog-grid {
    display: grid;
    gap: var(--q1s-space-4);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

body.site-q1store .q1s-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    overflow: hidden;
}

body.site-q1store .q1s-blog-card__media { position: relative; }
body.site-q1store .q1s-blog-card__media img { display: block; width: 100%; aspect-ratio: 252 / 115; object-fit: cover; }
body.site-q1store .q1s-blog-card__body { display: flex; flex-direction: column; gap: var(--q1s-space-2); padding: var(--q1s-space-4); flex: 1; }
body.site-q1store .q1s-blog-card__title { margin: 0; font-size: var(--q1s-fs-small); }
body.site-q1store .q1s-blog-card__text { margin: 0; flex: 1; font-size: var(--q1s-fs-caption); color: var(--q1s-text-secondary); }

body.site-q1store .q1s-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-5);
    margin-top: var(--q1s-space-7);
    padding: var(--q1s-space-5);
    background: var(--q1s-primary-soft);
    border-radius: var(--q1s-radius-card);
}

body.site-q1store .q1s-newsletter__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--q1s-primary); color: #ffffff; font-size: 1.5rem; }
body.site-q1store .q1s-newsletter__text { flex: 1 1 18rem; }
body.site-q1store .q1s-newsletter__eyebrow { margin: 0; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--q1s-primary); font-weight: 700; }
body.site-q1store .q1s-newsletter__title { margin: 0; font-size: var(--q1s-fs-h3); }
body.site-q1store .q1s-newsletter__sub { margin: 0; color: var(--q1s-text-secondary); font-size: var(--q1s-fs-caption); }

/* Ajuda ------------------------------------------------------------------ */
body.site-q1store .q1s-help-search { margin-top: -2.2rem; position: relative; z-index: 2; }
body.site-q1store .q1s-help-search__box {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-3);
    padding: 0 var(--q1s-space-4);
    background: #ffffff;
    border: 2px solid var(--q1s-primary);
    border-radius: var(--q1s-radius-control);
    box-shadow: var(--q1s-shadow-3);
    max-width: 38rem;
}

body.site-q1store .q1s-help-search__box input { flex: 1; min-height: 48px; border: 0; outline: none; background: transparent; font: inherit; }
body.site-q1store .q1s-help-search__popular { margin: var(--q1s-space-3) 0 0; font-size: var(--q1s-fs-caption); color: var(--q1s-text-secondary); }

body.site-q1store .q1s-help { display: grid; gap: var(--q1s-space-7); align-items: start; }
@media (min-width: 992px) { body.site-q1store .q1s-help { grid-template-columns: 0.32fr 1fr; } }

body.site-q1store .q1s-help__topics { display: grid; gap: 2px; padding: var(--q1s-space-3); background: var(--q1s-surface); border: 1px solid var(--q1s-border); border-radius: var(--q1s-radius-card); box-shadow: var(--q1s-shadow-2); }
body.site-q1store .q1s-help__topic { display: flex; align-items: center; gap: var(--q1s-space-3); padding: 0.6rem var(--q1s-space-3); border-radius: var(--q1s-radius-control); color: var(--q1s-text-primary); text-decoration: none; font-size: var(--q1s-fs-small); }
body.site-q1store .q1s-help__topic.is-active { background: var(--q1s-primary); color: #ffffff; }

body.site-q1store .q1s-help-acc { display: grid; gap: var(--q1s-space-3); margin-top: var(--q1s-space-5); }
body.site-q1store .q1s-help-acc__item { background: var(--q1s-surface); border: 1px solid var(--q1s-border); border-radius: var(--q1s-radius-card); padding: var(--q1s-space-3) var(--q1s-space-4); }
body.site-q1store .q1s-help-acc__item summary { display: flex; align-items: center; gap: var(--q1s-space-3); cursor: pointer; font-weight: 600; }
body.site-q1store .q1s-help-acc__item p { margin: var(--q1s-space-3) 0 0; padding: var(--q1s-space-3); background: var(--q1s-surface-alt); border-radius: var(--q1s-radius-control); color: var(--q1s-text-secondary); font-size: var(--q1s-fs-small); }
body.site-q1store .q1s-help-acc__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--q1s-primary-soft); color: var(--q1s-primary); font-size: var(--q1s-fs-caption); }
body.site-q1store .q1s-help-acc__item[open] .q1s-help-acc__num { background: var(--q1s-primary); color: #ffffff; }

body.site-q1store .q1s-help-channel { display: grid; gap: var(--q1s-space-2); }
body.site-q1store .q1s-help-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--q1s-space-5); margin-top: var(--q1s-space-6); padding: var(--q1s-space-6); background: var(--q1s-primary-soft); border-radius: var(--q1s-radius-card); }
body.site-q1store .q1s-help-contact__title { margin: 0; font-size: var(--q1s-fs-h3); }

/* Contato ---------------------------------------------------------------- */
body.site-q1store .q1s-contact { display: grid; gap: var(--q1s-space-7); align-items: start; }
@media (min-width: 992px) { body.site-q1store .q1s-contact { grid-template-columns: 1fr 1.1fr; } }

body.site-q1store .q1s-contact__channels { display: grid; gap: var(--q1s-space-3); }
body.site-q1store .q1s-channel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--q1s-space-4); padding: var(--q1s-space-4); background: var(--q1s-surface); border: 1px solid var(--q1s-border); border-radius: var(--q1s-radius-card); color: var(--q1s-text-primary); text-decoration: none; }
body.site-q1store .q1s-channel small, body.site-q1store .q1s-channel em { display: block; font-size: var(--q1s-fs-caption); color: var(--q1s-text-secondary); font-style: normal; }
body.site-q1store .q1s-channel em { color: var(--q1s-primary); font-weight: 600; }
body.site-q1store .q1s-channel .q1s-cards__icon { margin: 0; border-radius: var(--q1s-radius-icon); }

body.site-q1store .q1s-contact__form { padding: var(--q1s-space-6); background: var(--q1s-surface); border: 1px solid var(--q1s-border); border-radius: var(--q1s-radius-card); box-shadow: var(--q1s-shadow-2); }
body.site-q1store .q1s-contact__grid { display: grid; gap: var(--q1s-space-3) var(--q1s-space-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
body.site-q1store .q1s-contact__submit { width: 100%; justify-content: center; margin-top: var(--q1s-space-3); }
body.site-q1store .q1s-contact__safe { margin: var(--q1s-space-3) 0 0; text-align: center; font-size: var(--q1s-fs-caption); color: var(--q1s-text-secondary); }

/* Estados ativos de links: o DS pinta todo `a` de azul-link e a especificidade
   dele ganha de uma classe só; estas regras igualam a cadeia de :not(). */
body.site-q1store a.q1s-int-bar__item.is-active:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]),
body.site-q1store a.q1s-blog-chip.is-active:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]),
body.site-q1store a.q1s-help__topic.is-active:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]) {
    color: #ffffff;
}

body.site-q1store a.q1s-help__topic:not(.is-active):not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]),
body.site-q1store a.q1s-channel:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]) {
    color: var(--q1s-text-primary);
}

body.site-q1store .q1s-blog-card__body .q1s-blog-soon { align-self: flex-start; }
body.site-q1store .q1s-hero-photo {
    -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%);
}

body.site-q1store .q1s-contact__form form > .q1s-field,
body.site-q1store .q1s-contact__grid { margin-bottom: var(--q1s-space-4); }