/* ============================================================================
   OQtem — site público
   ============================================================================

   Quarta versão. A terceira foi rejeitada com o comentário "cara de IA", e o
   diagnóstico estava certo. O que denunciava:

     - fundo escuro + monospace nos rótulos + seções numeradas 01/02/03
     - Inter como única família
     - uma palavra do título em gradiente
     - simetria perfeita: quatro cartões de mesmo tamanho, três itens cada
     - travessão em toda frase

   Esse conjunto virou o visual padrão de página gerada, e usá-lo hoje entrega
   a origem antes de qualquer texto ser lido. Nada disso sobrou aqui.

   ─── O que esta versão faz ─────────────────────────────────────────────────

   BRANCO E FRIO. A quarta versão usava creme com neutros amarronzados, e o
   resultado foi descrito como "pastel": nada saturado o bastante para mandar.
   Agora o fundo é branco puro e os cinzas desviam para o azul. Cinza frio lê
   como limpo; cinza quente lê como papel velho.

   UM ACENTO SATURADO. O laranja de preenchimento é o #ff8a00 do aplicativo,
   sem lavagem. Antes ele tinha sido escurecido para "combinar" com o creme, e
   combinar era justamente o problema.

   SERIFA NO DISPLAY. Fraunces, com os eixos SOFT e WONK ligados. É uma fonte
   com desenho reconhecível, não uma grotesca neutra. Vale metade do trabalho:
   o leitor percebe escolha, e escolha lê como gente.

   ASSIMETRIA DELIBERADA. Blocos de tamanhos diferentes, listas de tamanhos
   diferentes, alinhamento que não é sempre o mesmo. Grade perfeita é o
   comportamento padrão de quem gera, não de quem desenha.

   VERDE DO WHATSAPP NOS CTAs. Os botões levam para a conversa, então usam a
   cor da conversa. Laranja fica na marca e nos acentos.

   ─── O que continua ────────────────────────────────────────────────────────

     - Sem animação disparada por scroll (deixa bloco invisível quando o JS
       falha, e uma delas carregava na página de termos).
     - Mesma API de nomes de classe, para as outras seis views não quebrarem.
     - Contraste medido pela fórmula da WCAG, não estimado no olho.
   ========================================================================= */

:root {
    /* ── Fundo ───────────────────────────────────────────────────────────
       Branco, e frio.

       A versão anterior usava creme (#fbf8f4) com neutros amarronzados
       (#1a1714) e um laranja dessaturado (#f07f00). Os três juntos produziam
       o efeito "pastel": nada era saturado o bastante para mandar, e o preto
       puxava para marrom.

       Aqui o fundo é branco puro e os cinzas desviam para o AZUL, não para o
       bege. Cinza frio sobre branco lê como limpo; cinza quente lê como papel
       velho. É a diferença entre o vocabulário modernista e o artesanal. */
    --p-bg: #ffffff;
    --p-bg-2: #f4f6f8;
    --p-card: #ffffff;
    --p-line: #e3e7ec;
    --p-line-soft: #eef1f4;

    /* Quase preto, com uma gota de azul. 19.6:1 no branco, contra 17.9:1 do
       marrom que estava aqui — e a diferença aparece: o texto crava. */
    --p-ink: #0b0c0e;
    --p-ink-2: #4b5058;
    --p-ink-3: #6b7178;

    /* ── Laranja ─────────────────────────────────────────────────────────
       O de PREENCHIMENTO volta a ser o #ff8a00 do aplicativo, sem lavagem. Era
       #f07f00, escurecido para "combinar" com o creme — e combinar é
       exatamente o que produzia o pastel. Saturado, ele manda na página.

       O de TEXTO é o mais saturado que ainda passa em 4.5:1 nos TRÊS fundos
       onde ele aparece, não só no branco. Errei isso uma vez: otimizei para o
       branco (#b46100) e ele reprovou por 4.12:1 sobre o âmbar, que é o fundo
       de menor luminância dos três. Cálculo pelo pior caso, sempre. */
    --p-acc: #ff8a00;
    --p-acc-ink: #aa5c00;
    --p-acc-soft: #fff3e3;

    /* ── Verde da conversa ───────────────────────────────────────────────
       O tom oficial do WhatsApp é #25D366, claro demais para texto branco em
       cima (2.3:1). Este é o mesmo verde escurecido até passar, e mais vivo do
       que o da paleta anterior porque agora o fundo é branco e aguenta. */
    --p-wa: #12874a;
    --p-wa-hover: #0e6d3b;

    /* Canto quase reto. 18px no bloco grande era arredondamento de 2021, e
       arredondado + creme somava para o efeito macio que o cliente chamou de
       pastel. A régua reta lê como desenho, não como bolha. */
    --r-sm: 4px;
    --r: 6px;
    --r-lg: 10px;

    --max: 1160px;
    --ease: cubic-bezier(.2, .7, .3, 1);

    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--p-bg); }

body {
    margin: 0;
    background: var(--p-bg);
    color: var(--p-ink-2);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--p-acc-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--p-acc); color: #fff; }

/* Foco visível. O tema comprado apagava o outline sem repor nada. */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--p-ink);
    outline-offset: 3px;
    border-radius: 3px;
}

.oq-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.oq-wrap--narrow { max-width: 720px; }

/* ── Tipografia ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5 {
    font-family: var(--serif);
    margin: 0 0 .5em;
    color: var(--p-ink);
    font-weight: 600;
    text-wrap: balance;
}

/* ── Eixo óptico ─────────────────────────────────────────────────────────
   A Fraunces tem `opsz` de 9 a 144, e usar um valor só para tudo desperdiça
   a fonte. O desenho muda de verdade:

     opsz alto (display) — serifas finas, contraste forte entre traço grosso e
                           fino, formas mais elegantes. Certo em 80px, ilegível
                           em 16px.
     opsz baixo (texto)  — serifas robustas, contraste menor, espaçamento mais
                           aberto. Aguenta tamanho pequeno.

   Cada nível abaixo declara o seu. É a diferença entre usar uma fonte variável
   e só carregar uma fonte que por acaso é variável. */

h1 {
    font-size: clamp(2.7rem, 1.6rem + 4.6vw, 5.2rem);
    line-height: 1;
    letter-spacing: -.026em;
    font-weight: 600;
    font-variation-settings: "opsz" 120, "SOFT" 45, "WONK" 1;
}
h2 {
    font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
}
h3 {
    font-size: 1.26rem;
    line-height: 1.3;
    letter-spacing: -.008em;
    font-variation-settings: "opsz" 22, "SOFT" 25, "WONK" 0;
}

/* text-wrap: pretty impede a última linha do parágrafo de ficar com uma
   palavra só. Órfã é o defeito de composição que mais salta aos olhos, e o
   navegador resolve sozinho onde há suporte. */
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--p-ink); font-weight: 600; }

/* Entrelinha um pouco mais folgada que a do corpo: linha longa e comprida pede
   mais respiro entre linhas para o olho achar o começo da seguinte. */
.oq-lead {
    font-size: clamp(1.12rem, 1rem + .55vw, 1.38rem);
    line-height: 1.5;
    color: var(--p-ink-2);
    max-width: 52ch;
    letter-spacing: -.006em;
}
.oq-lead--center { margin-inline: auto; }

.oq-grad { color: var(--p-acc-ink); }

/* ── Rótulo de seção ─────────────────────────────────────────────────────
   Itálico serifado com uma régua curta ao lado. Sem número e sem monospace:
   os dois viraram assinatura de página gerada. A régua ancora o texto na
   margem e dá ao olho onde começar. */
.oq-num, .oq-tag {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.06rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--p-acc-ink);
    margin-bottom: 1.1rem;
    font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 1;
}
.oq-num::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--p-acc);
    flex: 0 0 auto;
}
.oq-tag--plain { color: var(--p-ink-3); }
.oq-section__head--center .oq-num { justify-content: center; }

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

.oq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 52px;
    padding: .8rem 1.6rem;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.02rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.oq-btn:hover { text-decoration: none; }
.oq-btn svg { flex: 0 0 auto; }

/* Verde da conversa: o botão leva para o WhatsApp, então tem a cor do
   WhatsApp. Branco sobre este verde dá 5.7:1. */
.oq-btn--primary { background: var(--p-wa); color: #fff; }
.oq-btn--primary:hover { background: var(--p-wa-hover); color: #fff; }

.oq-btn--ghost { background: transparent; color: var(--p-ink); border-color: var(--p-ink); }
/* Fundo branco atras do cartao escuro precisa de contorno claro. */
.oq-card--lead .oq-btn--ghost { border-width: 1px; }
.oq-btn--ghost:hover { background: var(--p-ink); color: var(--p-bg); }

.oq-btn--dark { background: var(--p-ink); color: var(--p-bg); }
.oq-btn--dark:hover { background: #000; color: #fff; }

.oq-btn--lg { min-height: 58px; padding: .95rem 1.9rem; font-size: 1.08rem; }

.oq-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; align-items: center; }
.oq-actions--center { justify-content: center; }

/* Link simples com seta, para quando um botão cheio seria demais.

   O sublinhado é um pseudo-elemento em vez de border-bottom porque assim pode
   crescer da esquerda no hover. Com border não dá para animar a origem. */
.oq-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--p-ink);
    padding-bottom: 3px;
}
.oq-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--p-acc);
    transform-origin: left;
    transition: transform .28s var(--ease);
}
.oq-link:hover { color: var(--p-acc-ink); text-decoration: none; }
/* Encolhe da direita e volta: o traço parece percorrer o texto. */
.oq-link:hover::after { animation: oq-underline .42s var(--ease); }
@keyframes oq-underline {
    0%   { transform: scaleX(1); transform-origin: right; }
    45%  { transform: scaleX(0); transform-origin: right; }
    55%  { transform: scaleX(0); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}
.oq-link svg { transition: transform .22s var(--ease); }
.oq-link:hover svg { transform: translateX(3px); }

/* ── Cabeçalho ───────────────────────────────────────────────────────────── */

/* rgba de BRANCO: aqui tinha ficado o creme da versão anterior (251,248,244)
   e o cabeçalho aparecia com um tom amarelado sobre a página branca. */
.oq-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--p-line); transition: box-shadow .25s var(--ease); }
/* Classe posta por JS ao rolar. Sem JS o cabeçalho só não ganha sombra. */
.oq-header.is-scrolled { box-shadow: 0 1px 14px rgba(11, 12, 14, .07); }
.oq-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 70px; }
.oq-header__logo img { height: 32px; width: auto; display: block; }

.oq-nav { display: none; align-items: center; gap: 1.6rem; margin: 0 auto; padding: 0; list-style: none; }
.oq-nav a { color: var(--p-ink-2); font-size: .98rem; padding: .3rem 0; border-bottom: 1.5px solid transparent; }
.oq-nav a:hover { color: var(--p-ink); text-decoration: none; border-color: var(--p-line); }
.oq-nav a.is-active { color: var(--p-ink); border-color: var(--p-acc); }

.oq-header__cta { display: none; }

.oq-burger { margin-left: auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 12px; border: 1.5px solid var(--p-ink); border-radius: var(--r-sm); background: transparent; cursor: pointer; }
.oq-burger span { display: block; height: 1.5px; background: var(--p-ink); }

#oq-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.oq-mobile-nav { display: none; padding: .5rem 0 1.5rem; border-top: 1px solid var(--p-line); background: var(--p-bg); }
#oq-menu-toggle:checked ~ .oq-mobile-nav { display: block; }
.oq-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.oq-mobile-nav a { display: block; padding: 1rem .25rem; color: var(--p-ink); font-size: 1.08rem; border-bottom: 1px solid var(--p-line-soft); }
.oq-mobile-nav a.is-active { color: var(--p-acc-ink); }

@media (min-width: 980px) {
    .oq-nav { display: flex; }
    .oq-header__cta { display: block; }
    .oq-burger { display: none; }
    .oq-mobile-nav { display: none !important; }
}

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

.oq-section { padding: clamp(4rem, 3rem + 5vw, 7.5rem) 0; }
.oq-section--tight { padding: clamp(2.5rem, 2rem + 2.5vw, 4rem) 0; }
.oq-section--soft { background: var(--p-bg-2); }
.oq-section--flush { padding-top: 0; }

.oq-section__head { max-width: 640px; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.oq-section__head--center { margin-inline: auto; text-align: center; }

.oq-rule { height: 1px; border: 0; margin: 0; background: var(--p-line); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.oq-hero { padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) 0 clamp(3rem, 2rem + 3vw, 5rem); }

/* Assimetria: o texto ocupa mais que a metade e a coluna direita fica menor e
   desalinhada para baixo. Duas colunas iguais é a solução automática. */
.oq-hero__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
@media (min-width: 980px) {
    .oq-hero__grid { grid-template-columns: 1.35fr .95fr; align-items: start; }
    .oq-hero__grid > :last-child { margin-top: 3.5rem; }
}

.oq-hero h1 { max-width: 13ch; }

.oq-hero__note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--p-line); font-size: .96rem; color: var(--p-ink-3); max-width: 48ch; }

/* ── Cartão ──────────────────────────────────────────────────────────────── */

.oq-card {
    display: flex;
    flex-direction: column;
    background: var(--p-card);
    border: 1px solid var(--p-line);
    border-radius: var(--r);
    padding: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* Sombra em duas camadas e deslocamento de 3px. Pouco, de propósito: o cartão
   precisa reagir ao mouse sem dar um pulo. */
.oq-card:hover {
    transform: translateY(-3px);
    border-color: #c8cfd6;
    box-shadow: 0 1px 2px rgba(11, 12, 14, .05), 0 10px 24px rgba(11, 12, 14, .08);
}
.oq-card h3 { margin-bottom: .5rem; }
.oq-card p { color: var(--p-ink-2); font-size: 1rem; }
.oq-card__foot { margin-top: auto; padding-top: 1.6rem; }
.oq-card__kicker { font-family: var(--serif); font-style: italic; font-size: 1.04rem; color: var(--p-acc-ink); margin-bottom: .9rem; font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 1; }
.oq-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--p-acc-soft); color: var(--p-acc-ink); margin-bottom: 1.2rem; flex: 0 0 auto; }

/* Cartão em destaque: maior, escuro, ocupa duas colunas onde couber. */
.oq-card--lead { background: var(--p-ink); border-color: var(--p-ink); color: rgba(255, 255, 255, .78); }
.oq-card--lead h3, .oq-card--lead h2, .oq-card--lead strong { color: #fff; }
.oq-card--lead p { color: rgba(255, 255, 255, .78); }
.oq-card--lead .oq-card__kicker { color: #ffb75e; }
.oq-card--lead .oq-list li { color: rgba(255, 255, 255, .78); }
.oq-card--lead .oq-list li::before { background: var(--p-acc); }
.oq-card--lead .oq-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.oq-card--lead .oq-btn--ghost:hover { background: #fff; color: var(--p-ink); border-color: #fff; }

/* Franquia alta à esquerda, dois cartões empilhados à direita, e o do lojista
   como faixa horizontal atravessando embaixo. A grade anterior (3 colunas com
   o primeiro em 2x2) deixava o quarto cartão sozinho na terceira linha com
   dois vãos vazios ao lado — dava para VER o buraco na página. Empilhar os
   três à direita também não serviu: sobrava um vazio preto dentro do cartão
   da franquia, que tem menos conteúdo que três cartões somados. */
@media (min-width: 900px) {
    .oq-offers { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.1rem; }
    .oq-offers > :first-child { grid-row: 1 / span 2; }
    .oq-offers > .oq-card--wide {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
    }
    .oq-card--wide .oq-card__foot { margin: 0; padding: 0; flex: 0 0 auto; }
    .oq-card--wide p { max-width: 58ch; }
}
.oq-offers { display: grid; gap: 1.1rem; }

/* ── Lista ───────────────────────────────────────────────────────────────── */

.oq-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.oq-list li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; color: var(--p-ink-2); font-size: 1rem; }
.oq-list li:last-child { margin-bottom: 0; }
.oq-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--p-acc); }

/* ── Linha alternada ─────────────────────────────────────────────────────── */

.oq-row { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 980px) {
    .oq-row { grid-template-columns: 1.1fr .9fr; }
    /* Inverte visualmente sem inverter no HTML: a ordem de leitura de quem usa
       leitor de tela continua texto → apoio. */
    .oq-row--flip > *:first-child { order: 2; }
    .oq-row--flip { grid-template-columns: .9fr 1.1fr; }
}

/* ── Split ───────────────────────────────────────────────────────────────── */

.oq-splitbar { display: flex; height: 64px; border-radius: var(--r-sm); overflow: hidden; font-size: .9rem; font-weight: 600; }
.oq-splitbar > div { display: flex; align-items: center; justify-content: center; padding: 0 .4rem; text-align: center; }
.oq-splitbar__a { background: var(--p-ink); color: #fff; flex: 72; }
/* Texto escuro nesta fatia: branco sobre o laranja dá 2.36:1. */
.oq-splitbar__b { background: var(--p-acc); color: var(--p-ink); flex: 18; }
.oq-splitbar__c { background: var(--p-acc-soft); color: var(--p-acc-ink); flex: 10; }

.oq-legend { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; margin-top: 1rem; font-size: .95rem; color: var(--p-ink-3); }
.oq-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.oq-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }

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

.oq-steps { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.oq-step h3 { margin-bottom: .35rem; }
.oq-step p { color: var(--p-ink-2); font-size: .98rem; margin: 0; }
/* Traço em vez de número: numerar quatro passos deixa a seção com cara de
   tutorial gerado. */
.oq-step::before { content: ""; display: block; width: 32px; height: 2px; background: var(--p-acc); margin-bottom: 1.1rem; }

/* ── Faixa ───────────────────────────────────────────────────────────────── */

.oq-band { background: var(--p-ink); color: rgba(255, 255, 255, .8); border-radius: var(--r-lg); padding: clamp(2.25rem, 1.8rem + 3vw, 3.75rem); }
.oq-band h2, .oq-band h3, .oq-band strong { color: #fff; }
.oq-band p { color: rgba(255, 255, 255, .8); }

/* ── Números ─────────────────────────────────────────────────────────────── */

.oq-stats { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.oq-stat { background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--r); padding: 2rem 1.2rem; }
.oq-stat__num { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3rem); font-weight: 600; color: var(--p-ink); line-height: 1; font-variation-settings: "SOFT" 40, "WONK" 1; }
.oq-stat__label { color: var(--p-ink-3); font-size: .95rem; margin-top: .6rem; }

/* ── Lojas ───────────────────────────────────────────────────────────────── */

.oq-stores { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.oq-stores img { height: 46px; width: auto; }

/* ── Perguntas ───────────────────────────────────────────────────────────── */

.oq-faq { max-width: 780px; }
.oq-faq details { border-bottom: 1px solid var(--p-line); padding: 1.4rem 0; }
/* <details> nativo: abre sem JS, e o conteúdo está no HTML mesmo fechado, então
   o buscador lê e o Ctrl+F acha. */
.oq-faq summary { cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 1.24rem; color: var(--p-ink); list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; font-variation-settings: "SOFT" 30, "WONK" 0; }
.oq-faq summary::-webkit-details-marker { display: none; }
.oq-faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.4rem; font-weight: 400; color: var(--p-acc-ink); line-height: 1; flex: 0 0 auto; }
.oq-faq details[open] summary::after { content: "–"; }
.oq-faq p { margin: .9rem 0 0; color: var(--p-ink-2); max-width: 64ch; }

/* ── Páginas de texto ────────────────────────────────────────────────────── */

.oq-page-head { padding: clamp(3.5rem, 2.8rem + 3.5vw, 6rem) 0 clamp(2rem, 1.6rem + 2vw, 3rem); border-bottom: 1px solid var(--p-line); }

/* 70ch é o limite em que a linha ainda é confortável. Texto legal é longo, e a
   largura decide se alguém lê. */
.oq-prose { max-width: 70ch; margin-inline: auto; color: var(--p-ink-2); font-size: 1.08rem; line-height: 1.75; }
.oq-prose h1, .oq-prose h2, .oq-prose h3, .oq-prose h4 { color: var(--p-ink); margin-top: 2.4em; }
.oq-prose > :first-child { margin-top: 0; }
.oq-prose h2 { font-size: 1.75rem; }
.oq-prose h3 { font-size: 1.3rem; }
.oq-prose ul, .oq-prose ol { padding-left: 1.35em; margin-bottom: 1.3em; }
.oq-prose li { margin-bottom: .55em; }
.oq-prose li::marker { color: var(--p-acc); }
.oq-prose a { text-decoration: underline; text-underline-offset: 3px; }
.oq-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.6em; font-size: .98rem; }
.oq-prose th, .oq-prose td { border: 1px solid var(--p-line); padding: .7rem .9rem; text-align: left; }
.oq-prose th { background: var(--p-bg-2); color: var(--p-ink); font-weight: 600; }
.oq-prose blockquote { margin: 1.7em 0; padding: .3em 0 .3em 1.4em; border-left: 3px solid var(--p-acc); color: var(--p-ink-2); font-style: italic; }

/* ── Contato ─────────────────────────────────────────────────────────────── */

/* margin-inline: auto centraliza o bloco. Sem ele o max-width limita a largura
   mas ancora tudo à esquerda, enquanto o cabeçalho da página está centralizado
   — e o desalinhamento fica evidente em tela larga. */
.oq-contact-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    max-width: 800px;
    margin-inline: auto;
}

/* Conteúdo centralizado dentro do cartão também, para acompanhar o título e o
   parágrafo da página. Alinhar à esquerda aqui deixaria duas caixas centradas
   com texto encostado na borda esquerda, que é o pior dos dois. */
.oq-contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .3rem;
    padding: 2.4rem 2rem;
    background: var(--p-card);
    border: 1px solid var(--p-line);
    border-radius: var(--r);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.oq-contact-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    border-color: #c8cfd6;
    box-shadow: 0 1px 2px rgba(11, 12, 14, .05), 0 10px 24px rgba(11, 12, 14, .08);
}
.oq-contact-card .oq-card__icon { margin-bottom: 1.1rem; }
.oq-contact-card__label { color: var(--p-ink-3); font-size: .95rem; margin-top: .4rem; }
/* break-word: e-mail e telefone não quebram sozinhos e estouram a caixa em
   telas estreitas. */
.oq-contact-card__value { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--p-ink); word-break: break-word; font-variation-settings: "SOFT" 30, "WONK" 0; }

/* ── Aviso ───────────────────────────────────────────────────────────────── */

.oq-notice { max-width: 640px; margin: 0 auto; text-align: center; padding: clamp(2.25rem, 1.8rem + 3vw, 3.75rem); background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--r-lg); }
.oq-notice__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--r-sm); background: var(--p-acc-soft); color: var(--p-acc-ink); margin-bottom: 1.5rem; }
.oq-notice .oq-actions { justify-content: center; }

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

.oq-footer { background: var(--p-ink); color: rgba(255, 255, 255, .68); padding: clamp(3rem, 2.5rem + 3vw, 5rem) 0 2rem; }
.oq-footer__grid { display: grid; gap: 2.75rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .oq-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
/* Sans, não a serifa itálica. O itálico serifado funciona como rótulo de seção
   no corpo da página, onde há espaço e ele é o único enfeite. No rodapé, com
   três colunas de links curtos, ele briga com o conteúdo. Aqui o título precisa
   sumir e deixar os links aparecerem. */
.oq-footer h5 {
    font-family: var(--sans);
    color: rgba(255, 255, 255, .55);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.oq-footer ul { list-style: none; margin: 0; padding: 0; }
.oq-footer li { margin-bottom: .75rem; }
.oq-footer a { color: rgba(255, 255, 255, .68); font-size: .98rem; }
.oq-footer a:hover { color: #fff; }
.oq-footer__logo img { height: 32px; width: auto; margin-bottom: 1.2rem; }
.oq-footer__about { max-width: 38ch; font-size: .98rem; color: rgba(255, 255, 255, .6); }
.oq-footer__social { display: flex; gap: .5rem; margin-top: 1.4rem; }
.oq-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .18); }
.oq-footer__social a:hover { border-color: #fff; }
.oq-footer__social img { width: 17px; height: 17px; }
.oq-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; color: rgba(255, 255, 255, .68); font-size: .98rem; }
.oq-footer__contact svg { flex: 0 0 auto; margin-top: .35rem; opacity: .5; }
.oq-footer__bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .92rem; color: rgba(255, 255, 255, .5); }

/* ── Botão flutuante do WhatsApp ─────────────────────────────────────────
   Só no celular. No desktop os CTAs da página já estão sempre a um scroll de
   distância; no telefone, não. E o telefone é onde a conversa acontece.

   Fica na direita porque é onde o polegar alcança em quem segura com uma mão
   só, que é a maioria. */

.oq-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.25rem;
    background: var(--p-wa);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(11, 12, 14, .24), 0 1px 3px rgba(11, 12, 14, .18);
}
.oq-float:hover { background: var(--p-wa-hover); color: #fff; text-decoration: none; }
.oq-float svg { flex: 0 0 auto; }

@media (min-width: 980px) { .oq-float { display: none; } }

/* Espaço no fim da página para o botão não cobrir a última linha do rodapé. */
@media (max-width: 979px) { .oq-footer__bottom { padding-bottom: 4.5rem; } }

/* ── Utilidades ──────────────────────────────────────────────────────────── */

/* O cabeçalho é sticky e cobriria o título ao pular por âncora. */
[id] { scroll-margin-top: 92px; }

.oq-skip { position: absolute; left: -9999px; top: 0; background: var(--p-ink); color: #fff; padding: .8rem 1.3rem; z-index: 999; font-weight: 600; }
.oq-skip:focus { left: 0; color: #fff; }

/* ── Movimento ───────────────────────────────────────────────────────────
   Duas famílias, com regras de segurança diferentes:

   1. ENTRADA DO HERO: CSS puro, roda no carregamento. Não depende de JS, então
      não existe o modo de falha "bloco invisível para sempre".

   2. REVELAÇÃO POR SCROLL: o estado escondido SÓ existe sob html.oq-js, e essa
      classe é posta pelo script DEPOIS de o IntersectionObserver ser criado
      com sucesso. JS ausente ou quebrado = página estática normal. É o que
      permite reintroduzir a técnica que o wow.js fazia da forma perigosa
      (escondia primeiro, revelava se desse tudo certo). */

@keyframes oq-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.oq-hero h1            { animation: oq-rise .65s var(--ease) both; }
.oq-hero .oq-lead      { animation: oq-rise .65s var(--ease) .1s both; }
.oq-hero .oq-actions   { animation: oq-rise .65s var(--ease) .18s both; }
.oq-hero .oq-hero__note{ animation: oq-rise .65s var(--ease) .26s both; }
.oq-hero__grid > div:last-child { animation: oq-rise .75s var(--ease) .3s both; }

/* A barra de split abre em três partes iguais e assenta nas proporções reais.
   flex-grow interpola como número, então a animação é só isto; onde o
   navegador não interpolar, a barra simplesmente já aparece pronta.

   fill BACKWARDS, não both: com both a animação continuaria mandando no
   flex-grow depois de terminar e o hover abaixo não conseguiria mexer. */
@keyframes oq-seg-a { from { flex-grow: 34; } }
@keyframes oq-seg-b { from { flex-grow: 33; } }
@keyframes oq-seg-c { from { flex-grow: 33; } }
.oq-splitbar__a { animation: oq-seg-a 1s var(--ease) .85s backwards; }
.oq-splitbar__b { animation: oq-seg-b 1s var(--ease) .85s backwards; }
.oq-splitbar__c { animation: oq-seg-c 1s var(--ease) .85s backwards; }

/* Passar o mouse numa fatia a alarga: a do OQtem é estreita demais para o
   rótulo respirar, e o convite ao toque diz que o desenho é de verdade, não
   um PNG. As outras encolhem sozinhas porque flex redistribui. */
.oq-splitbar > div { transition: flex-grow .4s var(--ease); }
.oq-splitbar__b:hover { flex-grow: 30; }
.oq-splitbar__c:hover { flex-grow: 22; }

html.oq-js .oq-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--d, 0s);
}
html.oq-js .oq-reveal.is-in { opacity: 1; transform: none; }

/* ── Passos em linha vertical ────────────────────────────────────────────
   Para a coluna de passos de "Como o dinheiro chega": pontos ligados por um
   fio. O fio diz "sequência" sem numerar (número em passo é o tique de
   tutorial gerado que saiu na terceira versão). */
.oq-steps--line .oq-step { position: relative; padding-left: 2.1rem; }
.oq-steps--line .oq-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: .4rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--p-acc);
    margin: 0;
}
.oq-steps--line .oq-step::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5rem;
    bottom: -2rem;
    width: 2px;
    background: var(--p-line);
}
.oq-steps--line .oq-step:last-child::after { display: none; }

/* ── Cabeçalho de seção com ação ─────────────────────────────────────────
   Título à esquerda, botão à direita, alinhados pela base. Tira o CTA da
   linha solta lá embaixo e fecha o vazio que ficava à direita do título. */
@media (min-width: 900px) {
    .oq-section__head--row {
        max-width: none;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2.5rem;
    }
    .oq-section__head--row > div:first-child { max-width: 640px; }
    .oq-section__head--row .oq-btn { margin-bottom: .35rem; }
}

/* ── Faixa em duas colunas + recibo ──────────────────────────────────────
   A faixa escura do cashback tinha metade direita vazia. Agora o texto fica à
   esquerda e um recibo ilustrativo à direita mostra o saldo sendo abatido —
   cashback explicado com uma conta de padaria, não com um parágrafo a mais. */
@media (min-width: 900px) {
    .oq-band--split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
}

.oq-receipt {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r);
    padding: 1.5rem 1.6rem;
    font-size: 1rem;
}
.oq-receipt__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .55rem 0;
    color: rgba(255, 255, 255, .75);
}
.oq-receipt__row + .oq-receipt__row { border-top: 1px dashed rgba(255, 255, 255, .18); }
.oq-receipt__row--total {
    color: #fff;
    font-weight: 600;
    font-size: 1.12rem;
    border-top: 1px solid rgba(255, 255, 255, .35) !important;
    margin-top: .3rem;
    padding-top: .9rem;
}
.oq-receipt__back { color: #7ee2a8; }
.oq-receipt__note { margin-top: 1rem; font-size: .88rem; color: rgba(255, 255, 255, .5); }
/* Etiqueta de escopo no recibo: diz DE QUEM é o cashback antes de qualquer
   número. Sem ela a faixa deixava entender que todo modelo devolvia dinheiro,
   quando o programa é do marketplace OQtem. */
.oq-receipt__tag {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #ffb75e;
    border: 1px solid rgba(255, 183, 94, .45);
    border-radius: 999px;
    padding: .28rem .75rem;
    margin-bottom: 1.1rem;
}

/* O rótulo de seção dentro da faixa escura precisa da variante clara. */
.oq-band .oq-num { color: #ffb75e; }

/* ── Cidades no ar ───────────────────────────────────────────────────────
   Prova de existência logo depois do hero: nomes de cidade em serifa grande.
   Não é métrica inflada nem logo de cliente inventado, é onde a operação
   roda. Para quem avalia franquia, "já funciona em cidades como a minha" é o
   argumento inteiro. */
.oq-cities { padding: 1.9rem 0; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); }
.oq-cities__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 2.2rem; }
.oq-cities__label {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--p-ink-3);
    font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 1;
}
.oq-cities__name {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem);
    font-weight: 600;
    color: var(--p-ink);
    font-variation-settings: "opsz" 30, "SOFT" 35, "WONK" 1;
}
/* O número fica na outra ponta da régua: cidades dizem ONDE, o contador diz
   QUANTO. Empurrado com margin-left:auto no desktop; no celular a linha
   quebra e ele desce naturalmente. */
.oq-cities__stat { color: var(--p-ink-3); font-size: 1rem; }
@media (min-width: 900px) { .oq-cities__stat { margin-left: auto; } }
.oq-cities__stat strong {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem);
    font-weight: 600;
    color: var(--p-ink);
    font-variation-settings: "opsz" 30, "SOFT" 35, "WONK" 1;
    margin-right: .35rem;
}

.oq-cities__name + .oq-cities__name { position: relative; }
.oq-cities__name + .oq-cities__name::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--p-acc);
    transform: translateY(-50%);
}

/* ── Próximos passos no cartão escuro ────────────────────────────────────
   Responde "e se eu chamar, o que acontece?" antes do botão — a pergunta que
   segura o clique. De quebra ocupa o vão que sobrava entre a lista e o
   rodapé do cartão. */
.oq-next { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.oq-next__label {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: #ffb75e;
    margin-bottom: .9rem;
    font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 1;
}
.oq-next__row { display: flex; align-items: baseline; gap: .8rem; padding: .4rem 0; color: rgba(255, 255, 255, .78); font-size: .98rem; }
.oq-next__row::before { content: ""; width: 18px; height: 2px; background: var(--p-acc); flex: 0 0 auto; transform: translateY(-4px); }

/* ── Cartão inteiro clicável ─────────────────────────────────────────────
   O pseudo-elemento estica a área do link "Ver detalhes" sobre o cartão
   todo. Quem mira no cartão acerta; leitor de tela continua ouvindo um link
   com nome decente. */
.oq-card { position: relative; }
.oq-card__stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ── Comparador Start / Leeva / Pro ──────────────────────────────────────
   Três cartões que começam pelo PROBLEMA ("falta o canal de venda"), não
   pelo produto. Nas páginas de produto, o cartão da página atual ganha a
   borda laranja e a etiqueta "você está aqui" — quem caiu na página errada
   se acha em um olhar. */
.oq-compare { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .oq-compare { grid-template-columns: repeat(3, 1fr); } }

.oq-card--ativo { border-color: var(--p-acc); box-shadow: 0 0 0 1px var(--p-acc); }
.oq-compare__voce {
    display: inline-block;
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--p-acc-ink);
    background: var(--p-acc-soft);
    border-radius: 999px;
    padding: .25rem .7rem;
    margin-bottom: .9rem;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────
   A resposta desliza ao abrir. Animar a altura de <details> pede JS; o fade
   com subida dá a mesma sensação de resposta e custa uma linha. */
.oq-faq details[open] > p { animation: oq-rise .35s var(--ease); }
.oq-faq summary { transition: color .15s var(--ease); }
.oq-faq summary:hover { color: var(--p-acc-ink); }

/* Quem pede menos movimento no sistema não recebe transição nenhuma — e os
   blocos de revelação ficam visíveis desde o início. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    html.oq-js .oq-reveal { opacity: 1; transform: none; }
}