/* ═════════════════════════════════════════════════════════════════
   RIVIO — Founders Fellow (carreiras/founders-fellow.html)

   Família HOME, como a Carreiras: seções de largura cheia com eyebrow
   e título, `dark-section` para o manifesto, a agenda e a inscrição,
   `cta-seta` nas chamadas e o formulário do `componentes.css`. O que
   está aqui é só o que o site não tinha: o CARTAZ do herói ("A saúde
   precisa de engenheiros": fundo preto que vira ameixa, trecho de
   código em mono e os glifos em pixel, nas cores do cartaz), os
   números do manifesto, os pilares, os cartões do que o fellow ganha,
   a trilha do processo, a agenda e o "recebido" do formulário.

   O texto é o do modelo da Cultura (entrada/founders-fellow/modelo.html,
   v2 de 06/11/2026), sem uma palavra mudada; as medidas são as do
   sistema (grade de 8, DIRETRIZES § 3.13) e os tipos são os do site:
   Funnel Display no texto, Bai Jamjuree nas etiquetas e um mono do
   sistema só para o código do cartaz (o site não carrega mono).
   ═════════════════════════════════════════════════════════════════ */

.ff-pagina {
  /* as cores do cartaz, escopadas: não são tokens do design system */
  --ff-preto: #050507;
  --ff-ameixa: #3b2b4f;
  --ff-ameixa-2: #241b33;
  --ff-px-azul: #6c8cf5;
  --ff-px-rosa: #e3a6f2;
  --ff-px-lav: #c9cdf7;
  --ff-px-ambar: #f2b76b;
  --ff-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff;
}

/* ── A coluna ────────────────────────────────────────────────────
   A mesma régua das seções claras da Carreiras: 1216 no centro, com
   a calha do site dos lados. Nas faixas escuras ela vale igual (a
   `dark-section` só define o recuo para quem usa `__head`). */
.ff-largo {
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.ff-sec { padding: 120px 0; }
.ff-sec--colado { padding-top: 0; }

.ff-sec__titulo {
  max-width: 712px;
  margin: 24px 0 0;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.24;
  color: var(--dark-01);
}

.ff-sec__titulo--claro { color: var(--light-01); }

/* O link secundário: texto do site, sem caixa. */
.ff-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--cta-corpo);
  line-height: 1.2;
  letter-spacing: 0.021em;
  text-transform: uppercase;
  color: var(--light-64);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--light-32);
  transition: color 0.24s var(--ease-out-soft), text-decoration-color 0.24s var(--ease-out-soft);
}

.ff-link:hover {
  color: var(--light-01);
  text-decoration-color: var(--light-80);
}

.ff-link--escuro { color: var(--dark-03); text-decoration-color: rgba(24, 27, 31, 0.24); }
.ff-link--escuro:hover { color: var(--dark-01); text-decoration-color: rgba(24, 27, 31, 0.6); }

/* ── O código e os glifos do cartaz ─────────────────────────────── */
.ff-code {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 14px;
  line-height: 1.6;
  color: #f1f1f4;
  white-space: pre;
}

.ff-code .y { color: var(--ff-px-ambar); }
.ff-code .p { color: var(--ff-px-rosa); }
.ff-code--miudo { font-size: 12px; }

.ff-px { display: inline-block; vertical-align: middle; }
.ff-px svg { display: block; }

/* ── O herói ─────────────────────────────────────────────────────
   O CARTAZ. Fundo preto que desce para ameixa; a manchete gigante
   atravessa a largura toda; embaixo, o código com os três glifos à
   esquerda e o resto à direita; no pé, o RIVIO pontilhado do rodapé
   sangrando para fora da seção. */
.ff-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: 160px 0 96px;
  background: var(--ff-preto);
  color: var(--light-01);
  overflow: clip;
  isolation: isolate;
}

.ff-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.ff-hero__titulo {
  max-width: 14em;
  margin: 0;
  font-weight: 500;
  font-size: clamp(44px, 9.028vw, 130px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ff-hero__tag { margin-bottom: 24px; }

.ff-hero__sub {
  max-width: 640px;
  margin: 32px 0 0;
  font-weight: 300;
  font-size: clamp(18px, 1.667vw, 24px);
  line-height: 1.4;
  color: var(--light-80);
}

.ff-abre__titulo {
  margin: 0;
  font-weight: 400;
  font-size: clamp(28px, 3.333vw, 48px);
  line-height: 1.08;
  color: var(--light-01);
}

.ff-abre__lede {
  max-width: 560px;
  margin: 20px 0 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--light-80);
}

/* a abertura do programa, logo abaixo da imagem */
.ff-abre {
  position: relative;
  padding: 120px 0 0;
  background: linear-gradient(180deg, var(--ff-preto) 0%, #0b0a10 40%, var(--ff-ameixa-2) 78%, var(--ff-ameixa) 100%);
  color: var(--light-01);
  overflow: clip;
}

.ff-abre__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.ff-hero__cartaz { padding-top: 8px; }

.ff-glifos {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 48px;
}

/* as células acendem uma a uma na entrada (`--i` vem do JS) */
.js .ff-px[data-acende] rect {
  opacity: 0;
  animation: ff-acende 0.4s var(--ease-out-soft) forwards;
  animation-delay: calc(1000ms + var(--i, 0) * 24ms);
}

@keyframes ff-acende {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ff-px[data-acende] rect { opacity: 1; animation: none; }
}

.ff-hero__quem {
  margin: 0;
  font-weight: 300;
  font-size: clamp(18px, 1.667vw, 24px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--light-80);
}

.ff-hero__claim {
  max-width: 560px;
  margin: 12px 0 0;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.16;
}

.ff-hero__bolsa {
  margin: 32px 0 0;
  font-weight: 500;
  font-size: clamp(32px, 3.333vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ff-hero__bolsa sup {
  margin-left: 2px;
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: super;
}

.ff-hero__bolsa small {
  display: block;
  margin-top: 8px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--light-64);
}

.ff-hero__datas {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
}

.ff-hero__datas > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--light-16);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.ff-hero__datas dt {
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 16px;
}

.ff-hero__datas dd {
  margin: 0;
  font-weight: 300;
  color: var(--light-80);
}

.ff-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
}

/* o RIVIO pontilhado: a largura da coluna, cortado pelo pé da seção */
.ff-hero__marca {
  position: relative;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  height: 200px;
  margin: 80px auto 0;
  overflow: clip;
}

.ff-hero__marca img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.4;
}

/* ── O fundo do cartaz ───────────────────────────────────────────
   A cena gerada no Magnific (entrada/founders-fellow/magnific/), por
   trás de tudo, com um véu que a escurece em cima (onde a manchete
   mora) e a leva para a ameixa embaixo. A imagem é decoração: `alt`
   vazio, `aria-hidden`. */
.ff-hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}

.ff-hero__fundo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(0.9);
}

.ff-hero__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.62) 0%, rgba(5, 5, 7, 0.12) 36%, rgba(5, 5, 7, 0.2) 60%, rgba(5, 5, 7, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.4) 0%, rgba(5, 5, 7, 0) 60%);
}

/* ── O manifesto ─────────────────────────────────────────────────
   Faixa escura; a chapa dos números desce metade para fora dela, e a
   seção seguinte abre com o respiro que ela ocupa. */
.ff-manifesto { padding: 120px 0 0; }
.ff-manifesto .ff-largo { padding-bottom: 0; }

.ff-manifesto__titulo {
  max-width: 712px;
  margin: 24px 0 0;
  font-weight: 400;
  font-size: clamp(32px, 3.889vw, 56px);
  line-height: 1.08;
  color: var(--light-01);
}

.ff-manifesto__titulo span { color: var(--blue); }

.ff-manifesto__lede {
  max-width: 712px;
  margin: 24px 0 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--light-64);
}

.ff-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border-radius: var(--r-caixa);
  background: var(--light-01);
  color: var(--dark-01);
  transform: translateY(50%);
}

.ff-numero {
  padding: 28px;
  border-left: 1px solid rgba(24, 27, 31, 0.12);
}

.ff-numero:first-child { border-left: 0; }

.ff-numero__n {
  margin: 0;
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
}

.ff-numero__n--curto {
  font-size: 22px;
  line-height: 1.8;
}

.ff-numero__l {
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dark-03);
}

/* A seção seguinte abre com o espaço da chapa (metade dela: 56 + 28). */
.ff-como { padding-top: 200px; }

/* ── Os pilares ──────────────────────────────────────────────────── */
.ff-pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.ff-pilar {
  padding-top: 24px;
  border-top: 2px solid var(--blue);
}

.ff-pilar .ff-px { margin-bottom: 16px; }

.ff-pilar__k,
.ff-cartao__k {
  margin: 0;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--blue);
}

.ff-pilar h3,
.ff-cartao h3 {
  margin: 8px 0 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--dark-01);
}

.ff-pilar p:last-child {
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* ── Os cartões ──────────────────────────────────────────────────── */
.ff-cartoes {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.ff-cartao {
  padding: 32px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
}

.ff-cartao--escuro {
  background: var(--dark-01);
  color: var(--light-01);
}

.ff-cartao--escuro .ff-cartao__k { color: var(--blue); }

.ff-cartao ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ff-cartao li {
  position: relative;
  margin-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
}

.ff-cartao li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--blue);
}

.ff-cartao li b {
  font-weight: 500;
  color: var(--dark-01);
}

.ff-cartao__valor {
  margin: 16px 0 0;
  font-weight: 500;
  font-size: clamp(44px, 4.167vw, 60px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.ff-cartao__valor small {
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--light-64);
}

.ff-cartao__linhas {
  margin: 24px 0 0;
  border-top: 1px solid var(--light-16);
}

.ff-cartao__linhas > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--light-16);
  font-size: 16px;
  line-height: 1.4;
}

.ff-cartao__linhas dt { font-weight: 300; color: var(--light-64); }
.ff-cartao__linhas dd { margin: 0; font-weight: 500; }

/* ── O processo ──────────────────────────────────────────────────── */
.ff-processo { background: var(--light-01); }

.ff-trilha {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}

/* a linha tracejada que liga os números */
.ff-trilha::before {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  top: 28px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(24, 27, 31, 0.2) 0 8px, transparent 8px 16px);
}

.ff-etapa { position: relative; }

.ff-etapa__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border: 1px solid rgba(24, 27, 31, 0.12);
  border-radius: 12px;
  background: #fff;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 18px;
  color: var(--blue);
}

.ff-etapa--chave .ff-etapa__num {
  border-color: var(--dark-01);
  background: var(--dark-01);
  color: var(--light-01);
}

.ff-etapa--agora .ff-etapa__num {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--light-01);
}

.ff-etapa h3 {
  margin: 20px 0 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--dark-01);
}

.ff-etapa p:not(.ff-etapa__num) {
  max-width: 240px;
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
}

.ff-etapa__tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(102, 148, 255, 0.12);
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--blue);
}

.ff-etapa--chave .ff-etapa__tag {
  background: var(--dark-01);
  color: var(--light-01);
}

/* a faixa da prova, no degradê do cartaz */
.ff-prova {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 48px;
  padding: 40px;
  border-radius: var(--r-caixa);
  background: linear-gradient(120deg, var(--ff-preto), var(--ff-ameixa));
  color: var(--light-01);
}

.ff-prova h3 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(22px, 1.944vw, 28px);
  line-height: 1.2;
}

.ff-prova p {
  max-width: 560px;
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
}

/* ── A agenda ────────────────────────────────────────────────────── */
.ff-agenda { padding: 120px 0; }

.ff-datas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.ff-data {
  padding: 32px;
  border: 1px solid var(--light-16);
  border-radius: var(--r-caixa);
  background: rgba(255, 255, 255, 0.04);
}

.ff-data p { margin: 0; }

.ff-data__dia {
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ff-px-ambar);
}

.ff-data__num {
  margin-top: 12px !important;
  font-weight: 500;
  font-size: clamp(48px, 4.722vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.ff-data__onde {
  margin-top: 24px !important;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ff-data__local {
  margin-top: 4px !important;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--light-64);
}

.ff-horas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--light-16);
}

.ff-hora { padding: 24px 24px 0 0; }

.ff-hora__t {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ff-px-azul);
}

.ff-hora--chave .ff-hora__t { color: var(--ff-px-ambar); }

.ff-hora h3 {
  margin: 8px 0 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--light-01);
}

.ff-hora__nota {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--ff-px-ambar);
}

.ff-hora p:not(.ff-hora__t) {
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-64);
}

/* ── A doação ────────────────────────────────────────────────────── */
.ff-doacao { padding: 120px 0 0; }

.ff-doacao__faixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 40px 48px;
  border-radius: var(--r-caixa);
  background: var(--dark-01);
  color: var(--light-01);
}

.ff-doacao__faixa h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(28px, 2.778vw, 40px);
  line-height: 1.2;
}

.ff-doacao__faixa p {
  max-width: 480px;
  margin: 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--light-64);
}

/* ── A pré-inscrição ───────────────────────────────────────────────
   Sobre a faixa escura; os campos são os do `componentes.css`. */
.ff-inscricao {
  --erro-claro: #ff9a8d;
  --campo-fundo: rgba(255, 255, 255, 0.08);
  --campo-fundo-alto: rgba(255, 255, 255, 0.13);
  --campo-alt: 56px;
  margin-top: 120px;
  padding: 120px 0;
}

.ff-inscricao__grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 64px;
  align-items: start;
}

.ff-inscricao__lede {
  max-width: 480px;
  margin: 24px 0 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--light-64);
}

.ff-nota {
  margin: 32px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--ff-px-ambar);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
}

.ff-nota b { font-weight: 500; color: var(--light-01); }

.campo--cheio { grid-column: 1 / -1; }

.campo__opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--light-48);
}

/* o consentimento: uma caixa de marcar desenhada, com o texto ao lado */
.ff-consent { margin-top: 32px; }

.ff-consent__rot {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.ff-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ff-consent__caixa {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--campo-fundo);
  box-shadow: inset 0 0 0 1px var(--light-32);
  transition: background-color 0.24s var(--ease-out-soft), box-shadow 0.24s var(--ease-out-soft);
}

.ff-consent input:checked + .ff-consent__caixa {
  background: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5L8.5 14L15 7' stroke='%23181b1f' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

.ff-consent input:focus-visible + .ff-consent__caixa {
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.34);
}

.ff-consent__txt {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-64);
}

.ff-consent.is-erro .ff-consent__caixa { box-shadow: inset 0 0 0 1px var(--erro-claro); }

/* o botão sozinho na linha, na coluna da esquerda da grade do pé */
.ff-form__pe { grid-template-columns: minmax(0, 1fr); }

/* o "recebido": a mesma caixa, no degradê do cartaz */
.ff-recebido {
  padding: 40px;
  border-radius: var(--r-caixa);
  background: linear-gradient(180deg, var(--ff-preto), var(--ff-ameixa));
  color: var(--light-01);
}

.ff-recebido[hidden] { display: none; }
.ff-recebido .ff-code { color: var(--light-80); }

.ff-recebido h3 {
  margin: 24px 0 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
}

.ff-recebido > p {
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
}

.ff-recebido__final {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--light-16);
}

.ff-recebido__k {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ff-px-ambar);
}

.ff-recebido__quando {
  margin: 8px 0 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
}

.ff-recebido small {
  display: block;
  margin-top: 8px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-64);
}

/* ── O pé do programa ────────────────────────────────────────────── */
.ff-pe {
  padding: 40px 0;
  background: #fff;
}

.ff-pe__linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.ff-pe__linha p {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* ── Estreito ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ff-abre__grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ff-hero__cartaz { order: 2; padding-top: 0; }
  .ff-glifos { gap: 32px; margin-top: 32px; }
  .ff-hero__marca { height: 120px; margin-top: 64px; }
  .ff-inscricao__grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 900px) {
  .ff-sec { padding: 80px 0; }
  .ff-sec--colado { padding-top: 0; }
  .ff-hero { min-height: 88svh; padding: 120px 0 64px; }
  .ff-abre { padding-top: 80px; }
  .ff-manifesto { padding-top: 80px; }
  .ff-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); transform: translateY(40%); }
  .ff-numero { padding: 20px; }
  .ff-numero:nth-child(3) { border-left: 0; }
  .ff-numero:nth-child(n + 3) { border-top: 1px solid rgba(24, 27, 31, 0.12); }
  /* o quarto número é texto ("Poli · Unicamp · ITA") e não cabe em meia
     coluna a 375: ocupa a linha inteira */
  .ff-numero:nth-child(4) { grid-column: 1 / -1; border-left: 0; }
  .ff-numero__n { font-size: 32px; }
  .ff-como { padding-top: 160px; }
  .ff-pilares, .ff-cartoes, .ff-datas { grid-template-columns: minmax(0, 1fr); }
  .ff-trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ff-trilha::before { display: none; }
  .ff-prova { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .ff-prova .ff-code { display: none; }
  .ff-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-agenda, .ff-inscricao { padding: 80px 0; }
  .ff-doacao { padding-top: 80px; }
  .ff-doacao__faixa { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .ff-inscricao { margin-top: 80px; }
}

@media (max-width: 600px) {
  .ff-sec__titulo, .ff-manifesto__titulo { margin-top: 12px; }
  /* a 375, "DE ENGENHEIROS" a 40px encosta na borda (medido: terminava a
     372 de 375); a 36 cabe dentro da calha */
  /* a 375, "DE ENGENHEIROS" a 44px passava da borda (medido); a 36 cabe
     na calha, e os glifos apertam para caber os três */
  .ff-hero__titulo { font-size: 36px; line-height: 1; }
  .ff-glifos { gap: 16px; }
  .ff-hero__marca { height: 64px; margin-top: 48px; }
  .ff-hero__datas > div { grid-template-columns: 56px minmax(0, 1fr); font-size: 14px; }
  .ff-hero__datas dt { font-size: 14px; }
  .ff-hero__ctas { gap: 24px; }
  .ff-numeros { transform: translateY(32%); }
  .ff-como { padding-top: 120px; }
  .ff-trilha { grid-template-columns: minmax(0, 1fr); }
  .ff-etapa p:not(.ff-etapa__num) { max-width: none; }
  .ff-horas { grid-template-columns: minmax(0, 1fr); }
  .ff-hora { padding-right: 0; }
  .ff-data { padding: 24px; }
  .ff-cartao, .ff-recebido { padding: 24px; }
  .form__grade .campo { grid-column: 1 / -1; }
  .ff-pe__linha { flex-direction: column; align-items: flex-start; }
}