/* Cabeçalho e rodapé padrão — usado por todas as páginas e ferramentas.
   Só depende das variáveis de marca; se a página não as declarar, cai nos
   valores da própria paleta. */
.rhc-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:1400px;margin:0 auto;padding:16px clamp(18px,5vw,60px)}
.rhc-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.rhc-logo svg{width:47.5px;height:40px;flex:none;display:block}
.rhc-wordmark{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:1.24rem;
  color:var(--text,#F8FAFC)}
.rhc-wordmark span{background:var(--grad,linear-gradient(90deg,#FF6B4A,#22D3EE,#7C5CFF));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rhc-nav{display:flex;gap:8px;flex-wrap:wrap}
.rhc-nav a{padding:9px 18px;border-radius:99px;font-weight:600;font-size:.95rem;text-decoration:none;
  color:var(--muted,#94A3B8);border:1px solid var(--border,rgba(148,163,184,.16));
  transition:color .2s,border-color .2s}
.rhc-nav a:hover{color:var(--text,#F8FAFC);border-color:var(--secondary,#22D3EE)}

.rhc-rodape{margin-top:clamp(40px,8vh,90px);border-top:1px solid var(--border,rgba(148,163,184,.16));
  background:rgba(11,15,26,.6)}
.rhc-rodape-in{max-width:1240px;margin:0 auto;padding:clamp(28px,5vh,52px) clamp(18px,5vw,60px) clamp(20px,3vh,34px);
  display:grid;gap:clamp(24px,4vw,54px);grid-template-columns:1fr}
@media(min-width:820px){.rhc-rodape-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1.75fr)}}
.rhc-r-marca p{color:var(--muted,#94A3B8);font-size:.95rem;line-height:1.65;margin-top:14px;max-width:42ch}
.rhc-r-cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rhc-r-cols h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--secondary,#22D3EE);margin-bottom:12px;font-weight:700}
.rhc-r-cols a{display:block;padding:5px 0;color:var(--muted,#94A3B8);text-decoration:none;font-size:.96rem;
  transition:color .18s}
.rhc-r-cols a:hover{color:var(--text,#F8FAFC)}
.rhc-r-fim{max-width:1240px;margin:0 auto;padding:16px clamp(18px,5vw,60px) 26px;
  border-top:1px solid rgba(148,163,184,.1);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:var(--muted,#94A3B8);font-size:.86rem}
@media(max-width:620px){.rhc-r-fim{flex-direction:column;gap:6px}}

/* ---------------------------------------------------------------------------
   PADRÃO DAS FERRAMENTAS
   Vale para toda ferramenta do catálogo, não só para as duas de hoje.

   1. faixa-jogo — o nome do jogo tem UM lugar: centralizado, com o símbolo
      próprio da ferramenta, filetes laterais e corpo maior que a wordmark do
      cabeçalho. A logo é assinatura; o jogo é o título.
   2. nota-ferramenta — a frase curta sobre como a ferramenta funciona
      ("tudo roda no seu navegador", "sala ao vivo…") fica logo ABAIXO do botão
      de ação principal, onde a pessoa está olhando ao decidir. Solta no meio ou
      no pé da página, ela vira ruído.
   --------------------------------------------------------------------------- */
.faixa-jogo{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);width:100%;
  margin:0 auto clamp(12px,1.8vh,22px)}
.fj-fio{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(148,163,184,.32),transparent)}
.fj-nome{flex:none;display:inline-flex;align-items:center;gap:11px;
  font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;line-height:1;white-space:nowrap;
  font-size:clamp(1.3rem,2.2vw,1.85rem);letter-spacing:-.01em;color:var(--text,#F8FAFC)}
.fj-nome em{font-style:normal;background:var(--grad,linear-gradient(90deg,#FF6B4A,#22D3EE,#7C5CFF));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fj-nome .sb{flex:none;display:block}
@media(max-width:600px){
  .faixa-jogo{gap:10px;margin-bottom:14px}
  .fj-nome{font-size:1.32rem;gap:9px}
}
.nota-ferramenta{margin:14px 0 0;text-align:center;color:var(--muted,#94A3B8);
  font-size:.95rem;line-height:1.6}
.nota-ferramenta b{color:var(--text,#F8FAFC)}

/* ---------------------------------------------------------------------------
   3. bloco-etapa — cabeçalho padrão dos cartões de montagem de qualquer
      ferramenta. O número da etapa fica em um disco ancorado na BORDA do
      cartão (metade para fora), o ícone identifica o assunto e o título fecha
      a linha, com um filete separando do conteúdo.

      Por que na borda: dentro do cartão o número disputava espaço com o ícone
      e empurrava o título; na borda ele vira marcador de sequência — lê-se a
      coluna de números antes de ler os títulos.
   --------------------------------------------------------------------------- */
.bloco-etapa{display:flex;align-items:center;gap:11px;
  font-family:"Space Grotesk",system-ui,sans-serif;font-size:1.1rem;line-height:1.2;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(148,163,184,.14)}
/* O disco fica montado no CANTO do cartão: o centro cai exatamente sobre o
   vértice, então metade sobra para fora nos dois eixos e as duas metades ficam
   simétricas na horizontal e na vertical. Pequeno e sem brilho: é marcador de
   sequência, não elemento de destaque. Exige `position:relative` no cartão
   (cada ferramenta declara isso na sua classe de cartão). */
.be-n{position:absolute;top:0;left:0;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.76rem;color:#fff;
  background:linear-gradient(140deg,#7C5CFF,#22D3EE);
  box-shadow:0 0 0 3px var(--bg,#0B0F1A)}
.be-ic{flex:none;width:24px;height:24px;color:var(--secondary,#22D3EE)}
.be-ic svg{width:100%;height:100%}
.be-tit{flex:1;min-width:0}
.be-extra{flex:none;font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--muted,#94A3B8);
  padding:3px 10px;border-radius:99px;border:1px solid rgba(148,163,184,.25)}
/* em tela estreita o cartão encosta na borda e metade do disco seria cortada:
   ele volta para dentro da linha do título */
@media(max-width:900px){
  .be-n{position:static;transform:none;width:26px;height:26px;box-shadow:none}
}

/* ---------------------------------------------------------------------------
   4. guia — bloco "Como funciona", colapsado por padrão, no topo da montagem de
      TODA ferramenta. Traz o passo a passo encenado (.palco-fases) e os blocos
      de leitura (.g-blocos). Quem já conhece não é obrigado a passar por ele;
      quem nunca conduziu tem o roteiro antes de começar.
   --------------------------------------------------------------------------- */
.guia{margin-top:16px;border:1px solid rgba(148,163,184,.2);border-radius:18px;background:var(--bg2,#141B2E);overflow:hidden}
.guia > summary{display:flex;align-items:center;gap:13px;padding:15px 18px;cursor:pointer;list-style:none}
.guia > summary::-webkit-details-marker{display:none}
.guia > summary:hover{background:rgba(124,92,255,.06)}
.guia summary b{display:block;font-size:1.02rem}
.guia summary small{color:var(--muted,#94A3B8);font-size:.9rem}
.guia .g-ic{flex:none;width:26px;height:26px;color:var(--secondary,#22D3EE)}
.guia .g-ic svg{width:100%;height:100%}
.guia .g-seta{margin-left:auto;color:var(--muted,#94A3B8);transition:transform .25s var(--spring,cubic-bezier(.34,1.56,.64,1))}
.guia[open] > summary .g-seta{transform:rotate(180deg);color:var(--secondary,#22D3EE)}
.guia[open] > summary{border-bottom:1px solid rgba(148,163,184,.14)}
.guia-corpo{padding:16px 18px 20px}
.g-int{font-size:1.02rem;line-height:1.6;margin-bottom:16px}
.g-fases{display:grid;gap:10px;margin-bottom:18px}
@media(min-width:900px){.g-fases{grid-template-columns:repeat(3,1fr)}}
.g-fase{display:flex;gap:12px;padding:13px 15px;border-radius:14px;background:var(--bg,#0B0F1A);
  border:1px solid rgba(148,163,184,.16)}
.g-n{flex:none;width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-weight:700;background:linear-gradient(140deg,#7C5CFF,#22D3EE);color:#fff}
.g-fase b{font-size:1rem}
.g-fase em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--secondary,#22D3EE);margin-left:6px}
.g-fase p{color:var(--muted,#94A3B8);font-size:.95rem;line-height:1.55;margin-top:5px}
.g-fase p b, .guia-corpo li b{color:var(--text,#F8FAFC)}
.g-cols{display:grid;gap:18px}
@media(min-width:900px){.g-cols{grid-template-columns:1fr 1fr}}
.guia-corpo h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--secondary,#22D3EE);margin-bottom:8px}
.guia-corpo h4 + ul{margin-bottom:14px}
.guia-corpo ul{list-style:none;display:grid;gap:7px}
.guia-corpo li{position:relative;padding-left:18px;font-size:.97rem;line-height:1.55;color:var(--muted,#94A3B8)}
.guia-corpo li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:2px;
  background:linear-gradient(140deg,#FF6B4A,#7C5CFF)}
.g-nota{margin-top:10px;color:var(--muted,#94A3B8);font-size:.92rem;line-height:1.55}
.g-quando{margin-top:16px;padding:12px 16px;border-radius:12px;font-size:.95rem;line-height:1.55;
  border:1px solid rgba(255,107,74,.3);background:rgba(255,107,74,.07);color:#FECACA}
.g-fontes{margin-top:16px;border-top:1px solid rgba(148,163,184,.14);padding-top:12px}
.g-fontes summary{cursor:pointer;color:var(--secondary,#22D3EE);font-size:.92rem;font-weight:600}
.g-fontes p{color:var(--muted,#94A3B8);font-size:.93rem;line-height:1.6;margin:10px 0}
.g-fontes li{font-size:.9rem}

/* passo a passo encenado */
.palco-fases{margin:16px 0 20px;border:1px solid rgba(148,163,184,.18);border-radius:18px;
  background:var(--bg,#0B0F1A);overflow:hidden}
/* cinco passos: cabem em uma linha no monitor e viram duas no celular */
.pf-abas{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid rgba(148,163,184,.14)}
@media(max-width:760px){.pf-abas{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.pf-abas{grid-template-columns:repeat(2,1fr)}}
.pf-aba{display:flex;align-items:center;gap:9px;padding:12px 14px;border-right:1px solid rgba(148,163,184,.1);
  color:var(--muted,#94A3B8);transition:background .2s,color .2s}
.pf-aba:last-child{border-right:0}
.pf-aba[aria-selected="true"]{color:var(--text,#F8FAFC);background:rgba(124,92,255,.12)}
.pf-n{flex:none;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.78rem;
  background:var(--bg2,#141B2E);border:1px solid rgba(148,163,184,.22)}
.pf-aba[aria-selected="true"] .pf-n{background:linear-gradient(140deg,#7C5CFF,#22D3EE);color:#fff;border-color:transparent}
.pf-aba b{font-size:.92rem;line-height:1.2}
.pf-aba em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--muted,#94A3B8)}
@media(max-width:900px){.pf-aba em{display:none}}
@media(max-width:640px){.pf-aba{padding:10px;gap:7px}}
.pf-palco{padding:16px;min-height:238px}
.cena-duo{display:grid;gap:12px;grid-template-columns:1fr;animation:entra .4s var(--spring,cubic-bezier(.34,1.56,.64,1))}
@media(min-width:720px){.cena-duo{grid-template-columns:1.4fr 1fr}.cena-duo.um{grid-template-columns:1fr}}
.cena-telao,.cena-fone{position:relative;padding:14px;border-radius:14px;background:var(--bg2,#141B2E);
  border:1px solid rgba(148,163,184,.16);display:flex;flex-direction:column;gap:7px}
.cena-fone{max-width:260px}
.cena-rot{font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--secondary,#22D3EE);margin-bottom:2px}
.cena-it{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;background:var(--bg,#0B0F1A);
  border:1px solid rgba(148,163,184,.14);font-size:.86rem}
.cena-it.on{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.09)}
.cena-pt{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--muted,#94A3B8)}
.cena-it.on .cena-pt{color:var(--success,#34D399)}
.cena-nome{margin-left:14px;padding:6px 11px;border-radius:9px;font-size:.82rem;
  background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.3)}
.cena-cron{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.9rem;text-align:center;color:var(--accent,#FF6B4A)}
.cena-qr{width:76px;height:76px;background:#fff;border-radius:9px;padding:5px}
.cena-qr svg{width:100%;height:100%}
.cena-cod{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.2rem;letter-spacing:.2em}
.cena-tags{display:flex;flex-wrap:wrap;gap:6px}
.cena-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:.78rem;
  background:var(--bg,#0B0F1A);border:1px solid rgba(148,163,184,.18)}
.cena-tag.ok{border-color:rgba(52,211,153,.4)}
.pisca-p{width:7px;height:7px;border-radius:50%;background:var(--success,#34D399);animation:pulsa 1.8s infinite}
@keyframes pulsa{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.cena-podio{margin-top:4px;padding:9px 12px;border-radius:11px;font-size:.9rem;
  border:1px solid rgba(251,191,36,.45);background:rgba(251,191,36,.1)}
.cena-podio b{font-family:"JetBrains Mono",monospace;color:var(--warning,#FBBF24)}
.pf-txt{padding:0 16px 12px;color:var(--muted,#94A3B8);font-size:.97rem;line-height:1.6}
.pf-txt b{color:var(--text,#F8FAFC)}
.pf-ctrl{display:flex;align-items:center;gap:12px;padding:0 16px 14px}
.pf-play{font-size:.86rem;font-weight:600;color:var(--muted,#94A3B8);padding:7px 14px;border-radius:99px;
  border:1px solid rgba(148,163,184,.25)}
.pf-play:hover{color:var(--text,#F8FAFC);border-color:var(--secondary,#22D3EE)}
.pf-barra{flex:1;height:3px;border-radius:99px;background:rgba(148,163,184,.16);overflow:hidden}
.pf-barra i{display:block;height:100%;width:0;background:var(--grad,linear-gradient(90deg,#FF6B4A,#22D3EE,#7C5CFF))}
.pf-barra i.correndo{animation:corre 6s linear forwards}
@keyframes corre{to{width:100%}}
@media(prefers-reduced-motion:reduce){.pf-barra i.correndo{animation:none;width:100%}.cena-duo{animation:none}}

/* guia em blocos: sem divisão visível, virava uma parede de texto */
.g-blocos{display:grid;gap:12px;margin-top:4px}
@media(min-width:900px){.g-blocos{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.g-bloco{height:100%}
.g-bloco{padding:15px 17px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:var(--bg,#0B0F1A)}
.g-bloco h4{display:flex;align-items:center;gap:10px;font-size:.86rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted,#94A3B8);margin-bottom:12px}
.g-bloco .gb-ic{flex:none;width:22px;height:22px;color:var(--muted,#94A3B8)}
.g-bloco .gb-ic svg{width:100%;height:100%}
/* o destaque: primeiro na leitura, borda do espectro e um pouco mais de ar */
.g-bloco.destaque{border-color:rgba(124,92,255,.5);
  background:linear-gradient(180deg,rgba(124,92,255,.13),rgba(34,211,238,.05));padding:19px}
@media(min-width:900px){.g-bloco.destaque{grid-column:1/-1}}
.g-bloco.destaque h4{color:var(--text,#F8FAFC);font-size:.95rem}
.g-bloco.destaque .gb-ic{color:var(--accent,#FF6B4A)}
@media(min-width:900px){.g-bloco.destaque ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px}}
.g-bloco ul{list-style:none;display:grid;gap:9px}
.g-bloco li{padding-left:16px;position:relative;line-height:1.5}
.g-bloco li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px;
  background:linear-gradient(140deg,#FF6B4A,#7C5CFF)}
.g-bloco li b{font-size:.97rem}
.g-bloco li span{display:block;color:var(--muted,#94A3B8);font-size:.93rem}
.g-fala{margin-top:14px;padding:13px 16px;border-radius:12px;font-size:.95rem;line-height:1.55;
  border:1px solid rgba(34,211,238,.28);background:rgba(34,211,238,.07)}
.g-fala b{color:var(--secondary,#22D3EE)}


/* ---------------------------------------------------------------------------
   5. btn-acao — o botão de ação principal de qualquer tela ocupa a LARGURA
      INTEIRA do bloco de conteúdo, alinhado aos cartões acima dele, com
      fonte de 1.1rem e altura de 58px (o porte do "Bora sortear?" do Amigo
      Oculto). Todo botão leva ícone à esquerda do rótulo: o ícone diz o que
      acontece antes de a pessoa ler.
   --------------------------------------------------------------------------- */
/* .btn.btn-acao — a folha de cada ferramenta é carregada depois desta, então
   a regra precisa de especificidade maior para não perder para o .btn local */
.btn.btn-acao, .btn-acao{width:100%;min-height:58px;font-size:1.1rem;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn-acao .bi, .btn .bi{width:21px;height:21px;flex:none}
.btn .bi{width:18px;height:18px}