/* pg · Perguntas dos pais */
.pg { --m1: var(--lilas-nevoa); --m2: var(--rosa-nevoa); }
.pg-grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 104px); align-items: start; }
.pg-lado { position: sticky; top: 40px; }
.pg-intro { margin: 22px 0 0; }
.pg-foto { position: relative; margin: 0 0 0 6px; width: min(340px, 78%); padding: 12px 12px 16px; background: #fff;
  box-shadow: 0 1px 1px rgb(60 30 40 / .06), 0 18px 36px -16px rgb(70 40 50 / .38); transform: rotate(-2.4deg); }
.pg-foto img { display: block; width: 100%; height: auto; }
.pg-foto figcaption { margin-top: 10px; font-family: var(--f-titulo); font-variation-settings: "INFM" 75, "BNCE" 25; font-size: .95rem; color: var(--tinta-2); }
.pg-fotos { position: relative; margin-top: 44px; }
.pg-bilhete { position: absolute; width: min(230px, 52%); right: 0; top: 46%; z-index: 2; }

.pg-lista { border-top: 1.5px solid color-mix(in oklab, var(--lilas) 35%, transparent); }
.pg-item { position: relative; border-bottom: 1.5px solid color-mix(in oklab, var(--lilas) 35%, transparent); transition: background .4s var(--curva); }
.pg-item h3 { margin: 0; font: inherit; }
.pg-q { all: unset; box-sizing: border-box; width: 100%; min-height: 64px; display: grid; grid-template-columns: 56px 1fr 32px; align-items: center; gap: 12px; padding: 20px 0; cursor: pointer;
  font-family: var(--f-titulo); font-weight: 560; font-size: clamp(1.1rem, 1rem + .55vw, 1.5rem); line-height: 1.25; color: var(--tinta); }
.pg-q:focus-visible { outline: 3px solid var(--lilas); outline-offset: 2px; border-radius: 8px; }
.pg-n { position: relative; justify-self: center; font-size: 1.3em; color: var(--lilas); font-variation-settings: "INFM" 60, "BNCE" 20; transition: color .3s; }
.pg-q:hover .pg-p { color: var(--framboesa-escura); }
.pg-aberto .pg-n { color: var(--framboesa-escura); }
.pg-aberto .pg-q { font-weight: 720; }
.pg-item::before { content: ""; position: absolute; inset: -1px -18px; z-index: -1; border-radius: 4px; opacity: 0; transform: scaleY(.96); transition: opacity .45s var(--curva), transform .45s var(--curva);
  background: linear-gradient(90deg, transparent 54px, oklch(80% .07 10 / .4) 54px 55.5px, transparent 55.5px), var(--papel);
  box-shadow: 0 1px 1px rgb(60 30 40 / .05), 0 18px 34px -20px rgb(70 40 50 / .3); }
.pg-aberto::before { opacity: 1; transform: none; }
.pg-aberto { border-bottom-color: transparent; }
.pg-fim { margin: 34px 0 0; font-size: var(--t-corpo); color: var(--tinta-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.pg-fim .wf-link { color: var(--framboesa-escura); }
.pg-roda { width: 2.05em; left: 50%; top: 50%; transform: translate(-50%, -52%) rotate(-8deg); }
.pg-roda path { stroke-width: 3.6; }
/* o giz só circula a pergunta aberta, e redesenha a cada abertura */
.js main .pg .pg-roda .tr { animation: none; stroke-dashoffset: 1; opacity: 0; }
.js main .pg.wf-visto .pg-aberto .pg-roda .tr { animation: tracar var(--t) cubic-bezier(.55,.05,.3,1) var(--d) both; animation-play-state: running; }
.pg-mais { position: relative; width: 24px; height: 24px; justify-self: end; }
.pg-mais::before, .pg-mais::after { content: ""; position: absolute; left: 3px; right: 3px; top: 11px; height: 2.2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--curva); }
.pg-mais::after { transform: rotate(90deg); }
.pg-aberto .pg-mais::after { transform: rotate(0); }
.pg-r { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--curva), visibility 0s .5s; }
.pg-aberto .pg-r { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s var(--curva); }
.pg-rd { overflow: hidden; padding-left: 68px; }
.pg-rd p { margin: 0 0 24px; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta-2); max-width: 34em; }
.pg-rd q { color: var(--tinta); font-size: 1.04em; }
.pg-zap { margin-bottom: 26px; }

@media (max-width: 900px) {
  .pg-grade { grid-template-columns: 1fr; }
  .pg-lado { position: static; display: contents; }
  .pg-lado > .wf-rotulo, .pg-titulo, .pg-intro { grid-column: 1; }
  .pg-lista { order: 4; }
  .pg-fotos { order: 5; margin-top: 56px; }
  .pg-foto { width: min(230px, 60%); }
  .pg-bilhete { position: relative; top: auto; right: auto; margin: 18px 4px 0 auto; width: min(230px, 66%); }
  .pg-item::before { inset: -1px -12px; background: var(--papel); }
  .pg-grade { gap: 0; }
  .pg-intro { margin-bottom: 30px; }
  .pg-q { grid-template-columns: 44px 1fr 26px; gap: 10px; }
  .pg-rd { padding-left: 50px; }
}
@media (max-width: 400px) { .pg-rd { padding-left: 0; } }

.pg-fim .wf-link span { margin-left: 6px; }