/* pf · Professor — a aula e a carta dos alunos dominam */
.pf-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.pf-texto { padding-top: clamp(1rem, 4vw, 4rem); position: relative; z-index: 2; }
.pf-rot { margin: 0 0 1.4rem; }
.pf .ts-forte { font-size: clamp(2.8rem, 1.2rem + 5vw, 6rem); }
.pf-fala { margin: clamp(1.8rem, 3.5vw, 3rem) 0 0; max-width: 26em; }
.pf-fala p { margin: 0; font-size: clamp(1.3rem, 1rem + .9vw, 1.85rem); line-height: 1.35; font-weight: 400; color: var(--tinta); }

/* palco: foto da aula + carta */
.pf-grade { grid-template-rows: auto; }
.pf-palco { position: relative; z-index: 1; }
.pf-foto { margin: 0 calc(-1 * max(var(--marg), (100vw - var(--largura)) / 2)) 0 0; }
.pf-foto img { display: block; width: 100%; aspect-ratio: 4 / 5.5; object-fit: cover; object-position: 62% 35%; }
.pf-carta { position: relative; z-index: 3; margin: clamp(2.5rem, 4vw, 3.5rem) 0 0 -1rem; width: calc(100% + 12rem); max-width: none; rotate: -1.4deg; }
.pf-folha { background: #fbf8f1; color: var(--tinta); padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.8vw, 2.6rem) 1.3rem clamp(2.4rem, 4vw, 3.6rem);
  font-family: var(--f-nota); font-size: 1.125rem; line-height: 1.6;
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 40px 70px -30px rgb(13 31 25 / .65), 0 10px 22px -10px rgb(13 31 25 / .35);
  background-image: linear-gradient(90deg, transparent 1.6rem, rgb(157 23 21 / .22) 1.6rem, rgb(157 23 21 / .22) calc(1.6rem + 1px), transparent calc(1.6rem + 1px)); }
.pf-folha p { margin: 0 0 .9em; }
.pf-saud { font-style: italic; font-weight: 500; }
.pf-chave { display: block; margin: .2em 0 .5em; font-family: var(--f-titulo); font-size: clamp(1.45rem, 1.1rem + .9vw, 1.9rem); line-height: 1.18; font-weight: 500; color: var(--verde); }
.pf-chave mark { background: linear-gradient(transparent 60%, rgb(224 83 63 / .3) 60%, rgb(224 83 63 / .3) 92%, transparent 92%); color: inherit; }
.pf-neb { color: var(--vermelho); font-weight: 700; }
.pf-corte { color: var(--texto-papel); margin-bottom: 0 !important; }
.pf-carta figcaption { margin-top: .8rem; font-size: .95rem; color: var(--vermelho); }

/* onde ele ensina */
.pf-aulas { margin-top: clamp(4rem, 8vw, 7rem); }
.pf-lousa { position: relative; isolation: isolate; overflow: clip; border-radius: 6px; color: var(--creme);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.4rem, 5vw, 4.5rem) clamp(2rem, 4.5vw, 4rem);
  background: radial-gradient(60% 80% at 20% 10% in oklab, rgb(241 239 234 / .07), transparent 70%),
              radial-gradient(50% 70% at 85% 90% in oklab, rgb(241 239 234 / .05), transparent 70%),
              linear-gradient(160deg in oklab, #0a4a3a, var(--verde) 55%, #022f25);
  box-shadow: 0 40px 70px -36px rgb(1 36 28 / .7), inset 0 0 0 1px rgb(241 239 234 / .06); }
.pf-lousa::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pf .pf-f6 { margin: 0 0 clamp(2.2rem, 4vw, 3.4rem); max-width: 34em; font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); line-height: 1.42; color: var(--creme); }
.pf-f6 b { color: var(--vermelho-caneta); font-weight: 500; }
.pf-giz { display: block; width: 100%; height: clamp(70px, 9vw, 120px); margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); overflow: visible; }
.pf-giz path { fill: none; stroke: rgb(241 239 234 / .55); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pf-giz text { font-family: var(--f-nota); font-style: italic; font-size: 15px; fill: rgb(241 239 234 / .7); }
.pf-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgb(241 239 234 / .35); }
.pf-lista li { padding: 1.4rem clamp(1rem, 2vw, 2rem) 0 0; }
.pf-lista li + li { padding-left: clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--linha-escuro); }
.pf .pf-lista .rotulo { margin: 0 0 .7rem; color: var(--creme-80); }
.pf-lista h3 { margin: 0; font-family: var(--f-titulo); text-transform: uppercase; font-weight: 700; font-size: clamp(1.3rem, 1rem + .8vw, 1.75rem); line-height: 1.02; color: var(--creme); }
.pf-lista h3 span { display: block; font-weight: 300; color: var(--creme-80); }
.pf-lista li > p:last-child { margin: .8rem 0 0; color: var(--creme-80); }

/* fecho */
.pf-fecho { margin-top: clamp(4rem, 8vw, 7rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.pf-grande { margin: 0; }
.pf-grande p { margin: 0; font-family: var(--f-titulo); text-transform: uppercase; font-weight: 300; font-size: clamp(1.9rem, 1rem + 3vw, 3.6rem); line-height: .98; color: var(--verde); }
.pf-grande em { font-style: normal; font-weight: 700; }
.pf-ponte { position: relative; }
.pf-ponte-t { margin: 0 0 1.1rem; font-family: var(--f-titulo); text-transform: uppercase; font-weight: 700; font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1; color: var(--vermelho); }
.pf-seta { position: absolute; width: 74px; height: 40px; left: -88px; top: -6px; overflow: visible; }
.pf-seta path { fill: none; stroke: var(--vermelho); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-pac { margin: 0; padding-left: 1.2rem; border-left: 2px solid var(--vermelho); }
.pf-pac blockquote { margin: 0; }
.pf-pac p { margin: 0; font-family: var(--f-nota); font-style: italic; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height: 1.5; }
.pf-pac figcaption { margin-top: .5rem; font-size: .9rem; color: var(--texto-papel); letter-spacing: .03em; }

/* a carta entra do nebuloso ao claro: mais lenta que o padrão */
.js .pf-carta[data-rev="foco"] { filter: blur(18px); transition: opacity 1.4s var(--curva), filter 2.4s var(--curva) .2s; }
.js .pf-carta[data-rev="foco"].on { filter: blur(0); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .pf-carta { width: calc(100% + 8rem); }
  .pf-foto img { aspect-ratio: 4 / 6.6; object-position: 70% 35%; }
  .pf-folha { font-size: 1.0625rem; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .pf-grade { grid-template-columns: 1fr; gap: 0; }
  .pf-texto { display: contents; }
  .pf-palco { order: 1; margin-top: 2rem; }
  .pf-carta { order: 2; }
  .pf .ts-forte { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .pf-foto { margin-inline: calc(-1 * var(--marg)); }
  .pf-foto img { aspect-ratio: 1 / 1; object-position: 70% 40%; }
  .pf-carta { margin: -3.5rem .2rem 0; width: auto; }
  .pf-seta { display: none; }
  .pf-giz { height: 64px; }
  .pf-giz text { display: none; }
  .pf-folha { padding: 1.3rem 1.1rem 1rem 1.9rem; background-image: linear-gradient(90deg, transparent 1rem, rgb(157 23 21 / .22) 1rem, rgb(157 23 21 / .22) calc(1rem + 1px), transparent calc(1rem + 1px)); font-size: 1.0625rem; }
  .pf-lousa { margin-inline: calc(-1 * var(--marg) * .5); }
  .pf-lista li { padding: 1.3rem 0; }
  .pf-lista { grid-template-columns: 1fr; }
  .pf-lista li + li { padding: 1.3rem 0; border-left: 0; border-top: 1px solid var(--linha-escuro); }
  .pf-fecho { grid-template-columns: 1fr; }
}