/* 4. formacao (fo-) */
.fo-grade { max-width: 1240px; margin: 0 auto; }
.fo-topo {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end;
  margin-bottom: clamp(56px, 7vw, 100px);
}
.fo-topo-apoio { padding-bottom: 8px; }
.fo-usp { display: flex; margin: 0 0 24px -6px; }
.fo-usp .wf-peca { --peca: clamp(72px, 7.6vw, 112px); }
.fo-usp .wf-peca text { font-size: 19px; }
.fo-titulo { max-width: 14ch; }
.fo-lead { margin: 0; max-width: 34ch; }
.fo-registro {
  display: inline-block; margin: 1.6rem 0 0; padding: .55rem .9rem; border-radius: 10px;
  font-size: var(--t-mini); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta);
  background: #fffaf7; box-shadow: var(--sombra-eva);
}

/* eras e marcos */
.fo-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.fo-era-nome {
  position: relative; margin: 0 0 14px; padding-left: 44px;
  font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; color: var(--tinta);
}
.fo-era-nome span { display: block; margin-bottom: .25rem; font-family: var(--f-texto); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bordo); }
.fo-era-nome::before { content: ""; position: absolute; left: 0; top: .2em; width: 26px; height: 26px; border-radius: 7px; background: var(--era, var(--eva-rosa)); box-shadow: var(--sombra-eva); rotate: -6deg; }
.fo-marcos { list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; }
.fo-marcos::before { content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px; border-left: 2px dashed rgb(166 45 88 / .22); }
.fo-marco { position: relative; padding: 18px 0; }
.fo-marco::before {
  content: ""; position: absolute; left: -38px; top: 30px; width: 14px; height: 14px; border-radius: 4px;
  background: var(--era, var(--eva-rosa)); box-shadow: 0 0 0 4px var(--papel), var(--sombra-eva); rotate: 8deg;
}
.fo-ano { margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.01em; color: var(--bordo); }
.fo-ano span { font-weight: 500; color: rgb(166 45 88 / .6); }
.fo-marco h4 { margin: .3rem 0 0; font-family: var(--f-titulo); font-weight: 500; font-size: 1.15rem; line-height: 1.25; color: var(--tinta); }
.fo-marco p:not(.fo-ano) { margin: .3rem 0 0; font-size: .98rem; max-width: 58ch; }
.fo-marco--maior .fo-ano { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.fo-marco--maior h4 { font-size: var(--t-h3); }
.fo-marco--maior p:not(.fo-ano) { font-size: var(--t-corpo); }
.fo-marco--maior::before { width: 22px; height: 22px; left: -42px; top: 34px; }

/* ensinar: duas imagens e a frase dela */
.fo-ensinar {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 80px);
  align-items: center; max-width: 1240px; margin: clamp(88px, 10vw, 150px) auto 0;
  padding-top: clamp(48px, 6vw, 80px); border-top: 2px dashed rgb(166 45 88 / .16);
}
.fo-ensinar-nome { grid-column: 1 / -1; margin-bottom: 8px; }
.fo-ensinar-nome::before { background: var(--eva-menta); }
.fo-master .wf-placa { --placa-giro: -2deg; }
.fo-master img { aspect-ratio: 770 / 960; }
.fo-legenda { margin: 44px 0 0; font-size: .95rem; line-height: 1.5; color: var(--texto); }
.fo-legenda b { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: 1.15rem; color: var(--bordo); }
.fo-cit p { font-size: clamp(1.4rem, 1.6vw + .6rem, 2rem); line-height: 1.35; color: var(--texto-forte); }
.fo-livro .wf-placa { --placa-giro: 3deg; }
.fo-capa { position: relative; aspect-ratio: 324 / 458; overflow: hidden; border-radius: 4px; }
.fo-capa img { position: absolute; max-width: none; width: calc(540 / 324 * 100%); left: calc(-106 / 324 * 100%); top: calc(-326 / 458 * 100%); }

@media (max-width: 960px) {
  .fo-topo { grid-template-columns: 1fr; }
  .fo-linha { grid-template-columns: 1fr; }
  .fo-ensinar { grid-template-columns: 1fr 1fr; align-items: start; }
  .fo-cit { grid-column: 1 / -1; grid-row: 2; margin-bottom: 12px; }
}
@media (max-width: 560px) {
  .fo-marcos { padding-left: 36px; }
  .fo-marcos::before { left: 8px; }
  .fo-marco { padding: 14px 0; }
  .fo-marco::before { left: -34px; top: 26px; }
  .fo-marco--maior::before { left: -38px; top: 30px; }
  .fo-era-nome { padding-left: 36px; }
  .fo-ensinar { gap: 28px 22px; }
  .fo-legenda { margin-top: 30px; font-size: var(--t-mini); }
  .fo-legenda b { font-size: 1rem; }
}