/*
 * GBC Quiz — estilos do front.
 *
 * ---------------------------------------------------------------------------
 * COMO ESTE ARQUIVO SE DEFENDE DO TEMA
 * ---------------------------------------------------------------------------
 * 1. MOBILE-FIRST DE PROPÓSITO. O tema do site espalha `!important` em regras
 *    de desktop; se o nosso desktop também morasse na base e o mobile numa
 *    media query, qualquer `!important` nosso de desktop venceria o mobile.
 *    Aqui é o contrário: a BASE é o mobile e todo o desktop vive dentro de
 *    `@media (min-width: ...)`, que simplesmente não existe no celular.
 *    => Se você precisar mexer, mantenha essa direção.
 *
 * 2. ESPECIFICIDADE ALTA. Tudo é prefixado por `.gbcq-root`. O tema tem
 *    regras do tipo `.algum-wrapper label { display:block }` que derrubam
 *    seletor de classe única — por isso todo elemento nosso declara
 *    explicitamente `display`, `margin`, `padding`, `font` e `color`, mesmo
 *    quando o valor é o default do navegador.
 *
 * 3. NADA DE <label>/<input> nos cards. As opções são <button>. Além de
 *    resolver acessibilidade de graça (foco, Enter, role), foge da regra de
 *    `label` do tema que quebra layout de checkbox.
 *
 * 4. TODO botão declara :hover, :focus-visible e :active. Sem isso o tema
 *    pinta o estado ativo de rosa.
 *
 * ---------------------------------------------------------------------------
 * A DIREÇÃO VISUAL (por que o quiz deixou de ser "um widget colado no site")
 * ---------------------------------------------------------------------------
 * Camada 1 — ATMOSFERA SANGRADA. `.gbcq-root` não é mais um card: é um campo
 *   escuro que sangra de borda a borda da viewport. Isso conecta o quiz
 *   cromaticamente com o modal do Analista de Comportamento
 *   (rgba(26,18,70,.92)) e faz a seção pertencer à página em vez de flutuar
 *   dentro dela.
 *
 * Camada 2 — PALCO FLUTUANTE. `.gbcq-shell` alinha com a grade de 1140px do
 *   site e dispensa borda: sobre fundo escuro, branco + sombra profunda já
 *   separam. Hairline cinza sobre cinza claro é assinatura de iframe de
 *   terceiro — foi removido.
 *
 * Camada 3 — SEM FAIXA ROXA DUPLICADA. O site já tem um header roxo 200px
 *   acima; repetir a faixa aqui duplicava a identidade em vez de integrar (e
 *   ficava vazia na tela de resultado). No lugar entram um eyebrow pill e um
 *   trilho de progresso de 4px dentro do palco branco.
 *
 * COR COM INTENÇÃO: o lime `#c6e67a` significa **só** progresso e conquista
 *   (trilho de progresso, selo do card herói). Saiu dos chips de contagem e de
 *   motivo, onde competia com o significado sem carregar nenhum.
 *
 * CURVA DO SISTEMA: `cubic-bezier(0.23,1,0.32,1)` em toda entrada — é a mesma
 *   curva do modal do AC. É o que faz os dois parecerem da mesma casa. Saídas
 *   usam `cubic-bezier(0.4,0,1,1)` (sai rápido, não pede atenção).
 *
 * ---------------------------------------------------------------------------
 * CONTRATO COM O JS (assets/js/gbcq-quiz.js)
 * ---------------------------------------------------------------------------
 * Classes que o JS aplica e este arquivo estiliza/anima:
 *   .gbcq-root.is-opening / .is-open  — abertura cerimonial
 *   .gbcq-veil                        — véu roxo da abertura (criado no JS)
 *   .gbcq-stage.is-leaving / .is-entering
 *   [data-gbcq-view].is-out / .is-in
 *   .gbcq-option.is-picked / .is-dimmed
 *   .gbcq-options.is-cascading        — liga a cascata (só na 1ª pintura)
 *   .gbcq-result.is-revealing
 *   .gbcq-course.is-top               — card #1 do resultado (faixa, nao tamanho)
 *   .gbcq-sheen                       — brilho que atravessa o herói 1x
 * Custom property `--gbcq-i` (índice do item) alimenta o atraso da cascata.
 *
 * Modo imersivo (takeover de tela cheia — seção no FIM deste arquivo):
 *   .gbcq-root--immersive             — escrita pelo PHP; o quiz PODE tomar a tela
 *   .gbcq-root.is-armed               — casca escondida no instante antes do takeover
 *   .gbcq-root.is-immersive           — takeover ATIVO
 *   .gbcq-root.is-leaving-full        — saída em curso
 *   .gbcq-root.is-dismissed           — saiu descartando: só a capa fica
 *   html.gbcq-lock / body.gbcq-lock   — trava de rolagem do documento
 */

/* --------------------------------------------------------------------------
 * Tokens (Design System GlobalCamps)
 * ----------------------------------------------------------------------- */
.gbcq-root {
    --gbcq-purple: #6155cb;
    --gbcq-purple-light: #8a7ff7;
    --gbcq-purple-dark: #4e42a3;
    --gbcq-purple-deeper: #3d3484;
    --gbcq-purple-tint: #f2f1fb;
    --gbcq-lime: #c6e67a;
    --gbcq-lime-dark: #a9cc55;
    --gbcq-lime-tint: #f1f8e0;

    /* Tinta escura oficial: versão opaca do roxo do modal do AC. É ela que faz
       título de pergunta e de resultado parecerem do mesmo sistema. */
    --gbcq-ink: #1a1240;
    --gbcq-text: #333333;
    --gbcq-muted: #5f5f6b;   /* 6.0:1 no branco */
    --gbcq-muted-2: #6b6b78; /* 5.1:1 no branco */
    --gbcq-hairline: rgba(26, 18, 70, 0.08);
    --gbcq-line: #ececf3;
    --gbcq-bg: #f8f8f8;
    --gbcq-neutral-chip: #f4f4f7;
    --gbcq-white: #ffffff;
    --gbcq-warn-bg: #fdf4e5;
    --gbcq-warn-border: #f0dcc0;
    --gbcq-warn-text: #7a5620;

    --gbcq-radius-lg: 28px;
    --gbcq-radius-md: 20px;
    --gbcq-radius-chip: 10px;
    --gbcq-radius-sm: 8px;
    --gbcq-radius-pill: 100px;

    /* Sombra de card: profunda e fria (roxo, não preto). Preto puro sobre
       branco lê como sombra de plugin; a nossa é da mesma família do palco. */
    --gbcq-shadow-card: 0 24px 80px rgba(26, 18, 70, 0.14), 0 2px 8px rgba(26, 18, 70, 0.06);
    /* Mesmo par do #ac-splash-card: sombra + hairline branco de 1px por dentro. */
    --gbcq-shadow-stage: 0 24px 80px rgba(10, 6, 40, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --gbcq-shadow-cta: 0 8px 24px rgba(97, 85, 203, 0.28);

    --gbcq-ease-in: cubic-bezier(0.23, 1, 0.32, 1);
    --gbcq-ease-out: cubic-bezier(0.4, 0, 1, 1);
    /*
     * O feedback de escolha usa afundamento + retorno, não overshoot elástico.
     * Bounce/elastic envelhece rápido e destoa da curva do resto da casa;
     * a sensação tátil vem do próprio keyframe (scale 1 → .962 → 1), que já
     * dá o "toque" sem passar do ponto de chegada.
     */
    --gbcq-ease-pick: cubic-bezier(0.23, 1, 0.32, 1);

    /*
     * Altura do takeover. `dvh` é o que existe hoje; `vh` fica como degrau para
     * navegador antigo. No celular a diferença não é estética: com `100vh` a
     * barra do navegador come ~80px e o rodapé de navegação some da tela.
     */
    --gbcq-vh: 100vh;

    /*
     * Acima do header do site, acima do widget de chat (999999) e do modal de
     * entrada (999999). Fica abaixo do loader de página do tema (2147483600),
     * que precisa cobrir tudo — inclusive o quiz — durante a navegação.
     */
    --gbcq-z-immersive: 2147483000;

    --gbcq-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    display: block;
    position: relative;
    /* isolation cria o contexto de empilhamento para o ::before sangrado ficar
       atrás do conteúdo do quiz sem sumir atrás do fundo da página. */
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(40px, 9vw, 88px) 16px;
    font-family: var(--gbcq-font);
    font-size: 16px;
    line-height: 1.5;
    /* O contexto imediato do root é escuro: o texto solto aqui é claro. */
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    -webkit-text-size-adjust: 100%;
}

.gbcq-root *,
.gbcq-root *::before,
.gbcq-root *::after {
    box-sizing: border-box;
}

/*
 * SANGRIA DE BORDA A BORDA
 *
 * O elemento fica na largura do container do tema (então o palco continua
 * alinhado à grade de 1140px), e quem sangra é o pseudo-elemento: 100vw
 * centralizado. Fazer o próprio root ter width:100vw deslocaria o palco meia
 * barra de rolagem para a esquerda — justamente o desalinhamento que queríamos
 * matar.
 */
.gbcq-root::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    /*
     * Textura autoral por cima do gradiente. O gradiente sozinho é liso demais
     * e denuncia "fundo de CSS"; a imagem traz grão e profundidade de névoa.
     * Ela entra em `soft-light` com opacidade baixa, então some se falhar o
     * download — o gradiente continua sendo a base, nunca fica buraco.
     * Arquivo: 32 KB (desktop) / 12 KB (mobile).
     */
    background-color: #1a1240;
    background-image:
        url("../img/quiz-atmosfera-mobile.webp"),
        radial-gradient(1200px 600px at 15% -10%, rgba(97, 85, 203, 0.55), transparent 70%),
        radial-gradient(900px 500px at 85% 110%, rgba(198, 230, 122, 0.16), transparent 65%),
        linear-gradient(160deg, #211a5c 0%, #2c2470 55%, #1a1240 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover, auto, auto, auto;
    background-blend-mode: soft-light, normal, normal, normal;
    pointer-events: none;
}

@media (min-width: 768px) {
    .gbcq-root::before {
        background-image:
            url("../img/quiz-atmosfera.webp"),
            radial-gradient(1200px 600px at 15% -10%, rgba(97, 85, 203, 0.55), transparent 70%),
            radial-gradient(900px 500px at 85% 110%, rgba(198, 230, 122, 0.16), transparent 65%),
            linear-gradient(160deg, #211a5c 0%, #2c2470 55%, #1a1240 100%);
    }
}

/*
 * 100vw inclui a barra de rolagem clássica: sem isso o sangramento gera uns
 * 15px de rolagem horizontal na página. `clip` (e não `hidden`) porque hidden
 * num eixo força `auto` no outro e quebra position:sticky do tema.
 */
html:has(.gbcq-root),
body:has(.gbcq-root) {
    overflow-x: clip;
}

/* O tema herda font-family em cascata; reafirmamos em todo elemento nosso. */
.gbcq-root h2,
.gbcq-root h3,
.gbcq-root h4,
.gbcq-root p,
.gbcq-root span,
.gbcq-root button,
.gbcq-root a {
    font-family: var(--gbcq-font);
    letter-spacing: normal;
    text-transform: none;
}

.gbcq-root .gbcq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* O noscript vive FORA do palco, direto sobre o campo escuro. */
.gbcq-root .gbcq-noscript {
    display: block;
    max-width: 1140px;
    margin: 0 auto 18px auto;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--gbcq-radius-md);
    background: rgba(255, 255, 255, 0.08);
    font-size: 15px;
    line-height: 1.55;
    color: #f2f1fb;
}

/* --------------------------------------------------------------------------
 * Palco flutuante
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-shell {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    /* Sem borda: sobre fundo escuro o branco já se separa sozinho. O hairline
       de 1px branco vem de dentro da sombra (mesmo truque do #ac-splash-card). */
    border: none;
    border-radius: var(--gbcq-radius-lg);
    background: var(--gbcq-white);
    box-shadow: var(--gbcq-shadow-stage);
    color: var(--gbcq-text);
}

/*
 * Abertura cerimonial: o palco entra depois que o véu sai.
 *
 * O `:has(> .gbcq-veil)` é rede de segurança: se o véu não chegar a existir
 * (JS interrompido, erro no meio da abertura), o palco NÃO fica invisível —
 * a regra simplesmente não casa e o quiz aparece normalmente.
 */
.gbcq-root.is-opening:has(> .gbcq-veil) .gbcq-shell {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.985);
}

.gbcq-root.is-open .gbcq-shell {
    animation: gbcq-card-in 620ms var(--gbcq-ease-in) both;
}

/* --------------------------------------------------------------------------
 * Véu da abertura (elemento criado pelo JS dentro do root)
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-veil {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 4;
    inset: 0;
    margin: 0;
    padding: 24px;
    background: linear-gradient(135deg, rgba(26, 18, 70, 0.96), rgba(50, 38, 120, 0.94));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.gbcq-root .gbcq-veil__logo,
.gbcq-root .gbcq-veil img,
.gbcq-root .gbcq-veil svg {
    display: block;
    width: min(280px, 62%);
    height: auto;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.4));
    animation: gbcq-veil-logo 900ms var(--gbcq-ease-in) both;
}

/* Depois da abertura o véu sai e para de interceptar clique. */
.gbcq-root.is-open .gbcq-veil {
    pointer-events: none;
    animation: gbcq-veil-out 620ms var(--gbcq-ease-in) both;
}

/* --------------------------------------------------------------------------
 * Cabeçalho do palco — eyebrow + progresso (não é mais faixa)
 *
 * O quiz costuma rodar sem título/lead (o shortcode entrega string vazia) e o
 * resultado esconde o progresso: o cabeçalho ficava sendo uma faixa roxa de
 * 89px com 0px de conteúdo. Agora ele não pinta nada e some quando está vazio.
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-head {
    display: block;
    margin: 0;
    padding: 22px 18px 0 18px;
    border: none;
    background: transparent;
    color: var(--gbcq-ink);
}

/* Cabeçalho sem nenhum filho visível não deve reservar espaço nenhum. */
.gbcq-root .gbcq-head:not(:has(> *:not([hidden]))) {
    padding: 0;
}

.gbcq-root .gbcq-head__title {
    display: block;
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--gbcq-ink);
}

.gbcq-root .gbcq-head__lead {
    display: block;
    margin: 0 0 14px 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--gbcq-muted);
}

/*
 * UM SELO SÓ.
 *
 * Antes existiam DOIS pills de gradiente empilhados: a saudação
 * ("VAMOS LÁ, RODRIGO") e o passo ("PERGUNTA 1 DE 5"). Dois selos idênticos um
 * embaixo do outro competem pela mesma atenção, não hierarquizam nada e ainda
 * empurravam a pergunta para baixo da dobra no celular.
 *
 * Quem fica com o pill é o PASSO — é ele que muda, é ele que o visitante
 * confere. A saudação vira texto discreto ao lado: mesma linha, peso menor, cor
 * secundária. Ela cumprimenta sem disputar.
 *
 * `.gbcq-eyebrow` continua declarado para o caso de o JS vir a emitir um.
 */
.gbcq-root .gbcq-eyebrow,
.gbcq-root .gbcq-head__eyebrow {
    display: inline-block;
    margin: 0 0 14px 0;
    padding: 6px 14px;
    border: none;
    border-radius: var(--gbcq-radius-pill);
    background: linear-gradient(135deg, #6155cb, #8a7ff7);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gbcq-white);
    animation: gbcq-card-in 520ms var(--gbcq-ease-in) both;
}

.gbcq-root .gbcq-greeting {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    /* 5.1:1 no branco — passa AA com folga em texto pequeno. */
    color: var(--gbcq-muted-2);
}

.gbcq-root .gbcq-greeting[hidden],
.gbcq-root .gbcq-eyebrow[hidden],
.gbcq-root .gbcq-head__eyebrow[hidden] {
    display: none;
}

/* Barra de progresso ------------------------------------------------------ */
/*
 * O markup agora nasce na ordem visual (meta primeiro, trilho depois) — o
 * `order: -1` que existia aqui era só compensação de template e sumiu junto
 * com a reorganização do cabeçalho.
 */
.gbcq-root .gbcq-progress {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.gbcq-root .gbcq-progress[hidden] {
    display: none;
}

/* A linha do selo + saudação. `baseline` alinha a caixa maiúscula do pill com
   a minúscula da saudação; `center` deixaria a saudação flutuando alto. */
.gbcq-root .gbcq-progress__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0;
    padding: 0;
}

.gbcq-root .gbcq-progress__track {
    display: block;
    position: relative;
    width: 100%;
    height: 4px;
    margin: 0 0 10px 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--gbcq-radius-pill);
    background: rgba(97, 85, 203, 0.12);
}

.gbcq-root .gbcq-progress__fill {
    display: block;
    /* min-width para a barra nunca parecer "quebrada" na primeira pergunta,
       onde o progresso honesto é literalmente 0%. */
    min-width: 10px;
    width: 0%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: var(--gbcq-radius-pill);
    /* Único lugar (com o selo do herói) onde o lime aparece: ele significa
       progresso e conquista, e nada além disso. */
    background: linear-gradient(90deg, #a9cc55, #c6e67a);
    transition: width 420ms var(--gbcq-ease-in);
}

/*
 * O ÚNICO selo da tela. Importa a assinatura do modal de entrada (o mesmo
 * gradiente de pill) para dentro do quiz — é o que amarra as duas experiências
 * como sendo da mesma casa.
 */
.gbcq-root .gbcq-progress__label {
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    border-radius: 100px;
    background: linear-gradient(135deg, #6155cb, #8a7ff7);
    box-shadow: 0 4px 12px rgba(97, 85, 203, 0.25);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
}

.gbcq-root .gbcq-progress__label:empty {
    display: none;
}

/* --------------------------------------------------------------------------
 * Palco de conteúdo
 *
 * data-lenis-prevent + overscroll-behavior vivem aqui porque o Lenis do tema
 * sequestra a roda do mouse. A instância não é exposta em window, então não há
 * como chamar .stop() — o atributo é o único contrato disponível.
 *
 * O flex column + justify-content:center existe para matar o vazio morto: com
 * min-height fixo e conteúdo de 120px, sobravam até 300px de branco embaixo do
 * texto. Centralizado, o vazio se distribui e some da percepção.
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* `safe` evita o clássico bug de conteúdo centralizado maior que o container
       ficar inalcançável no topo. Navegador que não entende ignora a linha. */
    justify-content: safe center;
    position: relative;
    margin: 0;
    padding: 20px 18px 8px 18px;
    min-height: 260px;
    overscroll-behavior: contain;
    background: var(--gbcq-white);
}

.gbcq-root .gbcq-stage > [hidden] {
    display: none;
}

/* Entrada padrão de cada tela. */
.gbcq-root .gbcq-stage > [data-gbcq-view] {
    animation: gbcq-card-in 460ms var(--gbcq-ease-in) both;
}

/* Troca de pergunta: sai para a esquerda, entra pela direita — a mesma
   gramática do stepIn/stepOut do modal do AC. */
.gbcq-root .gbcq-stage > [data-gbcq-view].is-out,
.gbcq-root .gbcq-stage.is-leaving > [data-gbcq-view] {
    animation: gbcq-view-out 220ms var(--gbcq-ease-out) both;
}

.gbcq-root .gbcq-stage > [data-gbcq-view].is-in,
.gbcq-root .gbcq-stage.is-entering > [data-gbcq-view] {
    animation: gbcq-view-in 420ms var(--gbcq-ease-in) both;
}

/* --------------------------------------------------------------------------
 * Estados (carregando / erro / retomada)
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-state {
    display: block;
    margin: 0;
    padding: 28px 8px 32px 8px;
    text-align: center;
}

.gbcq-root .gbcq-state__icon {
    display: block;
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 34px;
    line-height: 1;
}

.gbcq-root .gbcq-state__title {
    display: block;
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--gbcq-ink);
}

.gbcq-root .gbcq-state__text {
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: 46ch;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gbcq-muted);
}

.gbcq-root .gbcq-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0 0;
    padding: 0;
}

.gbcq-root .gbcq-spinner {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 14px auto;
    padding: 0;
    border: 3px solid rgba(97, 85, 203, 0.18);
    border-top-color: var(--gbcq-purple);
    border-radius: 50%;
    animation: gbcq-spin 720ms linear infinite;
}

/* --------------------------------------------------------------------------
 * Pergunta
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-question {
    display: block;
    margin: 0;
    padding: 0 0 8px 0;
}

/*
 * O invólucro do enunciado. No celular ele é transparente (um <div> que não
 * faz nada); em tela cheia larga ele vira a coluna esquerda do layout de duas
 * colunas. Existir sempre é o que torna aquele grid confiável: sem ele, título
 * e ajuda seriam itens soltos e a ajuda escondida desalinharia a grade inteira.
 */
.gbcq-root .gbcq-question__lede {
    display: block;
    margin: 0;
    padding: 0;
}

.gbcq-root .gbcq-question__title {
    display: block;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--gbcq-ink);
    outline: none;
}

.gbcq-root .gbcq-question__title:focus-visible {
    outline: 3px solid var(--gbcq-purple);
    outline-offset: 4px;
    border-radius: var(--gbcq-radius-sm);
}

.gbcq-root .gbcq-question__help {
    display: block;
    /* 56ch: linha de leitura confortável. Sem isso a ajuda esticava 1100px no
       desktop e virava uma linha só, impossível de varrer com o olho. */
    max-width: 56ch;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--gbcq-muted);
}

.gbcq-root .gbcq-question__help[hidden] {
    display: none;
}

.gbcq-root .gbcq-question__error {
    display: block;
    margin: 16px 0 0 0;
    padding: 12px 16px;
    border: 1px solid var(--gbcq-warn-border);
    border-radius: var(--gbcq-radius-chip);
    background: var(--gbcq-warn-bg);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--gbcq-warn-text);
}

.gbcq-root .gbcq-question__error[hidden] {
    display: none;
}

/* Grade de opções --------------------------------------------------------- */
.gbcq-root .gbcq-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cascata: só na primeira pintura da pergunta. Ao voltar, o JS não aplica
   `is-cascading` — refazer a coreografia no "voltar" parece bug, não estilo. */
.gbcq-root .gbcq-options.is-cascading .gbcq-option {
    animation: gbcq-card-in 420ms var(--gbcq-ease-in) both;
    animation-delay: calc(var(--gbcq-i, 0) * 45ms);
}

/* Cards ------------------------------------------------------------------- */
.gbcq-root .gbcq-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    width: 100%;
    /*
     * Item de grid tem `min-width: auto` por padrão, ou seja, nunca encolhe
     * abaixo do conteúdo. Com descrições longas o card ficava mais largo que a
     * coluna (436px num grid de 336px) e o texto era cortado pelo overflow
     * hidden do painel — sem barra de rolagem, sem aviso.
     */
    min-width: 0;
    max-width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 15px 16px;
    border: 2px solid var(--gbcq-line);
    border-radius: var(--gbcq-radius-md);
    background: var(--gbcq-white);
    box-shadow: none;
    font-family: var(--gbcq-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--gbcq-text);
    text-align: left;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 240ms var(--gbcq-ease-in),
        background-color 240ms var(--gbcq-ease-in),
        transform 240ms var(--gbcq-ease-in),
        box-shadow 240ms var(--gbcq-ease-in),
        opacity 240ms var(--gbcq-ease-in);
}

.gbcq-root .gbcq-option:hover {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-text);
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 26px rgba(97, 85, 203, 0.16);
}

.gbcq-root .gbcq-option:focus {
    outline: none;
}

.gbcq-root .gbcq-option:focus-visible {
    outline: 3px solid var(--gbcq-purple);
    outline-offset: 2px;
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
}

/* Sem esta regra o tema pinta o :active de rosa. */
.gbcq-root .gbcq-option:active {
    border-color: var(--gbcq-purple-dark);
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-text);
    transform: translate3d(0, 0, 0) scale(0.985);
}

.gbcq-root .gbcq-option.is-selected {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
    box-shadow: 0 0 0 3px rgba(97, 85, 203, 0.16);
}

/* Feedback da escolha: o card escolhido quica e emite um anel; os outros
   recuam. É o momento em que a interface confirma a decisão sem texto. */
.gbcq-root .gbcq-option.is-picked {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
    z-index: 1;
    animation:
        gbcq-pick 380ms var(--gbcq-ease-pick) both,
        /* Sem fill-mode no anel de propósito: com `both` o box-shadow final
           (transparente) ficaria grudado e apagaria o anel de .is-selected. */
        gbcq-ring 620ms var(--gbcq-ease-out);
}

.gbcq-root .gbcq-option.is-dimmed {
    opacity: 0.45;
    transform: scale(0.99);
    box-shadow: none;
}

.gbcq-root .gbcq-option[disabled],
.gbcq-root .gbcq-option[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
}

.gbcq-root .gbcq-option__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: var(--gbcq-radius-chip);
    background: var(--gbcq-purple-tint);
    font-size: 20px;
    line-height: 1;
}

.gbcq-root .gbcq-option.is-selected .gbcq-option__icon,
.gbcq-root .gbcq-option.is-picked .gbcq-option__icon {
    background: rgba(255, 255, 255, 0.9);
}

/*
 * Ícone vetorial do sprite próprio. Traço 1.75 numa grade de 24 é o que dá
 * peso óptico igual entre os oito — o emoji tinha pesos incompatíveis (o
 * estetoscópio era um fio, a bola era uma massa preta).
 */
.gbcq-root .gbcq-option__icon--vector {
    color: var(--gbcq-purple);
    transition: color 200ms var(--gbcq-ease-in), background-color 200ms var(--gbcq-ease-in);
}

.gbcq-root .gbcq-option__icon--vector svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ao escolher, o ícone acende junto com o card — é o mesmo gesto, não dois. */
.gbcq-root .gbcq-option.is-selected .gbcq-option__icon--vector,
.gbcq-root .gbcq-option.is-picked .gbcq-option__icon--vector {
    color: var(--gbcq-purple-deeper);
}

.gbcq-root .gbcq-option__body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.gbcq-root .gbcq-option__label {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gbcq-ink);
    overflow-wrap: break-word;
}

.gbcq-root .gbcq-option__desc {
    display: block;
    margin: 4px 0 0 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gbcq-muted-2);
    overflow-wrap: break-word;
}

/*
 * O tema aplica `white-space: nowrap` a este texto vindo de fora do plugin.
 * O efeito era a descrição sair do card sem quebrar linha e ser cortada na
 * borda — sem reticências, sem rolagem, só texto sumindo. Como a regra externa
 * não está sob nosso controle, aqui vale !important.
 */
.gbcq-root .gbcq-option__desc,
.gbcq-root .gbcq-option__label,
.gbcq-root .gbcq-course__title,
.gbcq-root .gbcq-chip,
.gbcq-root .gbcq-caveat {
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

/* Chip de contagem: dado neutro, não conquista. Saiu do lime. */
.gbcq-root .gbcq-option__count {
    display: inline-block;
    margin: 8px 0 0 0;
    padding: 3px 10px;
    border: none;
    border-radius: var(--gbcq-radius-pill);
    background: var(--gbcq-neutral-chip);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--gbcq-muted);
    white-space: nowrap;
}

/* Contagem zero é informação, não erro: avisa antes do beco sem saída. */
.gbcq-root .gbcq-option__count.is-empty {
    background: var(--gbcq-warn-bg);
    color: var(--gbcq-warn-text);
}

/* ------------------------------------------------ Trilha dos passos

   Fica acima do título e faz três trabalhos: situa ("passo 3 de 5", só que
   com nome em vez de número), devolve com um toque a qualquer pergunta já
   respondida, e antecipa o que vem — sem prometer clique no futuro, que
   seria oferecer pular pergunta. */
.gbcq-root .gbcq-trail {
    margin-bottom: 14px;
}

.gbcq-root .gbcq-trail__list {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* No celular a lista rola na horizontal em vez de quebrar em três linhas:
       quebrada, ela empurraria a pergunta para fora da primeira dobra. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.gbcq-root .gbcq-trail__list::-webkit-scrollbar {
    display: none;
}

.gbcq-root .gbcq-trail__item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* O traço entre os passos é do item, não um elemento a mais no DOM. */
.gbcq-root .gbcq-trail__item + .gbcq-trail__item::before {
    content: '';
    width: 10px;
    height: 1px;
    margin-right: 6px;
    background: var(--gbcq-line);
}

.gbcq-root .gbcq-trail__step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    border: 1px solid transparent;
    border-radius: var(--gbcq-radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gbcq-muted);
    white-space: nowrap;
}

.gbcq-root .gbcq-trail__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gbcq-neutral-chip);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--gbcq-muted);
}

/* Já respondido: é botão, e o cursor diz isso antes do toque. */
.gbcq-root .gbcq-trail__item.is-done .gbcq-trail__step {
    cursor: pointer;
    color: var(--gbcq-purple);
}

.gbcq-root .gbcq-trail__item.is-done .gbcq-trail__num {
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-purple);
}

.gbcq-root .gbcq-trail__item.is-done .gbcq-trail__step:hover {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
}

.gbcq-root .gbcq-trail__item.is-current .gbcq-trail__step {
    background: var(--gbcq-purple);
    color: #fff;
}

.gbcq-root .gbcq-trail__item.is-current .gbcq-trail__num {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

/* Previsão: presente para situar, apagado para não convidar ao clique. */
.gbcq-root .gbcq-trail__item.is-ahead .gbcq-trail__step {
    opacity: 0.55;
}

@media (max-width: 600px) {
    .gbcq-root .gbcq-trail {
        margin-bottom: 10px;
    }

    /* Na tela estreita só o passo atual mostra o nome; os outros ficam com o
       número. É o que cabe sem virar uma faixa de rolagem infinita. */
    .gbcq-root .gbcq-trail__item:not(.is-current) .gbcq-trail__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .gbcq-root .gbcq-trail__step {
        padding: 5px;
    }

    .gbcq-root .gbcq-trail__item.is-current .gbcq-trail__step {
        padding-right: 10px;
    }
}

/* ------------------------------------------------ Caminho fechado

   A opção zerada continua na tela, apagada, com o motivo embaixo. Escondê-la
   faria a lista mudar de tamanho a cada resposta, e quem tinha visto "Canadá"
   no passo anterior concluiria que o quiz perdeu a opção. Ela segue clicável
   de propósito: o toque leva de volta à escolha que a fechou. */
.gbcq-root .gbcq-option.is-blocked {
    border-color: var(--gbcq-line);
    background: var(--gbcq-neutral-chip);
    cursor: pointer;
}

.gbcq-root .gbcq-option.is-blocked .gbcq-option__label,
.gbcq-root .gbcq-option.is-blocked .gbcq-option__desc {
    color: var(--gbcq-muted);
}

.gbcq-root .gbcq-option.is-blocked .gbcq-option__icon {
    opacity: 0.45;
}

.gbcq-root .gbcq-option.is-blocked .gbcq-option__check {
    display: none;
}

.gbcq-root .gbcq-option__reason {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--gbcq-warn-text);
}

/* Passo inteiro sem saída: ocupa a largura da grade, abaixo das opções. */
.gbcq-root .gbcq-deadend {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid var(--gbcq-line);
    border-radius: var(--gbcq-radius-md);
    background: var(--gbcq-warn-bg);
}

.gbcq-root .gbcq-deadend__text {
    flex: 1 1 220px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gbcq-warn-text);
}

.gbcq-root .gbcq-deadend__action {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--gbcq-radius-pill);
    background: var(--gbcq-purple);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.gbcq-root .gbcq-deadend__action:hover {
    filter: brightness(1.08);
}

.gbcq-root .gbcq-option__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--gbcq-purple);
    color: var(--gbcq-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 200ms var(--gbcq-ease-in), transform 260ms var(--gbcq-ease-pick);
}

.gbcq-root .gbcq-option.is-selected .gbcq-option__check,
.gbcq-root .gbcq-option.is-picked .gbcq-option__check {
    opacity: 1;
    transform: scale(1);
}

/* Grade de idade ---------------------------------------------------------- */
/*
 * Colunas FIXAS de propósito. Com auto-fit, os 13 itens de idade caíam em
 * arranjos tipo 6+6+1 e sobrava um órfão gigante na última linha. 5 colunas no
 * celular e 7 no desktop dividem 13 em linhas visualmente estáveis.
 */
.gbcq-root .gbcq-agegrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
}

.gbcq-root .gbcq-age {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width fica em 0: quem garante o alvo de toque é a altura (52px, acima
       dos 44px exigidos). min-width fixo estourava a grade de 5 colunas em
       telas de 320px. */
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 6px 4px;
    border: 2px solid var(--gbcq-line);
    border-radius: var(--gbcq-radius-chip);
    background: var(--gbcq-white);
    box-shadow: none;
    font-family: var(--gbcq-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: var(--gbcq-ink);
    text-align: center;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 200ms var(--gbcq-ease-in),
        background-color 200ms var(--gbcq-ease-in),
        color 200ms var(--gbcq-ease-in),
        transform 200ms var(--gbcq-ease-in);
}

.gbcq-root .gbcq-age:hover {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-ink);
}

.gbcq-root .gbcq-age:focus {
    outline: none;
}

.gbcq-root .gbcq-age:focus-visible {
    outline: 3px solid var(--gbcq-purple);
    outline-offset: 2px;
    border-color: var(--gbcq-purple);
}

.gbcq-root .gbcq-age:active {
    border-color: var(--gbcq-purple-dark);
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-ink);
    transform: scale(0.95);
}

.gbcq-root .gbcq-age.is-selected {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple);
    color: var(--gbcq-white);
}

.gbcq-root .gbcq-age.is-picked {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple);
    color: var(--gbcq-white);
    animation:
        gbcq-pick 380ms var(--gbcq-ease-pick) both,
        /* Sem fill-mode no anel de propósito: com `both` o box-shadow final
           (transparente) ficaria grudado e apagaria o anel de .is-selected. */
        gbcq-ring 620ms var(--gbcq-ease-out);
}

.gbcq-root .gbcq-age.is-dimmed {
    opacity: 0.45;
    transform: scale(0.99);
}

/* A legenda mora dentro da grade (é o mesmo container que o JS preenche),
   então precisa ocupar a linha inteira em vez de virar mais uma célula. */
.gbcq-root .gbcq-agegrid__legend {
    display: block;
    grid-column: 1 / -1;
    margin: 14px 0 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--gbcq-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
 * Rodapé de navegação (fica grudado no fim da casca no mobile)
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) 18px;
    border-top: 1px solid var(--gbcq-hairline);
    background: var(--gbcq-white);
}

.gbcq-root .gbcq-foot[hidden] {
    display: none;
}

.gbcq-root .gbcq-foot__hint {
    display: none; /* No mobile o espaço é do botão; a dica volta no desktop. */
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--gbcq-muted);
    text-align: center;
}

.gbcq-root .gbcq-foot__back[hidden],
.gbcq-root .gbcq-foot__next[hidden] {
    display: none;
}

/* A dica volta a ser `display: block` no tablet, o que venceria o [hidden] que
   o modo resultado põe nela. Esta linha é o que faz o atributo valer. */
.gbcq-root .gbcq-foot__hint[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
 * Botões
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--gbcq-radius-pill);
    background: transparent;
    box-shadow: none;
    font-family: var(--gbcq-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color 240ms var(--gbcq-ease-in),
        color 240ms var(--gbcq-ease-in),
        border-color 240ms var(--gbcq-ease-in),
        transform 240ms var(--gbcq-ease-in),
        box-shadow 240ms var(--gbcq-ease-in);
}

.gbcq-root .gbcq-btn:focus {
    outline: none;
}

.gbcq-root .gbcq-btn:focus-visible {
    outline: 3px solid var(--gbcq-purple-deeper);
    outline-offset: 3px;
}

.gbcq-root .gbcq-btn[disabled] {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

/* O gradiente roxo é o mesmo do eyebrow do modal do AC — mesma família. */
.gbcq-root .gbcq-btn--primary {
    background-color: var(--gbcq-purple);
    background-image: linear-gradient(135deg, #6155cb, #8a7ff7);
    border-color: transparent;
    color: var(--gbcq-white);
    box-shadow: var(--gbcq-shadow-cta);
}

.gbcq-root .gbcq-btn--primary:hover {
    background-color: var(--gbcq-purple-dark);
    background-image: linear-gradient(135deg, #6d61d8, #9a90ff);
    border-color: transparent;
    color: var(--gbcq-white);
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 12px 30px rgba(97, 85, 203, 0.34);
}

/* :active explícito — sem ele o tema aplica a cor rosa dele no clique. */
.gbcq-root .gbcq-btn--primary:active {
    background-color: var(--gbcq-purple-deeper);
    background-image: linear-gradient(135deg, #4e42a3, #6f63dc);
    border-color: transparent;
    color: var(--gbcq-white);
    transform: translate3d(0, 0, 0) scale(0.98);
    box-shadow: 0 4px 12px rgba(97, 85, 203, 0.24);
}

.gbcq-root .gbcq-btn--primary[disabled]:hover {
    background-image: linear-gradient(135deg, #6155cb, #8a7ff7);
    transform: none;
    box-shadow: var(--gbcq-shadow-cta);
}

.gbcq-root .gbcq-btn--ghost {
    background: var(--gbcq-white);
    border-color: rgba(26, 18, 70, 0.14);
    color: var(--gbcq-purple-deeper);
}

.gbcq-root .gbcq-btn--ghost:hover {
    background: var(--gbcq-purple-tint);
    border-color: var(--gbcq-purple);
    color: var(--gbcq-purple-deeper);
}

.gbcq-root .gbcq-btn--ghost:active {
    background: var(--gbcq-purple-tint);
    border-color: var(--gbcq-purple-dark);
    color: var(--gbcq-purple-deeper);
    transform: scale(0.98);
}

/* CTA de WhatsApp do resultado.
   Verde da marca do WhatsApp (#25D366 / hover #20bd5a — o mesmo par usado
   no widget flutuante do site) em vez do roxo da casa: aqui a cor não é
   decoração, é o reconhecimento instantâneo do canal para onde o botão leva.
   É um <a>, então precisa recusar explicitamente a tipografia de link do
   tema — sem isso o rótulo herda cor e sublinhado do tema por cima. */
.gbcq-root .gbcq-btn--whats,
.gbcq-root a.gbcq-btn--whats {
    background-color: #25d366;
    background-image: none;
    border-color: transparent;
    color: var(--gbcq-white);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.30);
}

.gbcq-root .gbcq-btn--whats:hover,
.gbcq-root a.gbcq-btn--whats:hover {
    background-color: #20bd5a;
    border-color: transparent;
    color: var(--gbcq-white);
    text-decoration: none;
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.38);
}

/* :active e :focus-visible explícitos: sem eles o tema pinta o link de rosa
   no clique e o foco de teclado some dentro do verde. */
.gbcq-root .gbcq-btn--whats:active,
.gbcq-root a.gbcq-btn--whats:active {
    background-color: #1ba34d;
    border-color: transparent;
    color: var(--gbcq-white);
    text-decoration: none;
    transform: translate3d(0, 0, 0) scale(0.98);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.26);
}

.gbcq-root .gbcq-btn--whats:focus-visible,
.gbcq-root a.gbcq-btn--whats:focus-visible {
    outline: 3px solid var(--gbcq-purple-deeper);
    outline-offset: 3px;
    color: var(--gbcq-white);
}

.gbcq-root .gbcq-btn__whats-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    color: currentColor;
}

.gbcq-root .gbcq-btn__whats-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Telas estreitas: o rótulo é o mais longo dos três botões da linha e o
   `white-space: nowrap` global do .gbcq-btn o faria vazar do palco. Aqui
   ele pode quebrar em duas linhas — o botão cresce em altura, nunca para
   fora da tela. Os 48px de min-height do .gbcq-btn seguram o alvo de toque. */
@media (max-width: 400px) {
    .gbcq-root .gbcq-btn--whats {
        white-space: normal;
        padding-left: 18px;
        padding-right: 18px;
    }
}

.gbcq-root .gbcq-btn__arrow {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 17px;
    line-height: 1;
}

/* Estado "enviando": impede duplo toque virar duas respostas. */
.gbcq-root .gbcq-shell.is-busy .gbcq-option,
.gbcq-root .gbcq-shell.is-busy .gbcq-age,
.gbcq-root .gbcq-shell.is-busy .gbcq-btn {
    pointer-events: none;
}

.gbcq-root .gbcq-shell.is-busy .gbcq-stage {
    opacity: 0.6;
    transition: opacity 200ms var(--gbcq-ease-in);
}

/* --------------------------------------------------------------------------
 * Resultado
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-result {
    display: block;
    margin: 0;
    padding: 0 0 8px 0;
}

.gbcq-root .gbcq-result.is-revealing {
    animation: gbcq-reveal 640ms var(--gbcq-ease-in) both;
}

.gbcq-root .gbcq-result__title {
    display: block;
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--gbcq-ink);
    outline: none;
}

.gbcq-root .gbcq-result__title:focus-visible {
    outline: 3px solid var(--gbcq-purple);
    outline-offset: 4px;
    border-radius: var(--gbcq-radius-sm);
}

.gbcq-root .gbcq-result__lead {
    display: block;
    max-width: 56ch;
    margin: 0 0 22px 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--gbcq-muted);
}

/*
 * As ações do resultado vivem NO RODAPÉ (ver mountResultActions no JS): a faixa
 * que durante as perguntas leva Voltar e Continuar passa a levar, no fim da
 * jornada, falar com um consultor, refazer o quiz e voltar ao site. Nenhuma
 * delas depende mais de rolar os três cards.
 *
 * O bloco abaixo é só o arranjo interno — a faixa, o fundo opaco e o hairline
 * já são do `.gbcq-foot`. Quando o visitante volta para uma pergunta o nó
 * retorna para dentro da seção de resultado, e aí este `margin` volta a valer.
 */
.gbcq-root .gbcq-result__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 8px 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
 * RODAPÉ EM MODO RESULTADO
 * ----------------------------------------------------------------------- */

/* Dentro do rodapé a barra é o único conteúdo e toma a largura inteira: sem
   isto o `space-between` do rodapé a jogaria para um canto. */
.gbcq-root .gbcq-foot.is-result .gbcq-result__actions {
    flex: 1 1 auto;
    margin: 0;
}

/*
 * Ordem de leitura da esquerda para a direita: sair, refazer, falar. A ação que
 * converte fica na ponta direita, onde o polegar chega e onde o "Continuar" das
 * perguntas estava — o botão verde ocupa o lugar que o visitante já aprendeu a
 * usar cinco vezes seguidas. O `order` faz isso sem mexer no JS, que insere o
 * WhatsApp como primeiro filho.
 */
.gbcq-root .gbcq-foot.is-result .gbcq-result__exit { order: 1; }
.gbcq-root .gbcq-foot.is-result .gbcq-btn--ghost { order: 2; }
.gbcq-root .gbcq-foot.is-result .gbcq-result__whats { order: 3; margin-left: auto; }

/* Na faixa quem tem casca é o WhatsApp. "Voltar ao site" era um primário roxo
   disputando atenção com ele; aqui recua para o peso de fantasma. */
.gbcq-root .gbcq-foot.is-result .gbcq-result__exit,
.gbcq-root .gbcq-foot.is-result a.gbcq-result__exit {
    background-color: transparent;
    background-image: none;
    border-color: rgba(26, 18, 70, 0.14);
    color: var(--gbcq-purple-deeper);
    box-shadow: none;
}

.gbcq-root .gbcq-foot.is-result .gbcq-result__exit:hover {
    background-color: var(--gbcq-purple-tint);
    background-image: none;
    border-color: var(--gbcq-purple);
    color: var(--gbcq-purple-deeper);
    transform: none;
    box-shadow: none;
}

/* A faixa é fina: os botões perdem a altura de 48px de tela cheia. */
.gbcq-root .gbcq-foot.is-result .gbcq-btn {
    min-height: 42px;
    padding: 9px 18px;
    font-size: 15px;
}

/*
 * A seta de "Voltar ao site" apontava para a direita, gesto de avançar. Aqui a
 * ação é sair, e a seta some: o rótulo basta.
 */
.gbcq-root .gbcq-foot.is-result .gbcq-result__exit .gbcq-btn__arrow {
    display: none;
}

/*
 * Celular: três botões numa linha só não cabem em 360px. O WhatsApp — a única
 * ação que leva a algum lugar novo — fica com a linha inteira, e as duas saídas
 * dividem a linha de baixo. São ~104px de faixa: caro, mas é o preço de não
 * esconder nenhuma ação atrás de 2.400px de rolagem.
 */
@media (max-width: 539px) {
    .gbcq-root .gbcq-foot.is-result .gbcq-result__actions {
        gap: 8px;
    }

    .gbcq-root .gbcq-foot.is-result .gbcq-result__whats {
        order: 1;
        flex: 1 1 100%;
        margin-left: 0;
    }

    .gbcq-root .gbcq-foot.is-result .gbcq-result__exit { order: 2; }
    .gbcq-root .gbcq-foot.is-result .gbcq-btn--ghost { order: 3; }

    .gbcq-root .gbcq-foot.is-result .gbcq-result__exit,
    .gbcq-root .gbcq-foot.is-result .gbcq-btn--ghost {
        flex: 1 1 0;
        min-height: 38px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* ==========================================================================
 * RESULTADO — a grade e o card de programa
 *
 * O card antigo era de LEITURA: uma coluna, foto de 1120px, blocos rotulados,
 * 655px de altura. Mas esta tela não pede leitura — pede COMPARAÇÃO entre três
 * programas que o quiz já garantiu serem compatíveis. Comparar exige linha de
 * base: mesma largura, mesma ordem, e título, preço e botão sempre no mesmo
 * lugar. É o que a listagem da Home v3 faz, e é o que se faz aqui.
 *
 * A referência é `.gbc-hv3-card`. Os tokens são os NOSSOS (--gbcq-*): os dois
 * conjuntos têm o mesmo roxo, mas os sufixos coincidem com valores DIFERENTES
 * (--gbcq-radius-lg vale 28px; --gbc-radius-lg, 20px). Copiar um bloco de lá
 * trocando o prefixo mudaria todos os raios em silêncio.
 * ========================================================================= */

/* A grade. `auto-fill` e não `auto-fit`, pelo mesmo motivo da Home v3: com um
   ou dois resultados as colunas vazias continuam reservadas e o card mantém a
   largura normal, em vez de esticar e virar o pôster de novo. */
.gbcq-root .gbcq-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------- O card */

/*
 * `animation-fill-mode: backwards` e NÃO `both`. Com `both` o último keyframe
 * continua dono do `transform` para sempre — o hover do card não acontece, e
 * qualquer `position: sticky`/`fixed` dentro dele passa a se ancorar no card
 * em vez da tela. Sem erro, sem aviso.
 */
.gbcq-root .gbcq-course {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Sem borda: sobre branco, sombra curta + difusa já separam. Hairline
       cinza é assinatura de widget de terceiro. */
    border: 0;
    border-radius: var(--gbcq-radius-lg);
    background: var(--gbcq-white);
    box-shadow: 0 2px 4px rgba(26, 18, 70, 0.06), 0 12px 28px rgba(26, 18, 70, 0.08);
    color: var(--gbcq-text);
    text-align: left;
    transition: transform 200ms var(--gbcq-ease-in), box-shadow 200ms var(--gbcq-ease-in);
    animation: gbcq-card-in 520ms var(--gbcq-ease-in) backwards;
    animation-delay: calc(140ms + var(--gbcq-i, 0) * 90ms);
}

.gbcq-root .gbcq-course:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 6px 12px rgba(26, 18, 70, 0.10), 0 24px 48px rgba(26, 18, 70, 0.14);
}

/* O #1 ganha uma FAIXA, não tamanho. Três cards da mesma medida são o que
   permite varrer título com título e preço com preço; um grande e dois
   pequenos criam dois modos de leitura e empurram o #2 e o #3 para fora da
   dobra. O lime aqui é legítimo: neste arquivo ele significa conquista. */
.gbcq-root .gbcq-course.is-top::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gbcq-lime), var(--gbcq-lime-dark));
    pointer-events: none;
}

/* --- Foto: 3/2, a proporção do card da Home v3 --------------------------
 * Em coluna de ~360px isso dá 240px de foto para ~340px de texto: a foto
 * acompanha, não abre. (O 16/9 de antes só existia porque o card era largo —
 * em 1120px produzia 630px de foto, e foi por isso que o herói precisou de
 * três tetos diferentes em três media queries.)
 *
 * O fundo roxo cobre o intervalo entre o card aparecer e a imagem chegar;
 * cinza ali pisca branco.
 * -------------------------------------------------------------------- */
.gbcq-root .gbcq-course__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--gbcq-purple-dark);
}

.gbcq-root .gbcq-course__photo {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
}

/* --- Corpo -------------------------------------------------------------- */
.gbcq-root .gbcq-course__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 18px;
}

/* O selo do primeiro colocado. Mora no corpo e não sobre a foto: programa sem
   foto perdia o ranking junto com a imagem. */
.gbcq-root .gbcq-course__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin: 0;
    padding: 4px 10px;
    border-radius: var(--gbcq-radius-pill);
    background: var(--gbcq-lime);
    font-family: var(--gbcq-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--gbcq-ink);
    text-transform: uppercase;
}

/* Lugar ACIMA do título, como na Home v3: antes de ler o nome do programa a
   pessoa já sabe em que país ele acontece — e o país foi uma das respostas. */
.gbcq-root .gbcq-course__where {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    font-family: var(--gbcq-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--gbcq-muted);
}

.gbcq-root .gbcq-course__title {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--gbcq-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--gbcq-ink);
    /* Evita a última linha com uma palavra só — em coluna de 360px isso
       acontece na maioria dos títulos de programa. */
    text-wrap: balance;
    overflow-wrap: break-word;
}

.gbcq-root .gbcq-course__title a {
    color: inherit;
    text-decoration: none;
}

.gbcq-root .gbcq-course__title a:hover {
    color: var(--gbcq-purple);
    text-decoration: none;
}

.gbcq-root .gbcq-course__title a:focus-visible {
    outline: 3px solid var(--gbcq-purple-deeper);
    outline-offset: 2px;
}

/* Roxo, como o __org da Home v3: amarra o card à marca sem pintar o título. */
.gbcq-root .gbcq-course__org {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--gbcq-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gbcq-purple);
}

/* --- Fatos: período, duração, idade -------------------------------------
 * O filete em cima é a fronteira entre "que programa é este" e "os números
 * dele" — o mesmo gesto do .gbc-hv3-card__facts.
 * -------------------------------------------------------------------- */
.gbcq-root .gbcq-course__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 4px 0 0 0;
    padding: 12px 0 0 0;
    border-top: 1px solid var(--gbcq-line);
    font-family: var(--gbcq-font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--gbcq-text);
}

.gbcq-root .gbcq-course__facts > div {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
}

.gbcq-root .gbcq-course__facts dt {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--gbcq-purple);
}

.gbcq-root .gbcq-course__facts dd {
    margin: 0;
    padding: 0;
    color: var(--gbcq-text);
}

/* --- Combina porque / Vale saber ----------------------------------------
 * Eram pílulas com rótulo em caixa alta por cima. Motivo é FRASE, não rótulo:
 * numa coluna de 360px a pílula quebrava em duas linhas e virava nuvem, e o
 * rótulo custava uma linha inteira para dizer o que o ícone diz de graça.
 *
 * As ressalvas têm o MESMO peso visual dos motivos e não são cortadas: só
 * mudam de ícone e de cor. Esconder "pede inglês avançado" é o que vira
 * ligação frustrada três dias depois.
 * -------------------------------------------------------------------- */
.gbcq-root .gbcq-course__why,
.gbcq-root .gbcq-course__caveats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 2px 0 0 0;
    padding: 0;
    list-style: none;
}

.gbcq-root .gbcq-course__reason,
.gbcq-root .gbcq-course__caveat {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--gbcq-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.gbcq-root .gbcq-course__reason {
    color: var(--gbcq-purple-deeper);
}

/* Âmbar próprio: precisa se distinguir do motivo sem parecer erro. Vermelho
   seria desonesto — não é falha, é escolha com ressalva. */
.gbcq-root .gbcq-course__caveat {
    color: var(--gbcq-warn-text);
}

.gbcq-root .gbcq-course__ico {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 1px 0 0 0;
    padding: 0;
}

.gbcq-root .gbcq-course__more {
    display: block;
    margin: 0;
    padding: 0 0 0 23px;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gbcq-muted-2);
}

/* --- Rodapé: preço + botão ----------------------------------------------
 * `margin-top: auto` é o que alinha os três botões da linha na mesma altura,
 * independentemente de o título ter uma ou duas linhas. Sem ele a comparação
 * perde a linha de base e a grade vira colagem.
 * -------------------------------------------------------------------- */
.gbcq-root .gbcq-course__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: auto 0 0 0;
    padding: 16px 0 0 0;
}

.gbcq-root .gbcq-course__price {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.gbcq-root .gbcq-course__price-label {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--gbcq-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gbcq-muted);
}

/* 24px e não os 28px da Home v3: lá o preço tem a linha inteira, aqui divide
   com o botão numa coluna de ~340px. */
.gbcq-root .gbcq-course__price-value {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--gbcq-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--gbcq-ink);
    white-space: nowrap;
}

/* --- O botão ------------------------------------------------------------
 * Roxo chapado com sombra SÓLIDA, exatamente como o "Ver programa" do card da
 * Home v3 — o botão tem espessura e afunda ao ser pressionado. O lime continua
 * reservado para a ação que faz virar aluno, que é o "Quero uma vaga" da
 * página para onde este botão leva.
 *
 * 44px de altura mínima é divergência deliberada da Home v3 (que usa 40):
 * este card também vive dentro do takeover de tela cheia no celular.
 * -------------------------------------------------------------------- */
.gbcq-root .gbcq-course__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--gbcq-radius-pill);
    background-color: var(--gbcq-purple);
    background-image: none;
    box-shadow: 0 3px 0 var(--gbcq-purple-deeper);
    font-family: var(--gbcq-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gbcq-white);
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: background-color 200ms var(--gbcq-ease-in),
        transform 140ms var(--gbcq-ease-in), box-shadow 140ms var(--gbcq-ease-in);
}

.gbcq-root .gbcq-course__cta .gbcq-course__ico {
    margin: 0;
}

/* O card inteiro escurece o botão: passar o mouse no cartão já anuncia qual é
   o alvo. Mesmo gesto da Home v3. */
.gbcq-root .gbcq-course:hover .gbcq-course__cta,
.gbcq-root .gbcq-course__cta:hover {
    background-color: var(--gbcq-purple-dark);
    background-image: none;
    color: var(--gbcq-white);
    text-decoration: none;
}

.gbcq-root .gbcq-course__cta:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 5px 0 var(--gbcq-purple-deeper);
}

.gbcq-root .gbcq-course__cta:focus {
    outline: none;
}

.gbcq-root .gbcq-course__cta:focus-visible {
    outline: 3px solid var(--gbcq-purple-deeper);
    outline-offset: 3px;
}

.gbcq-root .gbcq-course__cta:active {
    background-color: var(--gbcq-purple-deeper);
    transform: translate3d(0, 2px, 0);
    box-shadow: 0 1px 0 var(--gbcq-purple-deeper);
}

/* --- Alternativas (bloco "fora de um critério") --------------------------
 * Alternativa não é recomendação: o card perde a sombra e ganha um filete,
 * ficando um degrau atrás sem mudar de forma.
 * -------------------------------------------------------------------- */
.gbcq-root .gbcq-relaxed .gbcq-course {
    background: var(--gbcq-bg);
    box-shadow: inset 0 0 0 1px var(--gbcq-line);
}

.gbcq-root .gbcq-relaxed .gbcq-course:hover {
    transform: none;
    box-shadow: inset 0 0 0 1px var(--gbcq-line), 0 2px 4px rgba(26, 18, 70, 0.06);
}

/* Brilho lime que atravessa o herói uma vez. Elemento criado pelo JS. */
.gbcq-root .gbcq-sheen {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 35%;
    margin: 0;
    padding: 0;
    background: linear-gradient(
        100deg,
        rgba(198, 230, 122, 0) 0%,
        rgba(198, 230, 122, 0.35) 45%,
        rgba(255, 255, 255, 0.5) 55%,
        rgba(198, 230, 122, 0) 100%
    );
    opacity: 0;
    pointer-events: none;
    animation: gbcq-sheen 1100ms var(--gbcq-ease-in) 560ms 1 both;
}

/* Bloco de "relaxados" ---------------------------------------------------- */
.gbcq-root .gbcq-relaxed {
    display: block;
    margin: 32px 0 0 0;
    padding: 24px 0 0 0;
    border-top: 1px solid var(--gbcq-hairline);
}

.gbcq-root .gbcq-relaxed[hidden] {
    display: none;
}

.gbcq-root .gbcq-relaxed__title {
    display: block;
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--gbcq-ink);
}

.gbcq-root .gbcq-relaxed__lead {
    display: block;
    max-width: 56ch;
    margin: 0 0 16px 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gbcq-muted);
}

/* Os relaxados são alternativa, não recomendação: ficam mais discretos. */
.gbcq-root .gbcq-relaxed .gbcq-course {
    box-shadow: none;
    background: var(--gbcq-bg);
}

/* --------------------------------------------------------------------------
 * Keyframes
 * ----------------------------------------------------------------------- */
@keyframes gbcq-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Entrada padrão: sobe, aparece e assenta. */
@keyframes gbcq-card-in {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Quique da escolha: afunda e volta com overshoot. */
@keyframes gbcq-pick {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.962);
    }
    100% {
        transform: scale(1);
    }
}

/* Anel que se expande a partir da borda do card escolhido. */
@keyframes gbcq-ring {
    from {
        box-shadow: 0 0 0 0 rgba(97, 85, 203, 0.4);
    }
    to {
        box-shadow: 0 0 0 12px rgba(97, 85, 203, 0);
    }
}

/* Troca de tela: entra pela direita. */
@keyframes gbcq-view-in {
    from {
        opacity: 0;
        transform: translate3d(28px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Troca de tela: sai para a esquerda. */
@keyframes gbcq-view-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(-28px, 0, 0);
    }
}

/* Revelação do resultado: mais lenta que uma troca de pergunta, porque é o
   momento em que o quiz entrega a resposta. */
@keyframes gbcq-reveal {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Brilho atravessando o herói (uma passada só). */
@keyframes gbcq-sheen {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) skewX(-14deg);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(430%, 0, 0) skewX(-14deg);
    }
}

@keyframes gbcq-veil-logo {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gbcq-veil-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        visibility: visible;
    }
    99% {
        visibility: visible;
    }
    to {
        opacity: 0;
        transform: translate3d(0, -24px, 0) scale(1.03);
        visibility: hidden;
    }
}

/* Crossfade curto usado no lugar das animações com movimento quando o sistema
   pede menos animação. */
@keyframes gbcq-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
 * MODO IMERSIVO — takeover de tela cheia
 *
 * POR QUE ESTE BLOCO VEM DEPOIS DE TODO O RESTO
 * Duas regras de base têm a mesma especificidade das daqui (a do cabeçalho
 * vazio, por exemplo, chega a (0,3,0) por causa do `:not(:has(...))`). Em
 * empate quem vence é quem vem por último — então o modo imersivo mora no fim
 * do arquivo, e os ajustes responsivos dele logo abaixo. Mexer nessa ordem
 * quebra o cabeçalho em tela cheia sem dar erro nenhum.
 *
 * A GRAMÁTICA É A DO MODAL DE ENTRADA (ac-splash)
 * `position: fixed; inset: 0`, campo roxo com gradiente, trava de rolagem por
 * classe no <html> e no <body>, e rolagem só dentro do palco. O dono já
 * aprovou essa sensação no modal — o quiz não inventa outra.
 *
 * O QUE MUDA DE VERDADE COM A TELA CHEIA
 * Não é o mesmo layout esticado. A folha branca ganha três faixas fixas
 * (cabeçalho, palco rolável, rodapé de navegação), o progresso vira um fio de
 * 3px na borda superior, e a partir de 1080px o enunciado desgruda das opções
 * e vira coluna própria — grudada, para a pergunta nunca sair da tela.
 * ======================================================================= */

/* Onde houver suporte, a altura vira `dvh`. No celular isso não é preciosismo:
   com `100vh` a barra do navegador come ~80px e o rodapé de navegação — o
   botão "Continuar" — fica fora da tela. */
@supports (height: 100dvh) {
    .gbcq-root {
        --gbcq-vh: 100dvh;
    }
}

/* --------------------------------------------------------------------------
 * Trava de rolagem do documento (classes escritas pelo JS)
 * ----------------------------------------------------------------------- */
html.gbcq-lock,
body.gbcq-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/*
 * `position: fixed` no <body> é o único jeito confiável no iOS Safari, que
 * ignora `overflow: hidden` no documento e continua rolando "a página de trás"
 * com o dedo. O deslocamento vertical é escrito pelo JS (`style.top`), então
 * nada pula nem ao travar nem ao soltar.
 */
body.gbcq-lock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* --------------------------------------------------------------------------
 * Casca armada — o instante antes do takeover
 *
 * Sem isto o visitante vê o quiz inline piscar por uma fração de segundo antes
 * de a tela ser tomada. `visibility` e não `opacity`: a casca tem animação de
 * entrada com fill-mode, e animação vence declaração normal na cascata — um
 * `opacity: 0` aqui simplesmente não teria efeito.
 *
 * O <noscript> fica de fora de propósito: sem JavaScript o quiz não funciona, e
 * o aviso é a única coisa útil que sobra na tela.
 * ----------------------------------------------------------------------- */
.gbcq-root--immersive.is-armed .gbcq-shell {
    visibility: hidden;
    pointer-events: none;
}

.gbcq-root--immersive.is-armed::before {
    opacity: 0;
}

/* --------------------------------------------------------------------------
 * O takeover
 * ----------------------------------------------------------------------- */
.gbcq-root.is-immersive {
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: fixed;
    z-index: var(--gbcq-z-immersive);
    inset: 0;
    width: 100%;
    height: var(--gbcq-vh);
    max-height: var(--gbcq-vh);
    margin: 0;
    padding: 0;
    overflow: hidden;
    animation: gbcq-takeover-in 420ms var(--gbcq-ease-in) both;
}

.gbcq-root.is-immersive.is-leaving-full {
    animation: gbcq-takeover-out 260ms var(--gbcq-ease-out) both;
}

/* O campo roxo passa a preencher a viewport. O truque de `100vw` centralizado
   existia só para sangrar dentro do fluxo da página — aqui ele criaria meia
   barra de rolagem de deslocamento. */
.gbcq-root.is-immersive::before {
    left: 0;
    width: 100%;
    transform: none;
}

/* --------------------------------------------------------------------------
 * A folha
 *
 * No celular ela ocupa tudo: cada pixel de moldura é um pixel a menos de
 * pergunta. A partir de 1024px a moldura roxa volta e a folha flutua — é o
 * mesmo enquadramento do card do modal de entrada.
 * ----------------------------------------------------------------------- */
.gbcq-root.is-immersive .gbcq-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* A casca recebe foco ao abrir (é o ponto de entrada do contexto modal). Anel
   em volta de uma folha de tela inteira não comunica nada — só suja. */
.gbcq-root.is-immersive .gbcq-shell:focus,
.gbcq-root.is-immersive .gbcq-shell:focus-visible {
    outline: none;
}

/* Logo maior no véu: numa tela de 1440px, 280px de logo somem no meio do roxo. */
.gbcq-root.is-immersive .gbcq-veil__logo,
.gbcq-root.is-immersive .gbcq-veil img,
.gbcq-root.is-immersive .gbcq-veil svg {
    width: min(360px, 56%);
}

/* --------------------------------------------------------------------------
 * Cabeçalho em tela cheia
 * ----------------------------------------------------------------------- */
.gbcq-root.is-immersive .gbcq-head {
    position: relative;
    flex: 0 0 auto;
    /* A calha da direita é o espaço reservado para o botão de saída: sem ela o
       selo do passo passaria por baixo do X em telas estreitas. */
    padding: 22px 62px 0 18px;
}

/*
 * O PROGRESSO SOBE PARA A BORDA.
 *
 * Um fio de 3px de ponta a ponta no topo da folha é a leitura mais rápida de
 * "quanto falta" que existe — e devolve ao cabeçalho o espaço que o trilho
 * ocupava. Como a folha tem `overflow: hidden` e cantos arredondados no
 * desktop, o fio se recorta sozinho na curva.
 */
.gbcq-root.is-immersive .gbcq-progress {
    gap: 0;
}

.gbcq-root.is-immersive .gbcq-progress__track {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 3px;
    margin: 0;
    border-radius: 0;
    background: rgba(26, 18, 70, 0.08);
}

.gbcq-root.is-immersive .gbcq-progress__fill {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
 * Saída
 *
 * Discreta mas nunca escondida: 44px de alvo, canto superior direito, sempre no
 * mesmo lugar em toda tela do quiz (pergunta, erro, resultado). O Esc faz o
 * mesmo — mas ninguém descobre o Esc sem ver a porta primeiro.
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-exit {
    display: none;
}

.gbcq-root.is-immersive .gbcq-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--gbcq-hairline);
    border-radius: 50%;
    background: var(--gbcq-white);
    box-shadow: none;
    font-family: var(--gbcq-font);
    font-size: 0;
    line-height: 0;
    color: var(--gbcq-ink);
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color 200ms var(--gbcq-ease-in),
        border-color 200ms var(--gbcq-ease-in),
        color 200ms var(--gbcq-ease-in),
        transform 200ms var(--gbcq-ease-in);
}

.gbcq-root .gbcq-exit[hidden] {
    display: none;
}

.gbcq-root.is-immersive .gbcq-exit:hover {
    border-color: rgba(26, 18, 70, 0.2);
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-purple-deeper);
}

.gbcq-root.is-immersive .gbcq-exit:focus {
    outline: none;
}

.gbcq-root.is-immersive .gbcq-exit:focus-visible {
    outline: 3px solid var(--gbcq-purple);
    outline-offset: 3px;
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-purple-deeper);
}

/* Sem :active explícito o tema pinta o clique de rosa. */
.gbcq-root.is-immersive .gbcq-exit:active {
    border-color: var(--gbcq-purple);
    background: var(--gbcq-purple-tint);
    color: var(--gbcq-purple-deeper);
    transform: scale(0.94);
}

.gbcq-root .gbcq-exit__icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
 * Palco rolável
 *
 * Em tela cheia o palco é o ÚNICO container que rola — o documento está
 * travado. `overscroll-behavior: contain` impede o encadeamento para a página
 * de trás; o atributo data-lenis-prevent (no template) impede que o smooth
 * scroll do tema sequestre a roda; e o JS ainda intercepta `wheel` em captura,
 * porque o Lenis escuta no documento e não expõe instância para desligar.
 * ----------------------------------------------------------------------- */
.gbcq-root.is-immersive .gbcq-stage {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 24px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 18, 70, 0.2) transparent;
}

.gbcq-root.is-immersive .gbcq-stage::-webkit-scrollbar {
    width: 6px;
}

.gbcq-root.is-immersive .gbcq-stage::-webkit-scrollbar-track {
    background: transparent;
}

.gbcq-root.is-immersive .gbcq-stage::-webkit-scrollbar-thumb {
    border-radius: var(--gbcq-radius-pill);
    background: rgba(26, 18, 70, 0.2);
}

/*
 * MEDIDA DE LEITURA.
 *
 * Com a viewport inteira disponível o erro fácil é esticar tudo até a borda.
 * Um card de opção com 1200px de largura não é generoso: o olho perde a linha
 * de retorno e a lista deixa de ser varrível. O conteúdo fica centrado numa
 * medida confortável, e o espaço lateral trabalha como respiro — não como
 * área a preencher.
 */
.gbcq-root.is-immersive .gbcq-stage > [data-gbcq-view] {
    width: 100%;
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
 * Rodapé em tela cheia — faixa fixa, não mais sticky
 * ----------------------------------------------------------------------- */
.gbcq-root.is-immersive .gbcq-foot {
    position: static;
    flex: 0 0 auto;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) 18px;
}

/*
 * Rodapé sem NENHUM botão visível — o caso da primeira pergunta no celular,
 * onde "Voltar" ainda não existe, "Continuar" só aparece com escolha feita e a
 * dica está escondida — vira uma faixa branca de 50px roubando altura da lista
 * de opções. Em tela cheia essa altura é finita, então ela some.
 *
 * O `:not([hidden])` não é decoração: sem ele esta regra (mais específica)
 * venceria o `display: none` de quando o JS esconde o rodapé inteiro, e o
 * rodapé reapareceria na tela de carregamento e no resultado.
 */
.gbcq-root.is-immersive .gbcq-foot:not(.is-result):not([hidden]):not(:has(> .gbcq-btn:not([hidden]))) {
    display: none;
}

/* --------------------------------------------------------------------------
 * Capa pós-saída
 *
 * Quem sai descartando as respostas não pode encontrar um quiz vazio nem um
 * spinner mentindo que algo carrega. Encontra uma frase e uma porta.
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-cover {
    display: block;
    max-width: 52ch;
    margin: 0 0 16px 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gbcq-muted);
}

.gbcq-root .gbcq-cover[hidden] {
    display: none;
}

.gbcq-root.is-dismissed .gbcq-stage,
.gbcq-root.is-dismissed .gbcq-foot,
.gbcq-root.is-dismissed .gbcq-progress {
    display: none;
}

.gbcq-root.is-dismissed .gbcq-head {
    padding-bottom: 26px;
}

.gbcq-root .gbcq-enter {
    margin: 4px 0 0 0;
}

.gbcq-root .gbcq-enter[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
 * Keyframes do takeover
 * ----------------------------------------------------------------------- */
/* A folha por dentro continua entrando com `gbcq-card-in` (via `.is-open`): o
   campo roxo revela, o palco sobe. Duas batidas, uma sensação só. */
@keyframes gbcq-takeover-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes gbcq-takeover-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
 * IMERSIVO — tablet
 * ----------------------------------------------------------------------- */
@media (min-width: 640px) {
    .gbcq-root.is-immersive .gbcq-head {
        padding: 26px 72px 0 30px;
    }

    .gbcq-root.is-immersive .gbcq-exit {
        top: 16px;
        right: 16px;
    }

    .gbcq-root.is-immersive .gbcq-stage {
        padding: 20px 30px 28px 30px;
    }

    .gbcq-root.is-immersive .gbcq-foot {
        padding: 14px 30px calc(14px + env(safe-area-inset-bottom, 0px)) 30px;
    }

    /* Daqui para cima a dica ("Clique em uma opção para continuar") volta a ser
       visível, então o rodapé sem botões continua tendo função. */
    .gbcq-root.is-immersive .gbcq-foot:not(.is-result):not([hidden]):not(:has(> .gbcq-btn:not([hidden]))) {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
 * IMERSIVO — desktop: a folha desgruda das bordas
 * ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .gbcq-root.is-immersive {
        align-items: center;
        padding: clamp(20px, 3vh, 36px) clamp(20px, 3vw, 48px);
    }

    .gbcq-root.is-immersive .gbcq-shell {
        max-width: 1240px;
        border-radius: var(--gbcq-radius-lg);
        box-shadow: var(--gbcq-shadow-stage);
    }

    .gbcq-root.is-immersive .gbcq-head {
        padding: 30px 84px 0 40px;
    }

    .gbcq-root.is-immersive .gbcq-exit {
        top: 20px;
        right: 20px;
    }

    .gbcq-root.is-immersive .gbcq-stage {
        padding: 24px 40px 32px 40px;
    }

    .gbcq-root.is-immersive .gbcq-foot {
        padding: 16px 40px;
    }
}

/* --------------------------------------------------------------------------
 * IMERSIVO — duas colunas
 *
 * A COMPOSIÇÃO MUDA AQUI, e é a única mudança estrutural que a tela cheia
 * justifica. Empilhado numa coluna central, o enunciado sobe para fora do campo
 * de visão assim que a lista de opções cresce — e o visitante rola de volta
 * para reler o que já sabia. Em duas colunas o enunciado tem lugar próprio à
 * esquerda e fica GRUDADO enquanto as opções passam à direita: a pergunta nunca
 * sai da tela e as opções ganham uma coluna estreita o bastante para o olho
 * varrer de cima a baixo.
 *
 * 1080px é onde as duas colunas passam a ter medida decente (≈460px e ≈580px).
 * Abaixo disso o empilhamento continua sendo melhor.
 * ----------------------------------------------------------------------- */
@media (min-width: 1080px) {
    .gbcq-root.is-immersive .gbcq-stage > [data-gbcq-view] {
        max-width: 1120px;
    }

    .gbcq-root.is-immersive .gbcq-question {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
        align-items: start;
        column-gap: clamp(40px, 5vw, 72px);
        row-gap: 18px;
        padding-bottom: 8px;
    }

    /* Linha própria, largura inteira: na coluna estreita da esquerda o
       último passo saía cortado. */
    .gbcq-root.is-immersive .gbcq-trail {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .gbcq-root.is-immersive .gbcq-question__lede {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: 0;
    }

    .gbcq-root.is-immersive .gbcq-options,
    .gbcq-root.is-immersive .gbcq-agegrid {
        grid-column: 2;
        grid-row: 2;
    }

    .gbcq-root.is-immersive .gbcq-question__error {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }

    /* Com coluna própria, o enunciado pode crescer sem empurrar nada. */
    .gbcq-root.is-immersive .gbcq-question__title {
        font-size: 38px;
    }

    .gbcq-root.is-immersive .gbcq-question__help {
        max-width: 34ch;
        margin-bottom: 0;
    }

    /* A coluna direita tem ~580px: partir em duas daria 270px por card, estreito
       demais para rótulo + descrição. Aqui a lista fica em uma coluna só. */
    .gbcq-root.is-immersive .gbcq-options--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .gbcq-root.is-immersive .gbcq-result__title {
        max-width: 22ch;
    }
}


/* --------------------------------------------------------------------------
 * IMERSIVO — telas muito baixas (notebook 13", celular deitado)
 *
 * Abaixo de 620px de altura o cabeçalho e o título grande roubam a lista de
 * opções inteira. Encolhe tudo em vez de deixar a pergunta sem resposta
 * visível.
 * ----------------------------------------------------------------------- */
@media (max-height: 620px) {
    .gbcq-root.is-immersive .gbcq-head {
        padding-top: 16px;
    }

    .gbcq-root.is-immersive .gbcq-question__title {
        font-size: 22px;
    }

    .gbcq-root.is-immersive .gbcq-question__help {
        margin-bottom: 14px;
        font-size: 15px;
    }

    .gbcq-root.is-immersive .gbcq-stage {
        padding-top: 12px;
    }
}

/* --------------------------------------------------------------------------
 * TABLET — a partir daqui nada afeta o celular.
 * ----------------------------------------------------------------------- */
@media (min-width: 640px) {
    .gbcq-root {
        padding-left: 24px;
        padding-right: 24px;
    }

    .gbcq-root .gbcq-head {
        padding: 28px 30px 0 30px;
    }

    .gbcq-root .gbcq-head__title {
        font-size: 24px;
    }

    .gbcq-root .gbcq-stage {
        padding: 26px 30px 10px 30px;
        min-height: 300px;
    }

    .gbcq-root .gbcq-question__title {
        font-size: 30px;
    }

    .gbcq-root .gbcq-result__title {
        font-size: 34px;
    }

    .gbcq-root .gbcq-option {
        padding: 17px 18px;
        min-height: 72px;
    }

    .gbcq-root .gbcq-agegrid {
        gap: 10px;
    }

    .gbcq-root .gbcq-age {
        min-height: 58px;
        font-size: 21px;
    }

    .gbcq-root .gbcq-foot {
        position: static;
        padding: 16px 30px;
    }

    .gbcq-root .gbcq-foot__hint {
        display: block;
        flex: 1 1 auto;
    }

    .gbcq-root .gbcq-cards {
        gap: 20px;
    }

    .gbcq-root .gbcq-course__body {
        padding: 20px 22px;
    }


}

/* --------------------------------------------------------------------------
 * MÉDIO (900px) — o ponto em que existe largura de verdade.
 *
 * Duas colunas de opção a 768px espremiam o texto; e o card de curso em linha
 * a partir de 640px era a causa do CTA vazando (P0.2). Os dois esperam aqui.
 * ----------------------------------------------------------------------- */
@media (min-width: 900px) {
    .gbcq-root .gbcq-options--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .gbcq-root .gbcq-agegrid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    /*
     * Padding lateral zero: o container do tema já dá a calha e o palco precisa
     * bater exatamente nos 1140px da grade do site. Era o desalinhamento de
     * 130px de cada lado que mais denunciava "isto não pertence à página".
     */
    .gbcq-root {
        padding-left: 0;
        padding-right: 0;
    }

    .gbcq-root .gbcq-head {
        padding: 34px 40px 0 40px;
    }

    .gbcq-root .gbcq-stage {
        padding: 30px 40px 12px 40px;
        min-height: 340px;
    }

    .gbcq-root .gbcq-question__title {
        font-size: 34px;
    }

    .gbcq-root .gbcq-result__title {
        font-size: 40px;
    }

    .gbcq-root .gbcq-foot {
        padding: 18px 40px;
    }

    .gbcq-root .gbcq-course__body {
        padding: 22px 24px;
    }
}

/* --------------------------------------------------------------------------
 * Preferências do sistema
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* Toda coreografia com deslocamento vira crossfade curto ou nada. */
    .gbcq-root .gbcq-stage > [data-gbcq-view],
    .gbcq-root .gbcq-stage > [data-gbcq-view].is-in,
    .gbcq-root .gbcq-stage.is-entering > [data-gbcq-view],
    .gbcq-root .gbcq-result.is-revealing,
    .gbcq-root.is-open .gbcq-shell {
        animation: gbcq-fade-in 140ms linear both !important;
    }

    .gbcq-root .gbcq-stage > [data-gbcq-view].is-out,
    .gbcq-root .gbcq-stage.is-leaving > [data-gbcq-view] {
        animation: none !important;
        opacity: 0 !important;
        transform: none !important;
    }

    .gbcq-root .gbcq-options.is-cascading .gbcq-option,
    .gbcq-root .gbcq-option.is-picked,
    .gbcq-root .gbcq-age.is-picked,
    .gbcq-root .gbcq-course,
    .gbcq-root .gbcq-greeting,
    .gbcq-root .gbcq-eyebrow,
    .gbcq-root .gbcq-head__eyebrow,
    .gbcq-root .gbcq-veil__logo,
    .gbcq-root .gbcq-veil img,
    .gbcq-root .gbcq-veil svg,
    .gbcq-root .gbcq-progress__fill,
    .gbcq-root .gbcq-option,
    .gbcq-root .gbcq-age,
    .gbcq-root .gbcq-btn,
    .gbcq-root .gbcq-course__cta,
    .gbcq-root .gbcq-option__check {
        animation: none !important;
        transition: none !important;
    }

    /* O véu não pode ficar preso na tela: some na hora. */
    .gbcq-root.is-open .gbcq-veil {
        animation: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }

    /* Brilho decorativo é o primeiro a cair. */
    .gbcq-root .gbcq-sheen {
        display: none !important;
    }

    .gbcq-root .gbcq-option:hover,
    .gbcq-root .gbcq-option:active,
    .gbcq-root .gbcq-option.is-dimmed,
    .gbcq-root .gbcq-age.is-dimmed,
    .gbcq-root .gbcq-btn--primary:hover,
    .gbcq-root .gbcq-btn--primary:active,
    .gbcq-root .gbcq-btn--whats:hover,
    .gbcq-root .gbcq-btn--whats:active,
    .gbcq-root .gbcq-btn--ghost:active,
    .gbcq-root .gbcq-age:active,
    .gbcq-root .gbcq-course__cta:hover,
    .gbcq-root .gbcq-course__cta:active {
        transform: none !important;
    }

    /* O takeover vira um crossfade curto. A tela cheia em si não é opcional —
       ela é a experiência; o que fica de fora é o movimento. */
    .gbcq-root.is-immersive {
        animation: gbcq-fade-in 120ms linear both !important;
    }

    /* Na saída o JS não espera nada (timeout 0), então qualquer animação aqui
       só apareceria pela metade. */
    .gbcq-root.is-immersive.is-leaving-full {
        animation: none !important;
        opacity: 0 !important;
    }

    .gbcq-root .gbcq-exit,
    .gbcq-root .gbcq-enter {
        animation: none !important;
        transition: none !important;
    }

    .gbcq-root.is-immersive .gbcq-exit:active {
        transform: none !important;
    }

    .gbcq-root .gbcq-spinner {
        animation: gbcq-spin 1400ms linear infinite !important;
    }
}

@media (prefers-contrast: more) {
    .gbcq-root .gbcq-option,
    .gbcq-root .gbcq-age {
        border-color: #6f6f7a;
    }

    .gbcq-root .gbcq-option__desc,
    .gbcq-root .gbcq-question__help,
    .gbcq-root .gbcq-result__lead,
    .gbcq-root .gbcq-state__text,
    .gbcq-root .gbcq-course__where {
        color: #3a3a45;
    }

    .gbcq-root .gbcq-course__reason {
        border-color: var(--gbcq-purple);
    }
}

/* Dispositivo sem hover (celular/tablet): remove o realce de hover que fica
   "grudado" depois do toque em iOS/Android. */
@media (hover: none) {
    .gbcq-root .gbcq-option:hover {
        border-color: var(--gbcq-line);
        background: var(--gbcq-white);
        box-shadow: none;
        transform: none;
    }

    .gbcq-root .gbcq-option.is-selected:hover,
    .gbcq-root .gbcq-option.is-picked:hover {
        border-color: var(--gbcq-purple);
        background: var(--gbcq-purple-tint);
    }

    .gbcq-root .gbcq-age:hover {
        border-color: var(--gbcq-line);
        background: var(--gbcq-white);
    }

    .gbcq-root .gbcq-age.is-selected:hover,
    .gbcq-root .gbcq-age.is-picked:hover {
        border-color: var(--gbcq-purple);
        background: var(--gbcq-purple);
        color: var(--gbcq-white);
    }

    .gbcq-root .gbcq-btn--primary:hover {
        background-image: linear-gradient(135deg, #6155cb, #8a7ff7);
        transform: none;
        box-shadow: var(--gbcq-shadow-cta);
    }

    .gbcq-root .gbcq-course__cta:hover {
        background-image: linear-gradient(135deg, #6155cb, #8a7ff7);
        transform: none;
        box-shadow: var(--gbcq-shadow-cta);
    }

    /* O realce do botão de saída ficava grudado depois do toque em iOS. */
    .gbcq-root.is-immersive .gbcq-exit:hover {
        border-color: var(--gbcq-hairline);
        background: var(--gbcq-white);
        color: var(--gbcq-ink);
    }
}

/* --------------------------------------------------------------------------
 * Resumo do filtro no cabeçalho do resultado
 *
 * Recebe os motivos que se repetiam nos três cartões. No cartão eles não
 * distinguiam nada e comiam mais da metade da altura; aqui eles dizem, de uma
 * vez, por que estes três programas foram escolhidos.
 * ----------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 * Justificativa personalizada
 *
 * O texto chega DEPOIS dos cartões, numa segunda chamada. O problema de UI é
 * esse atraso: um parágrafo que aparece de uma vez no meio da tela empurra os
 * três cartões para baixo justo quando o visitante começou a lê-los.
 *
 * A solução é animar a PRÓPRIA ALTURA do bloco, com o truque de grid
 * `0fr → 1fr`: a caixa cresce de zero até a altura natural do parágrafo, sem
 * que ninguém precise adivinhar quantas linhas o texto terá. O filho
 * intermediário (.gbcq-why__wrap) existe só para recortar o conteúdo enquanto
 * a linha ainda mede zero — sem ele, o padding do parágrafo apareceria antes
 * da animação começar.
 *
 * Navegador que não interpola grid-template-rows abre de uma vez, mas ainda
 * com o fade: degrada para "aparece", nunca para "some".
 * ----------------------------------------------------------------------- */
.gbcq-root .gbcq-why {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(6px);
    transition:
        grid-template-rows 520ms var(--gbcq-ease-in),
        opacity 420ms var(--gbcq-ease-in),
        transform 420ms var(--gbcq-ease-in);
}

.gbcq-root .gbcq-why[hidden] {
    display: none !important;
}

.gbcq-root .gbcq-why.is-in {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
}

.gbcq-root .gbcq-why__wrap {
    /* Os dois juntos, sempre: `min-height: 0` desliga o piso automático do
       item de grid e `overflow: hidden` recorta o que ainda não coube. */
    min-height: 0;
    overflow: hidden;
}

.gbcq-root .gbcq-why__text {
    display: block;
    max-width: 62ch;
    margin: 0 0 4px 0;
    /* A barra à esquerda é o que diferencia a frase da linha de apoio logo
       acima sem precisar de um título ("Por que estes?") que ninguém leria. */
    padding: 14px 18px;
    border-left: 3px solid var(--gbcq-lime-dark);
    border-radius: 0 var(--gbcq-radius-md) var(--gbcq-radius-md) 0;
    background: var(--gbcq-purple-tint);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--gbcq-ink);
}

@media (min-width: 768px) {
    .gbcq-root .gbcq-why__text {
        font-size: 16px;
        padding: 16px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gbcq-root .gbcq-why {
        transition: none;
        transform: none;
    }
}

.gbcq-root .gbcq-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0 0;
    padding: 0;
}

.gbcq-root .gbcq-filters[hidden] {
    display: none !important;
}

.gbcq-root .gbcq-filters__label {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gbcq-muted);
}

.gbcq-root .gbcq-filters__chip {
    display: inline-block;
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--gbcq-radius-pill);
    background: rgba(97, 85, 203, 0.08);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gbcq-purple-deeper);
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

@media (min-width: 768px) {
    .gbcq-root .gbcq-filters {
        margin-top: 18px;
    }

    .gbcq-root .gbcq-filters__label,
    .gbcq-root .gbcq-filters__chip {
        font-size: 14px;
    }
}


/* ==========================================================================
 * RESULTADO — densidade e ordem de leitura
 *
 * Fica no fim do arquivo de propósito: precisa vencer os tetos de largura do
 * palco (que são de medida de leitura, boa para uma pergunta e ruim para uma
 * grade de cards) e o `white-space: normal !important` dos chips.
 * ========================================================================= */

/*
 * A seção vira grade porque é ela que decide a ORDEM DE LEITURA — e no celular
 * essa ordem muda.
 *
 * OBRIGATÓRIO: `.gbcq-root .gbcq-stage > [hidden]` tem a mesma especificidade
 * desta regra. Sem a guarda abaixo, declarar `display` aqui faz o resultado
 * aparecer durante as perguntas.
 */
.gbcq-root .gbcq-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.gbcq-root .gbcq-result[hidden] {
    display: none !important;
}

/*
 * No celular o racional da IA desce para DEPOIS dos três programas.
 * São ~170px de prosa entre "aqui estão seus três programas" e o primeiro
 * programa, na única dobra que existe num 390. Abaixo dos três ele vira a nota
 * "por que estes" — que é o que se procura depois de ver as opções, não antes.
 * De quebra, chegando numa segunda chamada, ali ele já não empurra mais os
 * cards para baixo justamente quando a leitura começou.
 */
.gbcq-root .gbcq-result > .gbcq-result__title { grid-row: 1; }
.gbcq-root .gbcq-result > .gbcq-result__lead { grid-row: 2; }
.gbcq-root .gbcq-result > .gbcq-filters {
    grid-row: 3;
    /* Os chips são a legenda da grade, não o teto dela: encostados nos cards
       viravam uma faixa presa no topo do primeiro. */
    margin-bottom: 18px;
}

.gbcq-root .gbcq-result > .gbcq-cards { grid-row: 4; }
.gbcq-root .gbcq-result > .gbcq-why { grid-row: 5; margin-top: 22px; }
.gbcq-root .gbcq-result > .gbcq-relaxed { grid-row: 6; }
.gbcq-root .gbcq-result > .gbcq-result__actions { grid-row: 7; }

/* Os chips comuns em uma linha rolável no dedo. Três linhas empilhadas custam
   90px da única dobra do celular; uma linha custa 30 e não esconde chip
   nenhum. O !important vence o `normal !important` declarado acima. */
.gbcq-root .gbcq-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.gbcq-root .gbcq-filters::-webkit-scrollbar {
    display: none;
}

/* A faixa termina esmaecendo em vez de cortar no meio de um chip: cortado na
   borda parece layout quebrado; esmaecido diz "tem mais para o lado". */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
    .gbcq-root .gbcq-filters {
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    }
}

.gbcq-root .gbcq-filters__label,
.gbcq-root .gbcq-filters__chip {
    flex: 0 0 auto;
}

.gbcq-root .gbcq-filters__chip {
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    /*
     * O resultado é uma GRADE DE CARDS, não uma coluna de texto: não se submete
     * ao teto de 720px das perguntas nem ao de 1120px do imersivo. 1160 é o
     * interior do palco. Lead, racional e título continuam com medida própria,
     * então nenhum texto estica junto.
     */
    .gbcq-root.is-immersive .gbcq-stage > .gbcq-result {
        max-width: 1160px;
    }

    /* Cabeçalho em duas colunas: título e apoio à esquerda, racional da IA à
       direita, chips atravessando como ponte para a grade. Empilhado isso
       somava ~320px; lado a lado, ~172px — e os chips passam a caber numa
       linha só. */
    .gbcq-root .gbcq-result {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        column-gap: clamp(28px, 4vw, 48px);
    }

    .gbcq-root .gbcq-result > .gbcq-result__title { grid-column: 1; grid-row: 1; }
    .gbcq-root .gbcq-result > .gbcq-result__lead { grid-column: 1; grid-row: 2; }

    .gbcq-root .gbcq-result > .gbcq-why {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: start;
        margin-top: 0;
    }

    /* Sem racional — ele chega tarde, ou não chega — a coluna 2 fica vazia e o
       enunciado ficaria espremido em metade da faixa. */
    .gbcq-root .gbcq-result:not(:has(> .gbcq-why:not([hidden]))) > .gbcq-result__title,
    .gbcq-root .gbcq-result:not(:has(> .gbcq-why:not([hidden]))) > .gbcq-result__lead {
        grid-column: 1 / -1;
    }

    .gbcq-root .gbcq-result > .gbcq-filters { grid-column: 1 / -1; grid-row: 3; }
    .gbcq-root .gbcq-result > .gbcq-cards { grid-column: 1 / -1; grid-row: 4; }
    .gbcq-root .gbcq-result > .gbcq-relaxed { grid-column: 1 / -1; grid-row: 5; }
    .gbcq-root .gbcq-result > .gbcq-result__actions { grid-column: 1 / -1; grid-row: 6; }

    /* Com largura, os chips voltam a quebrar linha e a faixa rolável perde a
       razão de ser. */
    .gbcq-root .gbcq-filters {
        flex-wrap: wrap;
        overflow-x: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .gbcq-root .gbcq-filters__chip {
        white-space: normal !important;
    }

    .gbcq-root .gbcq-cards {
        gap: 20px;
    }
}

/*
 * Três colunas a partir de 960 — e não de 1024, que é onde a folha imersiva
 * desgruda das bordas e o palco PERDE largura útil: em 1023 a trilha dá 307px;
 * em 1024, 281.
 */
@media (min-width: 960px) {
    .gbcq-root .gbcq-result > .gbcq-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(20px, 2vw, 24px);
    }

    .gbcq-root .gbcq-relaxed > .gbcq-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Telefone estreito: o que sobra é apertar o card. */
@media (max-width: 429px) {
    .gbcq-root .gbcq-cards {
        gap: 14px;
    }

    .gbcq-root .gbcq-course__body {
        padding: 16px;
    }

    .gbcq-root .gbcq-course__title {
        font-size: 17px;
    }

    .gbcq-root .gbcq-course__price-value {
        font-size: 22px;
    }
}

/* O tema aplica `white-space: nowrap` em texto que vem de fora dele: sem esta
   lista, instituição, lugar e motivos são cortados na borda sem reticências. */
.gbcq-root .gbcq-course__title,
.gbcq-root .gbcq-course__where,
.gbcq-root .gbcq-course__org,
.gbcq-root .gbcq-course__reason,
.gbcq-root .gbcq-course__caveat {
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

/* No toque o :hover fica grudado depois do tap e o card continua levantado. */
@media (hover: none) {
    .gbcq-root .gbcq-course:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(26, 18, 70, 0.06), 0 12px 28px rgba(26, 18, 70, 0.08);
    }

    .gbcq-root .gbcq-course:hover .gbcq-course__cta {
        background-color: var(--gbcq-purple);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gbcq-root .gbcq-course:hover,
    .gbcq-root .gbcq-course__cta:hover,
    .gbcq-root .gbcq-course__cta:active {
        transform: none;
    }
}

/* Preço em promoção no card do resultado: o cheio cortado acima, o selo lime
   (a mesma peça da Home v3) colado ao valor novo. */
.gbcq-root .gbcq-course__price-old {
    display: block;
    color: var(--gbcq-muted, #6b6f80);
    font-size: 13px;
    font-weight: 400;
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
}

.gbcq-root .gbcq-course__price-off {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 500px;
    background: #c6e67a;
    color: #322a6f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}