/* pf · Perguntas — Prancha 07 (noite) */
.pf-m1 { width: 80vmax; height: 80vmax; right: -30vmax; top: -20vmax; background: radial-gradient(closest-side in oklab, #e9d3ad26 0%, #e9d3ad0c 50%, #e9d3ad00 100%); }
.pf-m2 { width: 70vmax; height: 70vmax; left: -28vmax; bottom: -30vmax; background: radial-gradient(closest-side in oklab, #2a2c31 0%, #1d1f24aa 45%, #12131600 100%); animation-duration: 37s !important; }
.pf-m3 { width: 50vmax; height: 50vmax; left: 20vw; top: 30%; background: radial-gradient(closest-side in oklab, #c9a25a1c 0%, #c9a25a08 50%, #c9a25a00 100%); animation-duration: 29s !important; animation-direction: alternate-reverse !important; }

.pf-dentro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "cabeca lado" "quadro lado";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
}
.pf-cabeca { grid-area: cabeca; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pf-titulo { max-width: 16ch; }
.pf-intro { margin: 1.5rem 0 0; }

/* lado: retrato P&B grande + chave do desenho */
.pf-lado { grid-area: lado; align-self: start; position: sticky; top: max(2rem, calc(50vh - 44vh)); }
.pf-retrato { margin: 0; position: relative; }
.pf-retrato img {
  width: 100%; height: min(88vh, 54rem); object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.06) brightness(.92);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%), linear-gradient(to right, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%), linear-gradient(to right, transparent 0%, #000 18%);
  mask-composite: intersect;
}
.pf-chave {
  position: absolute; left: clamp(-4.5rem, -4vw, -2rem); bottom: 7%; z-index: 2; margin: 0;
  width: clamp(14rem, 19vw, 17.5rem);
  padding: .9rem .9rem 0;
  background: color-mix(in oklab, var(--grafite-0) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--ouro) 30%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--ouro);
}
.pf-chave-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-cantos path { stroke: var(--luz-2); stroke-width: .8; opacity: .4; }
.pf-eixo { stroke: var(--luz-2); stroke-width: .6; stroke-dasharray: 10 3 2 3; opacity: .45; }
.pf-terco { stroke: var(--luz-2); stroke-width: .5; stroke-dasharray: 2 3; opacity: .35; }
.pf-rosto { stroke: var(--luz); stroke-width: 1; opacity: .85; }
.pf-feicao { stroke: var(--luz-2); stroke-width: .7; opacity: .55; }

/* zonas: apagadas até a nota abrir */
.pf-z { opacity: 0; transition: opacity .6s ease; }
.pf-z1 { stroke: var(--ouro-claro); stroke-width: 1.4; }
.pf-z6 { stroke: var(--ouro); stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .3s, stroke-dashoffset 1.2s var(--curva); }
.pf-z2, .pf-z3, .pf-z4 { stroke: var(--ouro); stroke-width: .8; }
.pf-z5, .pf-z7 { stroke: var(--luz-2); stroke-width: .9; opacity: .4; }
.pf-z5-arco { stroke: var(--ouro-claro); stroke-width: 2.4; opacity: 0; transition: opacity .5s; }
.pf-z7 circle { fill: var(--luz-2); stroke: none; }
.pf-chave[data-ativo="1"] .pf-z1, .pf-chave[data-ativo="2"] .pf-z2, .pf-chave[data-ativo="3"] .pf-z3,
.pf-chave[data-ativo="4"] .pf-z4, .pf-chave[data-ativo="6"] .pf-z6 { opacity: 1; stroke-dashoffset: 0; }
.pf-chave[data-ativo="5"] .pf-z5, .pf-chave[data-ativo="7"] .pf-z7 { opacity: 1; stroke: var(--ouro-claro); }
.pf-chave[data-ativo="5"] .pf-z5-arco { opacity: 1; }
.pf-chave[data-ativo="7"] .pf-z7 circle { fill: var(--ouro-claro); }

/* pontos numerados */
.pf-no { fill: var(--grafite); stroke: var(--ouro); stroke-width: 1; transition: fill .4s; }
.pf-anel { fill: none; stroke: var(--ouro-claro); stroke-width: .9; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pf-p text { font-family: var(--f-tecnica); font-size: 13px; fill: var(--tinta-2); transition: fill .4s; }
.pf-chave[data-ativo="1"] .pf-p[data-n="1"], .pf-chave[data-ativo="2"] .pf-p[data-n="2"], .pf-chave[data-ativo="3"] .pf-p[data-n="3"],
.pf-chave[data-ativo="4"] .pf-p[data-n="4"], .pf-chave[data-ativo="5"] .pf-p[data-n="5"], .pf-chave[data-ativo="6"] .pf-p[data-n="6"],
.pf-chave[data-ativo="7"] .pf-p[data-n="7"] { --on: 1; }
.pf-p { --on: 0; }
.pf-p .pf-no { fill: color-mix(in oklab, var(--ouro-claro) calc(var(--on) * 100%), var(--grafite)); }
.pf-p text { fill: color-mix(in oklab, var(--ouro-claro) calc(var(--on) * 100%), var(--tinta-2)); }
.pf-chave[data-ativo="1"] .pf-p[data-n="1"] .pf-anel, .pf-chave[data-ativo="2"] .pf-p[data-n="2"] .pf-anel, .pf-chave[data-ativo="3"] .pf-p[data-n="3"] .pf-anel,
.pf-chave[data-ativo="4"] .pf-p[data-n="4"] .pf-anel, .pf-chave[data-ativo="5"] .pf-p[data-n="5"] .pf-anel, .pf-chave[data-ativo="6"] .pf-p[data-n="6"] .pf-anel,
.pf-chave[data-ativo="7"] .pf-p[data-n="7"] .pf-anel { animation: pf-pulso 2.2s ease-out infinite; }
@keyframes pf-pulso { 0% { opacity: .95; scale: .5; } 100% { opacity: 0; scale: 1.7; } }

.pf-chave-carimbo {
  display: grid; grid-template-columns: auto 1fr; margin: .7rem -.9rem 0;
  border-top: 1px solid color-mix(in oklab, var(--ouro) 30%, transparent);
  font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); line-height: 1.2;
}
.pf-chave-carimbo > span { padding: .55rem .6rem; border-right: 1px solid color-mix(in oklab, var(--ouro) 22%, transparent); white-space: nowrap; }
.pf-chave-carimbo > span:nth-child(2) { border-right: 0; }
.pf-chave-carimbo > .pf-chave-nome { grid-column: 1 / -1; border-right: 0; border-top: 1px solid color-mix(in oklab, var(--ouro) 22%, transparent); color: var(--ouro-claro); white-space: normal; }
.pf-chave-carimbo b { font-weight: 400; color: var(--ouro-claro); }

/* quadro de notas */
.pf-quadro { grid-area: quadro; border: 1px solid color-mix(in oklab, var(--ouro) 26%, transparent); align-self: start; }
.pf-quadro-topo {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .75rem 1.1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--ouro) 26%, transparent);
  font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
}
.pf-nota { border-bottom: 1px solid color-mix(in oklab, var(--ouro) 16%, transparent); }
.pf-nota:last-child { border-bottom: 0; }
.pf-nota summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 48px; align-items: center; column-gap: 1rem;
  min-height: 4.6rem; padding: .6rem .7rem .6rem 1.1rem;
  transition: background-color .35s;
}
.pf-nota summary::-webkit-details-marker { display: none; }
.pf-nota summary:hover { background: color-mix(in oklab, var(--luz) 4%, transparent); }
.pf-nota summary:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: -2px; }
.pf-num { font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); transition: color .35s; }
.pf-perg { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(1.3rem, 1.75vw, 1.6rem); line-height: 1.25; color: var(--tinta); }
.pf-sinal { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--ouro) 40%, transparent); transition: transform .5s var(--curva), background-color .35s, border-color .35s; }
.pf-sinal::before, .pf-sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.4px; background: var(--ouro-claro); translate: -50% -50%; }
.pf-sinal::after { rotate: 90deg; }
.pf-nota[open] .pf-sinal { transform: rotate(45deg); background: var(--ouro-claro); border-color: var(--ouro-claro); }
.pf-nota[open] .pf-sinal::before, .pf-nota[open] .pf-sinal::after { background: var(--grafite); }
.pf-nota[open] .pf-num { color: var(--ouro-claro); }
.pf-nota summary { position: relative; }
.pf-nota summary::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ouro-claro); transform: scaleY(0); transition: transform .5s var(--curva); }
.pf-nota[open] summary::before { transform: none; }
.pf-nota[open] summary { background: color-mix(in oklab, var(--ouro) 7%, transparent); }
.pf-perg { transition: color .35s; }
.pf-nota[open] .pf-perg { color: var(--luz-2); }

/* chamada: da nota aberta até o ponto aceso na chave */
.pf-dentro { position: relative; }
.pf-chamada { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.pf-chamada path { stroke: var(--ouro-claro); stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .85; }
.pf-chamada circle { fill: var(--ouro-claro); }
.pf-chamada.pf-redesenha path { stroke-dashoffset: 1; transition: none; }
.pf-chamada path { transition: stroke-dashoffset .9s var(--curva); }

.pf-resp { padding: .4rem 4.5rem 1.8rem calc(1.1rem + 6.6rem + 1rem); font-size: var(--t-corpo); font-weight: 300; line-height: 1.6; color: var(--tinta-2); }
.pf-resp p { margin: 0 0 .9rem; max-width: 36rem; }
.pf-resp p:last-of-type { margin-bottom: 0; }
.pf-cit { font-style: italic; color: var(--luz-2); }
.pf-botao, .pf-link { margin-top: 1.4rem; }
.pf-link { color: var(--tinta); }

/* abrir com altura animada onde houver suporte */
@supports (interpolate-size: allow-keywords) {
  .pf-quadro { interpolate-size: allow-keywords; }
  .pf-nota::details-content { block-size: 0; overflow: clip; transition: block-size .6s var(--curva), content-visibility .6s allow-discrete; }
  .pf-nota[open]::details-content { block-size: auto; }
}

/* chave dentro da nota aberta (celular, movida pelo JS) */
.pf-resp .pf-chave { position: relative; left: auto; bottom: auto; width: min(100%, 15rem); margin: 1.5rem 0 .2rem; }

/* ───── tablet e celular ───── */
@media (max-width: 999px) {
  .pf-dentro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "lado" "quadro"; grid-template-rows: none; }
  .pf-lado { position: relative; top: 0; margin-bottom: 2.5rem; }
  .pf-retrato img { height: auto; aspect-ratio: 4 / 5; object-position: 50% 12%; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .pf-lado > .pf-chave { left: 0; bottom: 0; }
  .pf-chamada { display: none; }
}
@media (max-width: 600px) {
  .pf-carimbo-extra { display: none; }
  .pf-nota summary { grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "num sinal" "perg sinal"; row-gap: .35rem; padding: .9rem .6rem .9rem 1rem; }
  .pf-num { grid-area: num; }
  .pf-perg { grid-area: perg; }
  .pf-sinal { grid-area: sinal; }
  .pf-resp { padding: .3rem 1rem 1.6rem; }
  .pf-quadro-topo { padding-inline: 1rem; }
  .pf-quadro-topo span:last-child { display: none; }
}

/* ───── rodada 3 ───── */
/* marcas de canto: o retrato como folha da prancha */
.pf-retrato::before {
  --c: color-mix(in oklab, var(--luz-2) 55%, transparent);
  content: ""; position: absolute; inset: -12px -12px 6% -12px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--c), var(--c)) left top / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) left top / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) right top / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 1px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 22px 1px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 1px 22px no-repeat;
}
/* número grande da nota em leitura, sobre o saguão (longe do rosto) */
.pf-folha { position: absolute; left: 7%; top: 25%; z-index: 2; display: grid; gap: .2rem; pointer-events: none; }
.pf-folha small { font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); text-shadow: 0 1px 12px #000c; }
.pf-folha-num { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(5rem, 8.5vw, 8rem); line-height: .85; letter-spacing: -.03em; color: var(--luz); text-shadow: 0 2px 30px #000a; }
.pf-folha-num.pf-troca { animation: pf-troca .7s var(--curva); }
@keyframes pf-troca { from { opacity: 0; translate: 0 .25em; } }

/* resposta entra em degraus */
.pf-nota[open] .pf-resp > * { animation: sobe .7s var(--curva) both; }
.pf-nota[open] .pf-resp > :nth-child(2) { animation-delay: .08s; }
.pf-nota[open] .pf-resp > :nth-child(3) { animation-delay: .16s; }

/* celular: chave compacta e horizontal dentro da nota */
.pf-resp .pf-chave { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: end; column-gap: 1rem; width: 100%; max-width: 24rem; padding: .7rem; }
.pf-resp .pf-chave-carimbo { margin: 0; grid-template-columns: 1fr; border: 0; border-left: 1px solid color-mix(in oklab, var(--ouro) 30%, transparent); align-self: stretch; align-content: end; }
.pf-resp .pf-chave-carimbo > span { border-right: 0; white-space: normal; }
.pf-resp .pf-chave-carimbo > .pf-chave-nome { border-top: 1px solid color-mix(in oklab, var(--ouro) 22%, transparent); }
@media (max-width: 999px) { .pf-folha-num { font-size: 4.5rem; } .pf-folha { top: 5%; left: 5%; } }
.pf-resp .pf-chave { grid-template-columns: 9.5rem minmax(0, 1fr); }
.pf-resp .pf-p text { opacity: 0; }
.pf-resp .pf-chave[data-ativo="1"] .pf-p[data-n="1"] text, .pf-resp .pf-chave[data-ativo="2"] .pf-p[data-n="2"] text, .pf-resp .pf-chave[data-ativo="3"] .pf-p[data-n="3"] text,
.pf-resp .pf-chave[data-ativo="4"] .pf-p[data-n="4"] text, .pf-resp .pf-chave[data-ativo="5"] .pf-p[data-n="5"] text, .pf-resp .pf-chave[data-ativo="6"] .pf-p[data-n="6"] text,
.pf-resp .pf-chave[data-ativo="7"] .pf-p[data-n="7"] text { opacity: 1; font-size: 22px; }
@media (max-width: 999px) { .pf-folha { top: 6%; } }