/* Modelo novo do estudo (Gui, 30/10/2026: o padrão é /conteudos/).
   Só neste estudo até o OK dele; depois sobe para ../_v5.css. O gerar.mjs liga este
   arquivo se ele existir. Segunda rodada, depois de ver no ar: "parece WordPress
   pré-fabricado". Regra: leitura longa é tipografia e fio, não grade de cartões. Cartão
   só onde a pessoa mexe (jogo, baralho, matriz). Nada de curva e nada de giro. */

/* ---- Vãos ---- */
.pv5-abre { padding-bottom: clamp(24px, 3vw, 40px); }
.pv5-sec { padding-top: clamp(64px, 7vw, 96px); }

/* Em 30 segundos: o título fica parado à esquerda e o baralho ocupa a direita. */
#em-30-segundos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
#em-30-segundos > * { grid-column: 1 / -1; }
#em-30-segundos > .pv5-passo { grid-column: 1; grid-row: 1; }
#em-30-segundos > .pv5-h2 { grid-column: 1; grid-row: 2; position: sticky; top: 170px; margin: 0; font-size: clamp(32px, 3.5vw, 50px); line-height: 1; }
#em-30-segundos > .pv5-baralho { grid-column: 2; grid-row: 1 / span 2; }

/* ---- Faixas retas, de ponta a ponta ---- */
.pv5-faixa, .pv5-escura { position: relative; isolation: isolate; background: none; padding-block: clamp(72px, 8vw, 112px); }
.pv5-faixa::before, .pv5-escura::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); }
.pv5-faixa::before { background: var(--surface); }
.pv5-escura::before { background: var(--bloco); }

/* ---- Cada bloco abre com o fio à mão, para separar sem caixa ---- */
.pv5-h3 { position: relative; margin-top: clamp(56px, 6vw, 80px); padding-top: 22px; font-size: clamp(26px, 2.6vw, 36px); }
.pv5-h3::before, .pv5-bloco::before, .pv5-radar-topo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: currentColor; -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.pv5-bloco, .pv5-radar-topo { position: relative; margin-top: clamp(56px, 6vw, 80px); padding-top: 22px; }
.pv5-rotulo { margin: 0 0 8px; }
.pv5-bloco > .pv5-h3, .pv5-radar-topo .pv5-h3 { margin-top: 0; padding-top: 0; }
.pv5-bloco > .pv5-h3::before, .pv5-radar-topo .pv5-h3::before { display: none; }

/* Quatro números: só os números, grandes, sem cartão. */
.pv5-nums { gap: 24px clamp(20px, 3vw, 44px); margin-top: 8px; }
.pv5-num { overflow: visible; border-radius: 0; background: none; }
.pv5-num-frente { padding: 0; }
.pv5-num-frente b { font-size: clamp(46px, 5.2vw, 76px); }
.pv5-js .pv5-num-verso { inset: -14px -16px; border-radius: 18px; padding: 18px 20px; }

/* A janela de decisão: a frase grande, no papel, como abertura de capítulo. */
.pv5-janela { margin-top: clamp(48px, 6vw, 80px); padding: 0; border-radius: 0; background: none; color: var(--text); }
.pv5-janela-k { color: var(--accent-texto); }
.pv5-janela-k .pv5-raio { background: var(--accent); }
.pv5-janela p:last-child { max-width: none; font-size: 19px; line-height: 1.6; color: var(--body); columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.pv5-janela b { display: block; column-span: all; margin-top: 22px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.03em; color: var(--text); text-wrap: pretty; }

/* Texto longo: pergunta de um lado, resposta do outro, com fio entre as linhas.
   Vale para conclusão, leitura do estudo, teste dos cenários e janela de decisão. */
.pv5-cartoes, .pv5-cartoes.quatro { display: block; }
.pv5-cartoes > article { position: relative; display: flow-root; padding: 24px 0 26px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pv5-cartoes > article + article::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--line-2); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.pv5-cartoes > article > :is(h4, small) { float: left; clear: left; width: 37%; margin: 0; }
.pv5-cartoes > article > small { margin-bottom: 8px; }
.pv5-cartoes > article > h4 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.06; letter-spacing: -.025em; }
.pv5-cartoes > article > :not(h4, small) { margin-left: 43%; }
.pv5-cartoes p, .pv5-cartoes li { font-size: 17px; line-height: 1.62; }

/* Três eras: colunas que ocupam a largura toda. */
.pv5-linha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); overflow: visible; }
.pv5-linha > li { padding: 8px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* As forças por trás: o texto da aba direto na faixa. */
.pv5-aba { padding: 18px 0 0; border-radius: 0; background: none; box-shadow: none; }
.pv5-aba p { max-width: 74ch; font-size: 18px; }

/* O que os números mostram: o gráfico direto na faixa. */
.pv5-figs > *, .pv5-fig { padding: 0; border-radius: 0; background: none; box-shadow: none; }

/* Manchete ou dado: cartas em papel. Só o verso, com o dado, é escuro. */
.pv5-viradas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pv5-virada { min-height: 170px; }
.pv5-virada .frente { background: var(--cartao); color: var(--text); }
.pv5-virada .frente small { color: var(--accent-texto); }
.pv5-virada .frente b { font-size: clamp(22px, 2.1vw, 28px); }
.pv5-virada .verso { background: var(--bloco); color: var(--sobre-bloco-2); }
.pv5-virada .verso small { color: var(--accent); }

/* O que já está em movimento e o termômetro: colunas de texto com fio, sem cartão. */
.pv5-fichas, .pv5-inds { gap: 0 clamp(24px, 3vw, 44px); }
.pv5-fichas details, .pv5-inds > li { position: relative; padding: 16px 0 20px; border-radius: 0; background: none; box-shadow: none; }
.pv5-fichas details::before, .pv5-inds > li::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--line-2); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.pv5-fichas details[open] { background: none; box-shadow: none; }
.pv5-fichas details[open] summary { color: var(--violeta-texto); }

/* A parte escura: papéis e movimentos sem cartões dentro de cartão. */
.pv5-escura .pv5-cartoes > article + article::before { background: rgb(243 238 229 / 22%); }
.pv5-escura .pv5-cartoes p, .pv5-escura .pv5-cartoes li { color: var(--sobre-bloco-2); }
.pv5-papel { max-width: none; padding: 0; border-radius: 0; background: none; }
.pv5-papel p { font-size: 19px; max-width: 70ch; }
.pv5-papel-mov { max-width: 70ch; }
.pv5-fases > li { padding: 20px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pv5-movs li { position: relative; padding: 16px 0; border-radius: 0; background: none; }
.pv5-movs li + li::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: rgb(243 238 229 / 22%); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }

/* O fecho: a frase final na faixa laranja reta, com o raio saindo da borda (marca.css). */
.pv5-fecho { position: relative; isolation: isolate; margin-top: clamp(64px, 8vw, 96px); padding-block: clamp(72px, 8vw, 112px); color: var(--sobre-acc); }
.pv5-fecho-frase, .pv5-fecho-frase * { color: var(--sobre-acc); }
.pv5-fecho .button { border-color: var(--sobre-acc); background: var(--sobre-acc); color: #f1ece2; }
.pv5-fecho .button.outline { background: transparent; color: var(--sobre-acc); }
.pv5-fecho .button:hover { border-color: var(--sobre-acc); background: #faf6ee; color: #16130f; }
.pv5-fecho .marca-texto { background: linear-gradient(transparent 52%, #faf6ee 52%, #faf6ee 94%, transparent 94%); }
.gz-rodape { margin-top: 0; }
.gz-rodape-in { border-top: 0; }

@media (max-width: 960px) {
  #em-30-segundos { display: block; }
  #em-30-segundos > .pv5-h2 { position: static; margin-bottom: 26px; }
  .pv5-cartoes > article > :is(h4, small) { float: none; width: auto; }
  .pv5-cartoes > article > :not(h4, small) { margin: 10px 0 0; }
  .pv5-linha { grid-auto-flow: row; }
  .pv5-janela p:last-child { columns: 1; }
  .pv5-viradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pv5-viradas { grid-template-columns: minmax(0, 1fr); }
}