/* Perguntas — prefixo pf-. Escura: o acordeão em momentos da visita, com a pergunta aberta iluminada pelo pool de luz. */

.pf-miolo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(3rem, 6vw, 8rem); row-gap: 0; align-items: start;
}
.pf-lado  { grid-column: 1; grid-row: 1; }
.pf-lista { grid-column: 2; grid-row: 1 / 5; }
.pf-vidro { grid-column: 1; grid-row: 2; margin-top: 2.5rem; max-width: 34ch; }
.pf-acoes { grid-column: 1; grid-row: 3; margin-top: 2.25rem; }
.pf-relogio { grid-column: 1; grid-row: 4; margin-top: 1.5rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-clara-suave); line-height: 1.6; }
.pf-relogio .wf-ponto { vertical-align: middle; margin-right: .25rem; }
.pf-lado .wf-titulo { margin-top: 1rem; }
.pf-lado .wf-texto { margin-top: 1.5rem; max-width: 36ch; }
.pf-vidro blockquote { color: var(--tinta); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.pf-acoes { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* pontos de cidade, só à noite */
.pf-cidade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transition: opacity 2.4s linear;
  background-image:
    radial-gradient(1.5px 1.5px at 82% 18%, #ffd9a0 60%, transparent 61%),
    radial-gradient(1px 1px at 88% 26%, #fff3e0 60%, transparent 61%),
    radial-gradient(2px 2px at 93% 14%, #ffe9c9 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 76% 30%, #f7c784 60%, transparent 61%),
    radial-gradient(1px 1px at 96% 36%, #dfe9ff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 70% 12%, #ffc98a 60%, transparent 61%),
    radial-gradient(1px 1px at 85% 44%, #ffd9a0 60%, transparent 61%),
    radial-gradient(2px 2px at 64% 22%, #fff3e0 60%, transparent 61%),
    radial-gradient(1px 1px at 91% 52%, #ffe9c9 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 79% 60%, #f7c784 60%, transparent 61%);
}
html[data-luz="noite"] .pf-cidade { opacity: .7; }

/* ---------- a lista, em momentos ---------- */
.pf-lista { position: relative; }
.pf-grupo + .pf-grupo { margin-top: 2.25rem; }
.pf-grupo__rotulo {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--caramelo-claro);
}
.pf-grupo__rotulo::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--caramelo) 32%, transparent); }
.pf-item { position: relative; border-bottom: 1px solid color-mix(in oklab, var(--caramelo) 28%, transparent); }
.pf-item__pergunta {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: 1rem;
  padding: 1.3rem .35rem 1.3rem 0;
  font-family: var(--fonte-titulo); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.25; color: var(--tinta);
}
.pf-item__pergunta::-webkit-details-marker { display: none; }
.pf-item__pergunta:focus-visible { outline-offset: -2px; }
.pf-item__num { font-size: .95rem; font-weight: 500; letter-spacing: .02em; color: #dbcab5; transition: color .5s var(--suave); } /* caramelo-claro aclarado: 4,5:1 mesmo junto ao pool */
.pf-item[open] .pf-item__num { color: #f0c58f; } /* âmbar aclarado, para ficar acima de 4,5:1 sobre o pool de luz */
.pf-item__texto { opacity: .84; transition: opacity .5s var(--suave); }
.pf-item:hover .pf-item__texto, .pf-item[open] .pf-item__texto { opacity: 1; }
.pf-item__sinal { position: relative; width: 1.6rem; height: 1.6rem; align-self: center; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--caramelo) 55%, transparent); transition: transform .6s var(--suave), border-color .4s; }
.pf-item__sinal::before, .pf-item__sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1px; background: var(--caramelo-claro); transform: translate(-50%, -50%); }
.pf-item__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.pf-item[open] .pf-item__sinal { transform: rotate(45deg); border-color: var(--caramelo); }
.pf-item__corpo { overflow: hidden; }
.pf-item__corpo p { padding: 0 3.5rem 1.6rem 2.6rem; max-width: 58ch; font-size: var(--fonte-corpo); line-height: 1.6; color: var(--tinta-clara-suave); }
.pf-item__corpo .wf-link { color: var(--tinta); }

/* o pool de luz sobre a pergunta aberta: transborda o item; estático sem JS, deslizante com JS */
.pf-item[open]::before, .pf-luz {
  content: ""; position: absolute; left: -4rem; right: -2rem; top: -2.5rem; bottom: -2.5rem; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 38% 48% in oklab, color-mix(in oklab, var(--luz-b) 19%, transparent), transparent 100%);
}
.pf-lista--js .pf-item[open]::before { display: none; }
.pf-luz { top: 0; bottom: auto; height: 0; opacity: 0; z-index: 0; transition: top .9s var(--suave), height .9s var(--suave), opacity .6s var(--suave); }
.pf-lista--js .pf-item, .pf-lista--js .pf-grupo__rotulo { position: relative; z-index: 1; }

/* ---------- tablet e celular ---------- */
@media (max-width: 900px) {
  .pf-miolo { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .pf-lado, .pf-lista, .pf-vidro, .pf-acoes, .pf-relogio { grid-column: 1; grid-row: auto; }
  .pf-lista { margin-top: 2.5rem; }
  .pf-vidro { margin-top: 3rem; max-width: 40ch; }
  .pf-acoes { margin-top: 2rem; }
}
@media (max-width: 600px) {
  .pf-item__pergunta { grid-template-columns: 2.1rem 1fr auto; gap: .75rem; padding: 1.15rem 0; }
  .pf-item__corpo p { padding: 0 0 1.4rem 2.1rem; }
  .pf-item[open]::before, .pf-luz { left: calc(-1 * var(--margem)); right: calc(-1 * var(--margem)); }
  .pf-acoes { flex-direction: column; align-items: stretch; }
  .pf-acoes .wf-botao { justify-content: center; }
}