/* Como jogar — complementa tema.css */

/* Como jogar (acordeão) */
.guia { display: grid; gap: 8px; }
.guia-item { border-radius: 16px; background: var(--card); border: 1px solid var(--card-borda); overflow: hidden; }
.guia-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; }
.guia-item summary::-webkit-details-marker { display: none; }
.guia-icone { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #ffd45c, var(--ouro-2)); color: #3b2400; font-size: 17px; box-shadow: 0 3px 0 #b45309; }
.guia-titulo { flex: 1; min-width: 0; display: grid; }
.guia-titulo b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; }
.guia-titulo small { color: var(--texto-2); font-weight: 700; font-size: 13px; }
.guia-seta { color: var(--texto-3); transition: transform .2s; }
.guia-item[open] .guia-seta { transform: rotate(180deg); }
.guia-item ul { margin: 0; padding: 0 14px 14px 64px; display: grid; gap: 8px; color: var(--texto-2); font-weight: 700; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.guia-item li b { color: var(--texto); white-space: nowrap; }
.guia-item li::marker { color: var(--texto-ouro); }
@media (max-width: 380px) { .guia-item ul { padding-left: 32px; } }
/* Capa e grade de temas */
.guia-capa { position: relative; overflow: hidden; text-align: center; padding: 22px 18px; border-radius: 24px; background: var(--hero); color: #fff; box-shadow: 0 16px 40px var(--hero-sombra); }
.guia-capa h2 { font-size: clamp(28px, 8vw, 36px); margin-bottom: 6px; }
.guia-capa p { margin: 0; font-weight: 700; color: rgba(255, 255, 255, .85); text-wrap: balance; }
.guia-capa-dado { position: absolute; right: -10px; top: -14px; font-size: 96px; opacity: .12; transform: rotate(18deg); }
.guia-temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.guia-tema {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; cursor: pointer;
    background: var(--card); border: 1px solid var(--card-borda); font-weight: 800; font-size: 12px; color: var(--texto); text-align: center; line-height: 1.15;
}
.guia-tema span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #ffd45c, var(--ouro-2)); color: #3b2400; font-size: 17px; box-shadow: 0 3px 0 #b45309; }
.guia-tema:active { transform: scale(.95); }
.guia-item { scroll-margin-top: calc(var(--topo-h) + var(--safe-top) + 12px); }
@media (max-width: 360px) { .guia-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Títulos semânticos (h1/h2 para o Google) com o mesmo visual de antes */
.guia-capa .guia-h1 { font-size: clamp(28px, 8vw, 36px); margin: 0 0 6px; font-family: var(--fonte-titulo); color: #fff; }
.guia-titulo .guia-h2 { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; color: var(--texto); }
.guia-video video { display: block; width: min(100%, 360px); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 24px; background: #000;
    box-shadow: 0 0 0 5px #0b0b14, 0 0 0 7px #2a2a3a, 0 24px 60px rgba(0, 0, 0, .5), 0 0 50px rgba(255, 200, 61, .25); }
body.site .app { padding-top: 16px; }