/* ============================================================
   QUIZ: Núcleo Ser Plural
   Demonstração de design: Tela 1 (abertura + P1) e Tela 2 (P2)

   Herda TODOS os tokens de /style.css (mesma origem, já em cache
   para quem chegou pela LP). Aqui mora só o que é do quiz.

   Fontes: Baloo 2 (display) + Literata (corpo) + Caveat (mão).
   São as fontes da marca já validadas na LP, não um pairing novo.

   CONCEITO: na LP, o bilhete de agenda escolar carrega a acusação
   ("não parou quieto a aula inteira"). Aqui o mesmo papel pautado
   vira a FICHA que a clínica preenche sobre a criança. Mesma
   linguagem gráfica, polaridade invertida: de acusada a analisada.
   ============================================================ */

[hidden]{display:none !important;}

/* ---------- estrutura ---------- */
.q-body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* ---------- barra de progresso: a faixa do logo se acendendo ----------
   Não é uma barra genérica. É a faixa multicolor de 6 cores do logo
   (a mesma de .credencial__faixa e .passo__faixa) revelada por
   clip-path conforme a mãe avança. A marca vira o medidor. */
.q-prog{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:5px;
  background:var(--pauta);
}
.q-prog__fill{
  height:100%;
  background:linear-gradient(90deg,
    #EF4939 0 16.66%, #38AAE1 16.66% 33.33%, #F8EC2E 33.33% 50%,
    #5BBA51 50% 66.66%, #302F5F 66.66% 83.33%, #862B6E 83.33% 100%);
  /* a largura do gradiente é sempre a tela inteira; o que cresce é o
     recorte. Assim as cores não se espremem conforme avança. */
  width:100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .45s cubic-bezier(.22,.61,.36,1);
}

/* ---------- topo ---------- */
.q-top{
  padding:.8rem 0 .2rem;
  position:relative; z-index:1;
}
.q-top__in{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.q-logo{display:inline-flex;}
.q-logo img{width:132px; height:auto; display:block;}
.q-voltar{
  border:0; background:none; cursor:pointer;
  font-family:var(--corpo); font-size:.86rem; color:var(--tinta-2);
  padding:.7rem .2rem; min-height:44px;
  display:inline-flex; align-items:center; gap:.35rem;
}
.q-voltar:hover{color:var(--azul-ui);}
.q-voltar:focus-visible{outline:3px solid var(--azul); outline-offset:2px; border-radius:6px;}

/* ---------- palco ---------- */
.q-main{flex:1 0 auto; padding:.6rem 0 2.6rem;}
.q-palco{position:relative; z-index:1;}

/* ---------- abertura ---------- */
.q-h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.42rem, 5.4vw, 2.35rem);
  line-height:1.14; letter-spacing:-.014em;
  color:var(--tinta);
  margin:.2rem 0 .5rem; max-width:20ch;
  text-wrap:balance;
}
.q-sub{
  font-size:clamp(.91rem, 2.3vw, 1.08rem);
  line-height:1.46; color:var(--tinta-2);
  margin:0 0 .8rem; max-width:48ch;
}

/* faixa de confiança: compacta, porque disputa a dobra com a pergunta 1 */
.q-conf{margin:0 0 .95rem;}
.q-conf__linha{
  margin:.42rem 0 0;
  font-size:.77rem; line-height:1.4; color:var(--tinta-2);
}
.q-conf__linha strong{color:var(--tinta); font-weight:600;}

/* ---------- cartão da pergunta ----------
   Off-grid discreto: o cartão sangra 1.2rem além do wrap no mobile,
   colando nas bordas da tela. Ganha área de toque sem parecer maior. */
.q-card{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:16px;
  padding:1.1rem 1rem 1.15rem;
  box-shadow:var(--sombra-papel);
  margin-inline:-.2rem;
}
.q-num{
  font-family:var(--corpo); font-weight:600;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul-ui);
  margin:0 0 .38rem;
}
.q-q{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.16rem, 3.4vw, 1.5rem);
  line-height:1.24; letter-spacing:-.008em;
  color:var(--tinta);
  margin:0 0 .25rem; max-width:24ch;
}
.q-apoio{
  font-size:.87rem; color:var(--tinta-2);
  margin:0 0 .95rem; max-width:52ch;
}
.q-q + .q-ops{margin-top:.85rem;}

/* ---------- opções ---------- */
.q-ops{display:grid; gap:.45rem;}
.q-op{
  /* alvo generoso: é a única coisa que ela precisa acertar com o dedo */
  min-height:54px;
  display:flex; align-items:center; gap:.75rem;
  width:100%;
  text-align:left;
  font-family:var(--corpo); font-size:.98rem; line-height:1.35;
  color:var(--tinta);
  background:var(--papel);
  border:1.5px solid var(--borda);
  border-radius:12px;
  padding:.72rem .9rem;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.q-op:hover{border-color:var(--azul); background:var(--branco);}
.q-op:active{transform:scale(.988);}
.q-op:focus-visible{outline:3px solid var(--azul); outline-offset:2px;}

/* marcador: círculo vazio que vira o azul da marca com o traço branco */
.q-op__mk{
  flex:0 0 22px; width:22px; height:22px;
  border:2px solid var(--pauta); border-radius:50%;
  display:grid; place-items:center;
  transition:border-color .16s ease, background .16s ease;
}
.q-op__mk::after{
  content:""; width:9px; height:5px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  rotate:-45deg; translate:0 -1px;
  opacity:0; transition:opacity .14s ease;
}
.q-op:hover .q-op__mk{border-color:var(--azul);}
.q-op.is-on{border-color:var(--azul); background:var(--branco);}
.q-op.is-on .q-op__mk{background:var(--azul); border-color:var(--azul);}
.q-op.is-on .q-op__mk::after{opacity:1;}

/* ---------- ficha da clínica ----------
   O elemento que a mãe vai lembrar. Mesmo papel pautado do bilhete
   da LP, com as respostas dela sendo escritas à mão em Caveat.
   No mobile ela não existe como painel (ocuparia a dobra): as
   respostas viram chips logo abaixo do cartão. */
.q-ficha{display:none;}
.q-ficha__papel{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:6px;
  padding:1.4rem 1.4rem 1.3rem 2.5rem;
  box-shadow:var(--sombra-papel);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 33px, var(--pauta) 33px 34px);
  background-position:0 2.6rem;
  position:relative;
  rotate:-1.1deg; /* nunca em transform: o AOS escreveria por cima */
}
.q-ficha__papel::before{
  content:"";
  position:absolute; left:.8rem; top:1.2rem; bottom:1.2rem; width:9px;
  background-image:radial-gradient(circle at 50% 12px, var(--papel-2) 4.5px, transparent 5px);
  background-size:9px 34px; opacity:.9;
}
.q-ficha__faixa{
  position:absolute; inset:0 0 auto 0; height:5px;
  border-radius:6px 6px 0 0;
  background:linear-gradient(90deg,
    #EF4939 0 16.66%, #38AAE1 16.66% 33.33%, #F8EC2E 33.33% 50%,
    #5BBA51 50% 66.66%, #302F5F 66.66% 83.33%, #862B6E 83.33% 100%);
}
.q-ficha__rot{
  display:block; font-family:var(--corpo); font-weight:600;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-2); margin:.3rem 0 1rem;
}
.q-ficha__lista{list-style:none; margin:0; padding:0;}
.q-ficha__lista li{
  line-height:34px; /* casa com o passo da pauta */
  display:flex; gap:.6rem; align-items:baseline;
}
.q-ficha__k{
  flex:0 0 6.2rem;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-2);
}
.q-ficha__v{
  font-family:var(--mao); font-size:1.24rem; color:var(--azul-ui);
  opacity:0; translate:0 4px;
  transition:opacity .3s ease, translate .3s ease;
}
.q-ficha__v.is-on{opacity:1; translate:0 0;}
.q-ficha__v:empty::after{
  content:"·  ·  ·"; color:var(--tinta-2); opacity:.42; letter-spacing:.2em;
  font-family:var(--corpo); font-size:.8rem;
}

/* chips no mobile, no lugar da ficha */
.q-chips{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:1rem 0 0; padding:0; list-style:none;
}
.q-chips li{
  background:var(--papel-2); border:1px solid var(--borda);
  border-radius:999px; padding:.3rem .7rem;
  font-size:.78rem; color:var(--tinta-2);
}
.q-chips li strong{color:var(--tinta); font-weight:600;}

/* ---------- transição entre telas ----------
   Curta de propósito. Transição longa em quiz é atrito disfarçado
   de refinamento, e o A/B do Ouro VTurb mostra que custa conversão. */
.q-tela{animation:q-entra .24s ease-out both;}
@keyframes q-entra{
  from{opacity:0; translate:0 10px;}
  to{opacity:1; translate:0 0;}
}
/* a tela 1 é a dobra de entrada: nunca anima (mesma regra do hero) */
.q-tela--primeira{animation:none;}

/* ---------- rodapé ---------- */
.q-rodape{
  flex:0 0 auto;
  border-top:1px solid var(--borda);
  padding:1.2rem 0 1.6rem;
  position:relative; z-index:1;
}
.q-rodape p{
  margin:0; font-size:.75rem; line-height:1.5; color:var(--tinta-2);
  max-width:66ch;
}
.q-rodape strong{color:var(--tinta); font-weight:600;}
.q-rodape a{color:var(--tinta-2); text-underline-offset:3px;}
.q-rodape a:hover{color:var(--azul-ui);}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:900px){
  .q-top{padding:1.5rem 0 .4rem;}
  .q-logo img{width:158px;}
  .q-main{padding:1.4rem 0 3.4rem;}

  /* a partir daqui a ficha existe: split assimétrico, pergunta
     com mais peso que o painel de acompanhamento */
  .q-palco{
    display:grid;
    grid-template-columns:1fr minmax(280px, 350px);
    gap:3.2rem;
    align-items:start;
  }
  .q-ficha{display:block; position:sticky; top:2.4rem;}

  .q-card{
    padding:1.9rem 1.8rem 1.75rem;
    margin-inline:0;
    border-radius:18px;
  }
  .q-ops{gap:.6rem;}
  .q-op{font-size:1.02rem; padding:.95rem 1.15rem;}

  .q-conf{
    display:flex; align-items:center; gap:1rem 1.4rem;
    flex-wrap:wrap; margin-bottom:1.8rem;
  }
  .q-conf__linha{margin:0;}

  .q-chips{display:none;} /* a ficha já mostra isso melhor */
}

@media (min-width:1100px){
  .q-palco{gap:4rem;}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .q-ficha__v{opacity:1; translate:0 0;}
  .q-prog__fill{transition:none;}
}

/* ============================================================
   TELA 4: grid de duas colunas (opções curtas)
   ============================================================ */
@media (min-width:640px){
  .q-ops--duas{grid-template-columns:1fr 1fr; gap:.6rem;}
}

/* ============================================================
   TELA 5: dados
   ============================================================ */
.q-campos{display:grid; gap:1rem; margin:0 0 1.2rem;}
.q-campo{display:block;}
.q-campo__lab{
  display:block;
  font-family:var(--corpo); font-weight:600; font-size:.82rem;
  color:var(--tinta-2); margin-bottom:.3rem;
}
.q-campo input{
  width:100%;
  min-height:52px;
  padding:.8rem .9rem;
  border:1.5px solid var(--borda);
  border-radius:12px;
  font-family:var(--corpo); font-size:1rem;
  color:var(--tinta);
  background:var(--papel);
  transition:border-color .16s ease;
}
.q-campo input::placeholder{color:var(--tinta-2); opacity:.62;}
.q-campo input:focus{
  border-color:var(--azul);
  outline:3px solid var(--azul); outline-offset:2px;
}
.q-campo.is-erro input{border-color:#B22A18;}
.q-campo__erro{
  display:none;
  margin:.35rem 0 0;
  font-size:.82rem; color:#B22A18; line-height:1.35;
}
.q-campo.is-erro .q-campo__erro{display:block;}

/* grupo de cidade: mesmo componente de opção, alvo menor */
.q-grupo__lab{
  display:block;
  font-family:var(--corpo); font-weight:600; font-size:.82rem;
  color:var(--tinta-2); margin:0 0 .45rem;
}
.q-cidades{display:grid; grid-template-columns:1fr 1fr; gap:.45rem;}
.q-cidades .q-op{min-height:48px; font-size:.9rem; padding:.6rem .75rem;}
.q-cidades .q-op__mk{flex:0 0 18px; width:18px; height:18px;}
.q-cidades .q-op__mk::after{width:7px; height:4px;}
.q-grupo.is-erro .q-op{border-color:#B22A18;}
.q-grupo__erro{
  display:none; margin:.35rem 0 0;
  font-size:.82rem; color:#B22A18;
}
.q-grupo.is-erro .q-grupo__erro{display:block;}

/* consentimento */
.q-consent{
  display:flex; align-items:flex-start; gap:.65rem;
  margin:1.3rem 0 1.1rem;
  cursor:pointer;
  padding:.3rem 0;
}
.q-consent input{
  flex:0 0 22px; width:22px; height:22px;
  margin:.1rem 0 0;
  accent-color:var(--azul);
  cursor:pointer;
}
.q-consent input:focus-visible{outline:3px solid var(--azul); outline-offset:2px;}
.q-consent span{font-size:.86rem; line-height:1.45; color:var(--tinta-2);}
.q-consent a{color:var(--azul-ui); text-underline-offset:3px;}
.q-consent.is-erro span{color:#B22A18;}

.q-enviar{width:100%; min-height:56px; text-align:center;}
.q-enviar[disabled]{opacity:.7; cursor:wait;}
.q-micro{
  margin:.85rem 0 0;
  font-size:.82rem; line-height:1.45; color:var(--tinta-2);
}
.q-falha{
  display:none;
  margin:0 0 .9rem;
  padding:.8rem .95rem;
  border-left:4px solid #B22A18;
  border-radius:0 10px 10px 0;
  background:#FDF1EF;
  font-size:.88rem; color:#8E2214; line-height:1.45;
}
.q-falha.is-on{display:block;}

/* ============================================================
   TELAS DE RESULTADO
   ============================================================ */
.q-selo{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px;
  border-radius:999px;
  padding:.5rem 1rem;
  font-family:var(--corpo); font-weight:600;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 1rem;
}
/* verde medido: --verde (#5BBA51) daria 2.34 sobre papel e reprovaria
   o mínimo de 3.0 da WCAG 1.4.11 para componente. Não trocar pelo token. */
.q-selo--ok{background:#EAF7E8; border:1.5px solid #469B3C; color:#2E6B28;}
.q-selo--neutro{background:var(--papel-2); border:1.5px solid var(--borda); color:var(--tinta-2);}
.q-selo svg{flex:0 0 16px;}
.q-selo--ok{animation:q-selo-in .42s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes q-selo-in{from{opacity:0; scale:.92;} to{opacity:1; scale:1;}}

.q-res__h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem, 5vw, 2.4rem);
  line-height:1.16; letter-spacing:-.014em;
  color:var(--tinta);
  margin:0 0 .6rem; max-width:22ch;
  text-wrap:balance;
}
.q-res__sub{
  font-size:clamp(.96rem, 2.3vw, 1.08rem);
  line-height:1.55; color:var(--tinta-2);
  margin:0 0 1.5rem; max-width:52ch;
}

/* ficha de recapitulação: aparece também no mobile */
.q-res--grid{display:grid; grid-template-columns:1fr;}
.q-ficha--res{display:block; margin:0 0 1.8rem;}
.q-ficha--res .q-ficha__papel{rotate:-.8deg;}

/* três blocos do que acontece na consulta */
.q-passos{display:grid; gap:1.4rem; margin:0 0 1.9rem;}
.q-passo{display:flex; gap:.95rem; align-items:flex-start;}
.q-passo__n{
  flex:0 0 40px; width:40px; height:40px;
  border-radius:50%; background:var(--papel-2);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1.6rem;
  line-height:1; color:var(--azul);
}
.q-passo__t{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  line-height:1.3; color:var(--tinta); margin:.3rem 0 .25rem;
}
.q-passo__c{font-size:.95rem; color:var(--tinta-2); margin:0; max-width:52ch;}

/* bloco de agendamento */
.q-oferta{
  background:var(--papel-2);
  border-left:4px solid var(--azul);
  border-radius:0 14px 14px 0;
  padding:1.5rem 1.4rem;
  margin:0 0 1.3rem;
}
.q-oferta__t{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  line-height:1.3; color:var(--tinta); margin:0 0 .7rem;
}
.q-oferta__total{font-size:1rem; color:var(--tinta); margin:0 0 .9rem;}
.q-oferta__agora{
  display:block;
  font-family:var(--display); font-weight:700; font-size:1.5rem;
  line-height:1.1; color:var(--tinta); margin:0;
}
.q-oferta__depois{
  display:block; font-size:.95rem; color:var(--tinta-2);
  margin:.15rem 0 1rem;
}
.q-oferta__pq{
  border-top:1px dashed var(--borda);
  padding-top:.9rem; margin:0;
  font-size:.92rem; line-height:1.5; color:var(--tinta-2);
}

.q-cta{width:100%; min-height:56px; text-align:center;}
.q-cta__micro{
  margin:.85rem 0 0;
  font-size:.85rem; line-height:1.45; color:var(--tinta-2);
}

/* "já paguei": revelado no clique do pagamento */
.q-japaguei{
  margin:1.4rem 0 0;
  border:1.5px dashed var(--borda);
  border-radius:12px;
  padding:1.1rem;
  animation:q-entra .4s ease-out both;
}
.q-japaguei__t{
  font-family:var(--display); font-weight:700; font-size:1rem;
  color:var(--tinta); margin:0 0 .3rem;
}
.q-japaguei a{
  color:var(--azul-ui); font-size:.95rem;
  display:inline-flex; align-items:center; min-height:44px;
  text-underline-offset:3px;
}

/* link secundário discreto (tela 6-C): texto, nunca botão */
.q-sec{
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:.9rem;
  font-size:.9rem; color:var(--tinta-2);
  text-underline-offset:3px;
}
.q-sec:hover{color:var(--azul-ui);}

/* lista de modalidades (tela 6-C) reusa .equipe do /style.css.
   Nome próprio: q-modal__* pertence ao dialog de convênio. */
.q-modalidades__t{
  font-family:var(--corpo); font-weight:600;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-2); margin:0 0 .7rem;
}

/* rodapé de confiança dentro da tela de resultado */
.q-conf-res{
  margin:1.8rem 0 0; padding-top:1.2rem;
  border-top:1px solid var(--borda);
  font-size:.78rem; line-height:1.5; color:var(--tinta-2);
}

/* ============================================================
   DESKTOP: telas de resultado
   ============================================================ */
@media (min-width:900px){
  .q-cidades{grid-template-columns:1fr 1fr;}
  .q-enviar, .q-cta{width:auto; min-width:280px;}

  /* No desktop a ficha sobe para a coluna da direita e atravessa as
     duas linhas de conteúdo. No mobile ela fica na ordem do DOM, que
     já é topo, ficha, baixo: a mãe lê a aprovação, vê a ficha do que
     respondeu e só então chega na oferta. */
  .q-res--grid{
    grid-template-columns:1fr minmax(300px, 380px);
    gap:0 3.2rem; align-items:start;
  }
  .q-res__topo{grid-column:1; grid-row:1;}
  .q-res__baixo{grid-column:1; grid-row:2;}
  .q-res--grid .q-ficha--res{
    grid-column:2; grid-row:1 / span 2;
    position:sticky; top:2.4rem; margin:0;
  }
  .q-oferta{padding:1.9rem 1.8rem;}
  .q-selo{margin-bottom:1.2rem;}
}

@media (prefers-reduced-motion:reduce){
  .q-selo--ok, .q-japaguei{animation:none !important;}
}

/* ============================================================
   ESTADO DE RESULTADO
   A ficha lateral das perguntas some, porque cada tela de
   resultado carrega a sua própria versão preenchida.
   ============================================================ */
.q-palco.is-res #ficha-lateral{display:none;}
@media (min-width:900px){
  .q-palco.is-res{grid-template-columns:1fr;}
}

/* ============================================================
   FOCO PROGRAMÁTICO
   Ao trocar de tela movemos o foco para o título, para o leitor de
   tela anunciar a tela nova. Esses títulos têm tabindex="-1", então
   não são alcançáveis por Tab e o anel de foco só apareceria como
   um retângulo solto na tela. O foco por teclado continua visível
   em tudo que é de fato tabulável.
   ============================================================ */
.q-q[tabindex="-1"]:focus,
.q-res__h1[tabindex="-1"]:focus{outline:none;}

/* ============================================================
   LISTA DE MODALIDADES (tela 6-C)
   O /style.css transforma .equipe em carrossel lateral abaixo de
   900px, o que faz sentido na Seção 6 da LP mas aqui empurra o
   documento para 972px e cria rolagem horizontal. Numa tela de
   resultado a leitura é vertical: as pílulas quebram em linha.
   ============================================================ */
.q-res__baixo .equipe{
  flex-wrap:wrap;
  overflow-x:visible;
  max-width:100%;
  margin-bottom:1.6rem;
}

/* ============================================================
   MODAL DE CONVÊNIO
   Abre quando a mãe marca um plano que a clínica não atende ou diz
   que ainda não sabe. É bloqueante de propósito: sem definir a via
   de pagamento o lead chega na recepção achando que o plano cobre,
   e aí a conversa começa por uma negativa.
   Ela resolve dentro do próprio modal, sem ter que voltar na lista.
   ============================================================ */
.q-modal{
  width:min(100% - 2rem, 460px);
  margin:auto;                 /* centra vertical e horizontal */
  padding:0;
  border:0;
  border-radius:18px;
  background:var(--branco);
  color:var(--tinta);
  box-shadow:0 32px 70px -22px rgba(10,44,87,.65);
  overflow:hidden;
}
.q-modal::backdrop{
  background:rgba(10,44,87,.58);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.q-modal[open]{animation:q-modal-in .28s cubic-bezier(.22,.61,.36,1) both;}
@keyframes q-modal-in{
  from{opacity:0; scale:.96; translate:0 10px;}
  to{opacity:1; scale:1; translate:0 0;}
}

.q-modal__faixa{
  display:block; height:5px;
  background:linear-gradient(90deg,
    #EF4939 0 16.66%, #38AAE1 16.66% 33.33%, #F8EC2E 33.33% 50%,
    #5BBA51 50% 66.66%, #302F5F 66.66% 83.33%, #862B6E 83.33% 100%);
}

.q-modal__in{padding:1.5rem 1.35rem 1.4rem; position:relative;}

.q-modal__x{
  position:absolute; top:.2rem; right:.2rem;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:0; background:none; cursor:pointer;
  color:var(--tinta-2); font-size:1.5rem; line-height:1;
  border-radius:8px;
}
.q-modal__x:hover{color:var(--tinta); background:var(--papel-2);}
.q-modal__x:focus-visible{outline:3px solid var(--azul); outline-offset:-2px;}

.q-modal__t{
  font-family:var(--display); font-weight:700;
  font-size:1.22rem; line-height:1.25;
  color:var(--tinta); margin:0 2rem .5rem 0;
}
.q-modal__c{
  font-size:.93rem; line-height:1.55;
  color:var(--tinta-2); margin:0 0 1.3rem;
}
.q-modal__c strong{color:var(--tinta); font-weight:600;}

.q-modal__q{
  font-family:var(--corpo); font-weight:600;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2);
  margin:0 0 .7rem;
  padding-top:1.1rem;
  border-top:1px dashed var(--borda);
}

.q-modal__ops{display:grid; gap:.5rem;}
.q-modal__op{
  position:relative;
  min-height:56px;
  display:flex; flex-direction:column; justify-content:center;
  gap:.15rem;
  width:100%; text-align:left;
  font-family:var(--corpo);
  background:var(--papel);
  border:1.5px solid var(--borda);
  border-radius:12px;
  padding:.75rem 1rem;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.q-modal__op:hover{border-color:var(--azul); background:var(--branco);}
.q-modal__op:active{transform:scale(.988);}
.q-modal__op:focus-visible{outline:3px solid var(--azul); outline-offset:2px;}
.q-modal__op strong{
  font-family:var(--display); font-weight:700;
  font-size:1.02rem; line-height:1.25; color:var(--tinta);
}
.q-modal__op span{font-size:.82rem; line-height:1.35; color:var(--tinta-2);}

/* selo de recomendação no particular: a nota fiscal é o motivo real,
   e ele está escrito na própria linha de apoio do botão */
.q-modal__rec{
  display:inline-block; vertical-align:middle;
  margin-left:.45rem; translate:0 -1px;
  font-family:var(--corpo); font-weight:600;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:#2E6B28; background:#EAF7E8;
  border:1px solid #469B3C; border-radius:999px;
  padding:.18rem .48rem;
  white-space:nowrap;
}

@media (min-width:900px){
  .q-modal{width:min(100% - 2rem, 500px);}
  .q-modal__in{padding:1.8rem 1.7rem 1.7rem;}
  .q-modal__t{font-size:1.4rem;}
}

@media (prefers-reduced-motion:reduce){
  .q-modal[open]{animation:none;}
}

/* ============================================================
   PROVA SOCIAL NA TELA DE RESULTADO
   Bloco escuro logo antes da oferta: é o último argumento antes
   de ela decidir pagar. Reusa .gprova do /style.css, que já sabe
   lidar com prints de tema escuro, num berço próprio.
   ============================================================ */
.q-social{
  background:var(--tinta);
  border-radius:16px;
  padding:1.4rem 1.2rem 1.3rem;
  margin:0 0 1.6rem;
}
.q-social__t{
  font-family:var(--display); font-weight:700;
  font-size:1.1rem; line-height:1.3;
  color:#fff; margin:0 0 .3rem;
}
.q-social__c{
  font-size:.88rem; line-height:1.5;
  color:rgba(255,255,255,.8);
  margin:0 0 1.1rem;
}
.q-social .gprova{margin:0;}
.q-social .gprova__lista{gap:.7rem;}
.q-social .gprova__lista li{flex:0 0 min(78vw, 300px);}

/* selo da nota, na mesma faixa escura */
.q-social__nota{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:.45rem .9rem;
  margin:0 0 1rem;
  min-height:44px;
}
.q-social__nota strong{
  font-family:var(--display); font-weight:700;
  font-size:1.2rem; color:#fff; line-height:1;
}
.q-social__nota span{font-size:.82rem; color:rgba(255,255,255,.85);}
.q-social__estrelas{color:#F2A322; letter-spacing:.06em; font-size:.9rem;}

@media (min-width:900px){
  .q-social{padding:1.7rem 1.6rem 1.6rem;}
  /* uma coluna: a de resultado já é estreita e duas ficariam ilegíveis */
  .q-social .gprova__lista{grid-template-columns:1fr;}
}