/* ==========================================================================
   baralho.css
   Baralho de flashcards, usado na home (um baralho) e em /aprendizado/ (três
   baralhos com abas de tema). Saiu de home.css em 2026-10-20, quando passou
   a ter duas páginas. O comportamento está em /assets/js/baralho.js.
   ========================================================================== */

/* ---------- BARALHO DE FLASHCARDS (arts. 5º e 7º) ----------
   Sem JS: painel com a lista das dez perguntas, cada uma um <details>, e a
   resposta embaixo da pergunta ao abrir. Com JS (.baralho.pronto): os dez
   <li> empilhados na mesma célula, só o .atual visível; o verso fica por
   cima da frente e o card gira em 3D. Cada face gira sozinha com
   perspective() própria, então não depende de preserve-3d atravessar a
   caixa interna do <details>. */

/* painel */
.baralho{max-width:760px;margin:0 auto;padding:22px 24px 24px;background:var(--violeta-esc);
 border:1px solid rgba(201,188,224,.22);border-radius:20px;color:#fff}
.baralho-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.baralho-titulo{display:flex;align-items:center;gap:10px;margin:0;font-family:'Archivo',sans-serif;
 font-weight:600;font-size:16px;letter-spacing:.02em;color:#fff}
.baralho-titulo svg{color:var(--dourado);flex:none}
.baralho button{font-family:'Montserrat',sans-serif;cursor:pointer}
.baralho button:focus-visible{outline:3px solid var(--dourado);outline-offset:3px}
.baralho-botao{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(209,176,78,.6);
 border-radius:999px;background:none;color:#fff;font-size:13px;font-weight:600;transition:background .2s ease}
.baralho-botao[hidden]{display:none}
.baralho-botao:hover{background:rgba(209,176,78,.14)}
.baralho-botao svg{color:var(--dourado-cl)}
.ja-sei[aria-pressed="true"]{background:var(--dourado);border-color:var(--dourado);color:var(--violeta-esc)}
.ja-sei[aria-pressed="true"] svg{color:inherit}
.ja-sei[aria-pressed="true"]:hover{background:var(--dourado-cl)}

/* barra de progresso: decorativa (a mesma informação existe em texto). O
   segmento sabido difere na forma, mais alto, e não só no tom (WCAG 1.4.1) */
.progresso{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.progresso[hidden]{display:none}
.segmentos{flex:1;display:flex;align-items:flex-end;gap:6px;height:10px}
.seg{flex:1;height:5px;border-radius:3px;background:rgba(201,188,224,.25)}
.seg.sabido{height:10px;background:var(--lavanda)}
.seg.atual{background:var(--dourado)}
.contagem{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}

/* cards. base.css estiliza todo details/summary para o FAQ (caixa branca,
   borda, overflow:hidden, o "+" e recuo no p); aqui, nada disso: o
   overflow:hidden cortaria o contorno de foco e o giro */
.cartas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vira{position:relative;background:none;border:0;border-radius:0;overflow:visible}
.vira summary{position:relative;list-style:none;display:flex;flex-direction:column;gap:6px;box-sizing:border-box;
 padding:18px 22px;background:var(--violeta);border:1px solid rgba(201,188,224,.18);border-radius:14px;
 color:#fff;cursor:pointer}
.vira summary::-webkit-details-marker{display:none}
.vira summary:after{display:none}
.vira summary:focus-visible{outline:3px solid var(--dourado);outline-offset:3px}
.vira .pergunta{font-family:'Playfair Display',serif;font-weight:500;font-size:19px;line-height:1.35}
.vira .dica{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado-cl)}
.vira .verso{display:flex;flex-direction:column;align-items:flex-start;gap:12px;box-sizing:border-box;
 margin-top:8px;padding:18px 22px;background:var(--areia);border:1px solid var(--areia-borda);border-radius:14px}
.vira .verso p{margin:0;padding:0;font-size:15.5px;line-height:1.65;font-weight:500;color:var(--violeta)}
.vira .selo{padding:5px 12px;border:1px solid var(--dourado);border-radius:999px;background:rgba(209,176,78,.12);
 font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A6F1E}

/* baralho montado: um card por vez, ~600px, altura do maior card */
.palco{position:relative}
.pronto .palco{max-width:600px;margin:0 auto;touch-action:pan-y}
.pronto .cartas{gap:0}
.pronto .cartas>li{grid-area:1/1;visibility:hidden}
.pronto .cartas>li.atual{visibility:visible}
.pronto .vira{height:100%}
.pronto .vira summary{height:100%;min-height:19rem;justify-content:center;align-items:center;text-align:center;
 gap:0;padding:40px 36px 70px;border-radius:18px}
.pronto .vira .pergunta{font-size:clamp(24px,2.4vw,32px);line-height:1.3}
.pronto .vira .dica{position:absolute;left:70px;right:70px;bottom:30px}
.pronto .vira .verso{position:absolute;inset:0;margin:0;justify-content:center;align-items:center;text-align:center;
 gap:18px;padding:36px 36px 70px;border-radius:18px;overflow:auto}
.pronto .vira .verso p{font-size:18px;max-width:30em}

/* giro. Fechado, o card não leva transform nem backface: as duas promovem a
   frente a uma camada própria, com outro antialiasing. As propriedades 3D só
   valem com o card aberto, o que inclui o giro de volta, porque o open só
   sai depois dele */
.pronto .vira summary,.pronto .vira .verso{transition:transform .6s ease}
.pronto .vira[open] summary,.pronto .vira .verso{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pronto .vira[open] summary{transform:perspective(1200px) rotateY(0)}
.pronto .vira .verso{transform:perspective(1200px) rotateY(180deg)}
.pronto .vira.virado summary{transform:perspective(1200px) rotateY(-180deg)}
.pronto .vira.virado .verso{transform:perspective(1200px) rotateY(0)}
/* virado, a frente fica de costas e o contorno de foco iria junto: ele passa
   para o verso enquanto o foco continuar no <summary> */
.pronto .vira.virado:has(summary:focus-visible) .verso{outline:3px solid var(--dourado);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
 .pronto .vira summary,.pronto .vira .verso{transform:none;transition:opacity .25s ease}
 .pronto .vira[open] summary{transform:none}
 .pronto .vira .verso{opacity:0}
 .pronto .vira.virado summary{transform:none;opacity:0}
 .pronto .vira.virado .verso{transform:none;opacity:1}
}

/* ouvir: sobre o canto do card, fora das faces, então não gira junto */
.ouvir{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;justify-content:center;
 width:42px;height:42px;padding:0;border:1px solid var(--dourado);border-radius:50%;background:var(--violeta-esc);
 color:var(--dourado-cl)}
.ouvir[hidden]{display:none}
.ouvir .parar,.ouvir.falando .onda{display:none}
.ouvir.falando .parar{display:inline}

/* rodapé */
.baralho-rodape{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:22px}
.baralho-rodape[hidden]{display:none}
.navegar{display:flex;align-items:center;gap:12px}
.posicao{min-width:4.5em;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.baralho .seta{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
 border:1px solid rgba(201,188,224,.5);border-radius:50%;background:none;color:#fff;transition:background .2s ease}
.baralho .seta:hover:not(:disabled){background:rgba(255,255,255,.08)}
.baralho .seta:disabled{opacity:.35;cursor:default}
.saber{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.sabidos{font-size:13px;color:rgba(255,255,255,.72)}

@media (max-width:600px){
 .baralho{padding:16px 14px 18px;border-radius:16px}
 .baralho-titulo{font-size:14.5px}
 .baralho-botao{padding:8px 13px;font-size:12.5px}
 .pronto .vira summary{min-height:20rem;padding:32px 22px 70px}
 .pronto .vira .verso{padding:28px 22px 70px}
 .pronto .vira .verso p{font-size:16.5px}
 .baralho-rodape{flex-direction:column;align-items:stretch}
 .navegar{justify-content:center}
 .saber{justify-content:center}
}

/* ---------- ABAS DE TEMA (/aprendizado/, 2026-10-20) ----------
   Sem JS os três baralhos ficam um embaixo do outro e a lista de abas não
   aparece (nasce hidden). Com JS, só o baralho da aba escolhida fica na
   tela. A aba é botão de verdade, com área de toque de 44px. */
.temas-baralho .baralho + .baralho{margin-top:28px}
.abas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px;margin:0 auto 22px}
.abas[hidden]{display:none}
.abas [role=tab]{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;
 border:1px solid var(--areia-borda);border-radius:999px;background:#fff;color:var(--violeta);
 font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s ease}
.abas [role=tab]:hover{background:rgba(209,176,78,.14)}
.abas [role=tab][aria-selected="true"]{background:var(--violeta);border-color:var(--violeta);color:#fff}
.abas [role=tab]:focus-visible{outline:3px solid var(--dourado);outline-offset:3px}
.abas .qtd{font-weight:400;opacity:.8;font-variant-numeric:tabular-nums}
@media (max-width:600px){
 .abas{gap:8px}
 .abas [role=tab]{font-size:13px;padding:9px 14px}
}