/* pq · A pesquisa (HMI) — o atlas do molar e a trajetória acadêmica */

.pq-topo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "rot rot" "tit apoio"; column-gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.pq-topo .wf-rotulo { grid-area: rot; }
.pq-titulo { grid-area: tit; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.8rem); line-height: 1.02; }
.pq-apoio { grid-area: apoio; max-width: 32rem; padding-bottom: .4rem; font-size: calc(var(--t-texto) * 1.06); }
.pq-apoio strong { color: var(--esmalte); font-weight: 500; }

/* ---------- atlas ---------- */
.pq-atlas { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 20rem); grid-template-areas: "legenda palco pergunta";
  align-items: center; column-gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
.pq-palco { grid-area: palco; margin: 0; position: relative; display: grid; justify-items: center; }
.pq-palco::before { content: ""; position: absolute; inset: 6% 8% 14%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--esmalte) 14%, transparent), transparent); }
.pq-molar { position: relative; width: min(100%, 42rem); aspect-ratio: 866 / 864; }
.pq-molar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pq-molar-base { filter: drop-shadow(0 40px 50px rgb(0 0 0 / .45)); }
.pq-molar-hmi {
  /* cada mancha cresce como tinta: dois círculos desencontrados por mancha deixam a borda irregular enquanto cresce */
  --ma: calc(var(--pq-a) * 12% + .01%); --mb: calc(var(--pq-b) * 17% + .01%); --mc: calc(var(--pq-c) * 19% + .01%);
  --ma2: calc(var(--pq-a) * 8% + .01%); --mb2: calc(var(--pq-b) * 11% + .01%); --mc2: calc(var(--pq-c) * 12% + .01%);
  --pq-mascara: radial-gradient(var(--ma) calc(var(--ma) * .8) at 46% 23.5%, #000 70%, transparent),
    radial-gradient(var(--ma2) var(--ma2) at 51% 21%, #000 66%, transparent),
    radial-gradient(calc(var(--mb) * .9) var(--mb) at 38.5% 50.6%, #000 70%, transparent),
    radial-gradient(var(--mb2) var(--mb2) at 34% 44%, #000 66%, transparent),
    radial-gradient(var(--mc) calc(var(--mc) * .9) at 65.7% 53.4%, #000 70%, transparent),
    radial-gradient(var(--mc2) var(--mc2) at 71% 47%, #000 66%, transparent);
  -webkit-mask-image: var(--pq-mascara); mask-image: var(--pq-mascara);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pq-pino { position: absolute; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; display: grid; place-items: center;
  font: 600 .9rem/1 var(--f-texto); color: var(--noite); border-radius: 50%; font-variant-numeric: lining-nums;
  background: radial-gradient(circle at 35% 35%, #ffd3e4, var(--rosa) 62%); box-shadow: 0 0 0 5px color-mix(in oklab, var(--rosa) 22%, transparent), 0 8px 18px -6px rgb(0 0 0 / .6);
  opacity: 0; scale: .4; transition: opacity .5s, scale .7s var(--curva); }
.pq-pino-a { left: 56.5%; top: 18%; }
.pq-pino-b { left: 29%; top: 39%; }
.pq-pino-c { left: 75.5%; top: 43%; }
.pq-pino.pq-on { opacity: 1; scale: 1; }
.pq-pino.pq-on.pq-foco { scale: 1.3; box-shadow: 0 0 0 10px color-mix(in oklab, var(--rosa) 28%, transparent), 0 8px 18px -6px rgb(0 0 0 / .6); }
.pq-verbete { cursor: default; }
.pq-ilustrativo { margin-top: -1.5rem; position: relative; z-index: 2; }

.pq-legenda { grid-area: legenda; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.pq-verbete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; opacity: .38; transition: opacity .7s var(--curva); }
.pq-verbete.pq-on { opacity: 1; }
.pq-num { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font: 600 .9rem/1 var(--f-texto);
  border: 1px solid color-mix(in oklab, var(--esmalte) 30%, transparent); color: var(--esmalte); transition: background-color .6s, color .6s, border-color .6s; }
.pq-verbete.pq-on .pq-num { background: var(--rosa); border-color: var(--rosa); color: var(--noite); }
.pq-verbete-tit { font-family: var(--f-titulo); font-weight: 600; font-size: 1.2rem; line-height: 1.15; margin-bottom: .35rem; padding-top: .2rem; }
.pq-verbete p { font-size: .92rem; line-height: 1.5; color: var(--texto-suave); }

.pq-pergunta { grid-area: pergunta; padding: var(--e-3); border-radius: var(--raio); background: color-mix(in oklab, var(--vinho) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--esmalte) 12%, transparent); box-shadow: 0 40px 90px -40px rgb(0 0 0 / .7); }
.pq-pergunta-rot { font-size: var(--t-rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-claro); font-weight: 500; }
.pq-pergunta-txt { margin-top: .7rem; font-family: var(--f-titulo); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--esmalte); }
.pq-resposta { margin: var(--e-3) 0 0; padding-left: 1rem; border-left: 2px solid color-mix(in oklab, var(--rosa) 70%, transparent); }
.pq-resposta p { font-family: var(--f-titulo); font-style: italic; font-size: var(--t-fala); line-height: 1.42; color: var(--esmalte); }
.pq-resposta footer { margin-top: .7rem; font-size: .82rem; color: var(--texto-suave); }

/* ---------- percurso acadêmico ---------- */
.pq-percurso { margin-top: clamp(5rem, 3rem + 6vw, 9rem); }
.pq-deslize { display: none; }
.pq-percurso-tit { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); margin-bottom: var(--e-4); }
.pq-fotos { display: grid; grid-template-columns: 1.05fr 1fr 1.15fr .95fr; gap: clamp(.8rem, 1.4vw, 1.4rem); align-items: end; }
.pq-foto { margin: 0; border-radius: var(--raio); box-shadow: 0 40px 90px -40px rgb(0 0 0 / .7); background: var(--vinho); }
.pq-foto-1 { aspect-ratio: 4 / 5; }
.pq-foto-2 { aspect-ratio: 4 / 5.6; }
.pq-foto-2 > img { object-position: 50% 30%; }
.pq-foto-3 { aspect-ratio: 1 / 1; }
.pq-foto-3 > img { object-position: 60% 20%; }
.pq-foto-4 { aspect-ratio: 3 / 4.4; }
.pq-foto-4 > img { object-position: 30% 30%; }
.pq-foto-rot { position: absolute; left: .7rem; bottom: .7rem; z-index: 2; }

.pq-linha { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); position: relative; }
.pq-linha::before { content: ""; position: absolute; left: 0; right: 0; top: .42rem; height: 1px; background: color-mix(in oklab, var(--esmalte) 22%, transparent); }
.pq-linha li { position: relative; padding-top: 1.6rem; display: grid; gap: .3rem; align-content: start; }
.pq-linha li::before { content: ""; position: absolute; left: 0; top: 0; width: .85rem; height: .85rem; border-radius: 50%; background: var(--noite); border: 2px solid var(--rosa); }
.pq-linha li:last-child::before { background: radial-gradient(circle at 35% 35%, #ffd3e4, var(--rosa) 60%); box-shadow: 0 0 0 4px color-mix(in oklab, var(--rosa) 22%, transparent); }
.pq-linha b { font-family: var(--f-titulo); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--rosa-claro); font-variant-numeric: lining-nums; }
.pq-l-tit { font-weight: 600; font-size: .98rem; line-height: 1.3; color: var(--esmalte); margin-top: .3rem; }
.pq-l-txt { font-size: .88rem; line-height: 1.5; color: var(--texto-suave); }
.pq-l-txt i { font-family: var(--f-titulo); font-size: .98rem; color: var(--esmalte-2); }

/* ---------- fecho ---------- */
.pq-fecho { margin: clamp(5rem, 3rem + 6vw, 9rem) auto 0; max-width: 54rem; text-align: center; }
.pq-fecho-antes { font-size: var(--t-rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-claro); font-weight: 500; }
.pq-fecho-fala { margin: var(--e-3) 0 0; }
.pq-fecho-apoio { margin: var(--e-4) auto 0; max-width: 32rem; color: var(--texto-suave); }
.pq-fecho-fala p { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 1rem + 1.6vw, 2.4rem); line-height: 1.25; color: var(--esmalte); text-wrap: balance; }
.pq-acao { margin-top: var(--e-4); display: flex; justify-content: center; }

/* ---------- tablet e celular ---------- */
@media (max-width: 1100px) {
  .pq-topo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rot" "tit" "apoio"; }
  .pq-apoio { margin-top: var(--e-3); }
  .pq-atlas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "palco palco" "legenda pergunta"; row-gap: var(--e-4); align-items: start; }
  .pq-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pq-fotos .pq-foto { aspect-ratio: 4 / 5; }
  .pq-linha { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding-left: 1.8rem; }
  .pq-linha::before { left: .42rem; right: auto; top: .4rem; bottom: .4rem; width: 1px; height: auto; }
  .pq-linha li { padding-top: 0; }
  .pq-linha li::before { left: -1.8rem; top: .45rem; }
}
@media (max-width: 700px) {
  .pq-atlas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "palco" "legenda" "pergunta"; }
  .pq-verbete p { font-size: .95rem; }
  .pq-fotos { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margem)); padding: 0 var(--margem) 1rem;
    scrollbar-width: none; align-items: flex-end; }
  .pq-fotos::-webkit-scrollbar { display: none; }
  .pq-foto { flex: 0 0 72%; scroll-snap-align: center; }
  .pq-foto-3 { flex-basis: 84%; }
  .pq-foto-rot { font-size: .875rem; white-space: nowrap; }
  .pq-deslize { display: block; margin-top: .2rem; font-size: .875rem; color: var(--texto-suave); }
  .pq-fecho { text-align: left; }
  .pq-acao { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-pino, .pq-verbete, .pq-num { transition: none; }
}