/*
 * Testes do jornal (/testes) — carregado só nessas páginas (inc/testes.php) e
 * no cartão da página de Jogos. Celular primeiro (375 px, toque de 44 px),
 * tipografia e cantos do site; as frases são o centro da tela. Cor neutra:
 * nada de vermelho para um lado e azul para o outro — o mapa é em tons de
 * tinta e só o ponto do leitor se destaca. Claro, como o resto do site.
 */

.atti-teste, .atti-testes, .atti-teste-cartao {
	--t-fundo: #fff;
	--t-tinta: #14161a;
	--t-texto: #2c2e33;
	--t-suave: #6e7178;
	--t-fio: #e4e2dd;
	--t-papel: #f4f3f0;
	--t-r: var(--r-p, 14px);
	--teste-cor: #14161a;
}

/* ── Página de um teste ─────────────────────────────────────────────── */
.atti-teste { max-width: 620px; margin: 0 auto; padding: 4px 16px 56px; color: var(--t-texto); font-family: var(--atti-sans); }
.atti-teste__tela { display: grid; gap: 18px; animation: atti-teste-entra .38s cubic-bezier(.2, .8, .2, 1) both; }
.atti-teste__tela--entra-volta { animation-name: atti-teste-volta; }
@keyframes atti-teste-entra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes atti-teste-volta { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.atti-teste__chapeu, .atti-teste__tema { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--t-suave); }

/* Abertura */
.atti-teste__abertura { justify-items: center; text-align: center; padding: 28px 0 8px; gap: 14px; }
.atti-teste__desenho { color: var(--t-tinta); }
.atti-teste__desenho svg { width: 88px; height: 88px; }
.atti-teste__abertura h1 { margin: 0; font-family: var(--atti-serif); font-size: clamp(2.125rem, 8vw, 3rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--t-tinta); text-wrap: balance; }
.atti-teste__chamada { margin: 0; max-width: 30ch; font-size: 1.1875rem; line-height: 1.4; color: var(--t-texto); text-wrap: balance; }
.atti-teste__como { margin: 0; max-width: 40ch; font-size: .9375rem; line-height: 1.5; color: var(--t-suave); }
.atti-teste__meta { margin: 0; font-size: .8125rem; color: var(--t-suave); }
.atti-teste__comecar { width: 100%; max-width: 380px; min-height: 54px; border: 0; border-radius: var(--t-r); background: var(--t-tinta); color: #fff; font: 700 1.0625rem/1 var(--atti-sans); cursor: pointer; transition: transform .12s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; }
.atti-teste__comecar:active { transform: scale(.98); }
.atti-teste__comecar:disabled { opacity: .35; cursor: default; }
.atti-teste__refazer-abre, .atti-teste__refazer { min-height: 44px; border: 0; background: none; color: var(--t-texto); font: 600 .9375rem var(--atti-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.atti-teste__sem-js { text-align: left; display: grid; gap: 12px; padding-left: 20px; }
.atti-teste__sem-js span { display: block; color: var(--t-suave); }

/* Pergunta */
.atti-teste__barra { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; }
.atti-teste__voltar { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border: 0; border-radius: 50%; background: none; color: var(--t-tinta); cursor: pointer; }
.atti-teste__voltar:active { background: var(--t-papel); }
.atti-teste__progresso { height: 4px; border-radius: 4px; background: var(--t-fio); overflow: hidden; }
.atti-teste__progresso i { display: block; height: 100%; border-radius: 4px; background: var(--t-tinta); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.atti-teste__conta { font-size: .8125rem; font-weight: 700; color: var(--t-suave); font-variant-numeric: tabular-nums; }
.atti-teste__tema { margin-top: 10px; }
.atti-teste__pede { margin: -10px 0 4px; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--t-suave); }
.atti-teste__opcoes { display: grid; gap: 10px; }
.atti-teste__opcao { position: relative; display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 14px; width: 100%; min-height: 96px; padding: 20px 18px; border: 1px solid var(--t-fio); border-radius: var(--t-r); background: var(--t-fundo); color: var(--t-tinta); text-align: left; font: 600 1.1875rem/1.36 var(--atti-serif); letter-spacing: -0.005em; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.atti-teste__opcao:active { transform: scale(.985); }
@media (hover: hover) { .atti-teste__opcao:hover { border-color: #bdbab3; } }
.atti-teste__letra { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t-papel); color: var(--t-suave); font: 800 .8125rem/1 var(--atti-sans); transition: background .18s ease, color .18s ease; }
.atti-teste__opcao.is-escolhida { background: var(--t-tinta); border-color: var(--t-tinta); color: #fff; }
.atti-teste__opcao.is-escolhida .atti-teste__letra { background: #fff; color: var(--t-tinta); }
.atti-teste__ou { justify-self: center; margin: -2px 0; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-suave); }
.atti-teste__meio { justify-self: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--t-papel); color: var(--t-texto); font: 600 .9375rem var(--atti-sans); cursor: pointer; transition: background .18s ease, color .18s ease; }
.atti-teste__meio.is-escolhida { background: var(--t-tinta); color: #fff; }

/* Calculando */
.atti-teste__calculando { justify-items: center; text-align: center; padding: 72px 0; color: var(--t-suave); }
.atti-teste__giro { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--t-fio); border-top-color: var(--t-tinta); animation: atti-teste-gira .8s linear infinite; }
@keyframes atti-teste-gira { to { transform: rotate(360deg); } }

/* Resultado */
.atti-teste__resultado { padding-top: 12px; }
.atti-teste__perfil { margin: -8px 0 0; font-family: var(--atti-serif); font-size: clamp(2.25rem, 9vw, 3.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--t-tinta); outline: none; }
.atti-teste__descricao { margin: -4px 0 0; font-size: 1.125rem; line-height: 1.45; color: var(--t-texto); }
.atti-teste__mapa { margin: 6px 0 0; display: grid; gap: 8px; justify-items: center; }
.atti-teste__mapa-svg { width: 100%; max-width: 380px; height: auto; color: var(--t-tinta); overflow: visible; }
.atti-teste__mapa figcaption { font-size: .8125rem; color: var(--t-suave); text-align: center; }
.atti-teste__rot { font: 700 11px var(--atti-sans); letter-spacing: .06em; text-transform: uppercase; fill: var(--t-suave); }
.atti-teste__pct { font: 700 13px var(--atti-sans); fill: var(--t-suave); font-variant-numeric: tabular-nums; }
.atti-teste__pct.is-minha { fill: #fff; }
.atti-teste__ponto { transform: translate(0, 0); transition: transform 1s cubic-bezier(.2, .9, .25, 1.15) .15s; }
.is-pronto .atti-teste__ponto { transform: translate(var(--px), var(--py)); }
.atti-teste__reguas { display: grid; gap: 18px; padding: 18px; border-radius: var(--t-r); background: var(--t-papel); }
.atti-teste__regua-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.atti-teste__regua-topo b { font-size: .9375rem; color: var(--t-tinta); }
.atti-teste__regua-topo span { font-size: .9375rem; font-weight: 700; color: var(--t-tinta); text-align: right; }
.atti-teste__trilho { position: relative; height: 10px; border-radius: 10px; background: #e2e0da; }
.atti-teste__centro { position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; background: #d3d0c8; }
.atti-teste__marca { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--teste-cor); box-shadow: 0 0 0 4px #fff, 0 2px 6px rgba(0, 0, 0, .18); transition: left 1s cubic-bezier(.2, .9, .25, 1.15) .15s; }
.is-pronto .atti-teste__marca { left: var(--pos); }
.atti-teste__lados { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t-suave); }
.atti-teste__comparar { margin: 0; padding: 16px 18px; border-radius: var(--t-r); background: var(--t-papel); font-size: 1rem; line-height: 1.45; color: var(--t-texto); }
.atti-teste__comparar b { font-size: 1.25rem; color: var(--t-tinta); }
.atti-teste__acoes { display: grid; justify-items: center; gap: 4px; }
.atti-teste__acoes .atti-teste__comecar { max-width: none; }
.atti-teste__mais { border-top: 1px solid var(--t-fio); padding-top: 4px; }
.atti-teste__mais summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 700; font-size: 1rem; color: var(--t-tinta); cursor: pointer; list-style: none; }
.atti-teste__mais summary::-webkit-details-marker { display: none; }
.atti-teste__mais summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.atti-teste__mais[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.atti-teste__mais p { margin: 0 0 14px; font-size: .9375rem; line-height: 1.55; color: var(--t-texto); }
.atti-teste__escolhas { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: escolha; }
.atti-teste__escolhas li { display: grid; gap: 2px; }
.atti-teste__escolhas b { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--t-suave); }
.atti-teste__escolhas span { font-family: var(--atti-serif); font-size: 1rem; line-height: 1.4; color: var(--t-tinta); }
.atti-teste__aviso { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--t-suave); }
.atti-teste__comunidade { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--t-r); background: #e9f7ee; color: #146c3a !important; font-weight: 700; font-size: .9375rem; text-align: center; padding: 10px 16px; text-decoration: none; }

/* ── /testes e cartão (também na página de Jogos) ───────────────────── */
.atti-testes { max-width: 760px; margin: 0 auto; padding: 4px 16px 48px; font-family: var(--atti-sans); }
.atti-testes__topo h1 { margin: 0 0 6px; font-family: var(--atti-serif); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--t-tinta); }
.atti-testes__topo p { margin: 0 0 22px; color: var(--t-suave); }
.atti-testes__lista, .atti-jogos__testes { display: grid; gap: 12px; }
.atti-jogos__testes { margin-top: 28px; }
.atti-jogos__testes h2 { margin: 0 0 2px; font-size: 1.125rem; font-weight: 800; color: var(--t-tinta, #14161a); }
.atti-teste-cartao { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--t-fio); border-radius: var(--t-r); background: var(--t-fundo); color: var(--t-tinta) !important; text-decoration: none; transition: transform .12s ease, border-color .18s ease; -webkit-tap-highlight-color: transparent; }
.atti-teste-cartao:active { transform: scale(.99); }
@media (hover: hover) { .atti-teste-cartao:hover { border-color: #bdbab3; } }
.atti-teste-cartao__selo { color: var(--t-tinta); }
.atti-teste-cartao__selo svg { width: 56px; height: 56px; }
.atti-teste-cartao__texto { display: grid; gap: 3px; min-width: 0; }
.atti-teste-cartao__texto small { font-size: .6875rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--t-suave); }
.atti-teste-cartao__texto b { font-family: var(--atti-serif); font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em; }
.atti-teste-cartao__texto span { font-size: .875rem; line-height: 1.4; color: var(--t-texto); }
.atti-teste-cartao__texto em { font-style: normal; font-size: .8125rem; color: var(--t-suave); }
.atti-teste-cartao__ir { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--t-tinta); color: #fff; font-weight: 700; font-size: .875rem; }
.atti-testes__vazio { color: var(--t-suave); }
/* Na matéria (bloco Teste): o cartão no meio do texto, sem herdar sublinhado nem cor de link do corpo. */
.fv-teste { margin: 28px 0; font-family: var(--atti-sans); }
.fv-teste .atti-teste-cartao, .fv-teste .atti-teste-cartao * { text-decoration: none !important; }

@media (min-width: 700px) {
	.atti-teste { padding-top: 24px; }
	.atti-teste__opcao { min-height: 104px; font-size: 1.25rem; }
	.atti-teste-cartao { grid-template-columns: 64px 1fr auto; }
	.atti-teste-cartao__ir { grid-column: auto; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
	.atti-teste__tela, .atti-teste__ponto, .atti-teste__marca, .atti-teste__progresso i { animation: none; transition: none; }
}