/* public/css/fm/route-home.css
 *
 * Home reconstruída (fatia 5, Projeto 1). React-pura sobre PageShell. Reúne:
 *  (1) hero (identidade preservada: tagline grande + subtítulo, slide-up em CSS);
 *  (2) serviços (4 cards + logo wall de parceiras);
 *  (3) pilha sticky (cases → cta-spaces → <CtaMatter />) — mecânica portada de site.css.
 * A CTA Matter usa public/css/fm/cta.css (componente <CtaMatter />, z-index:4).
 */

/* —— (1) hero: imagem + scrim, tagline grande, slide-up em CSS —— */
.fm-home-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fm-navy);
  background: #e3f0fc; /* azul-claro do hero legado (rgb 227,240,252) atrás do SVG */
  border-radius: var(--fm-radius-screen) var(--fm-radius-screen) 0 0;
  padding: var(--fm-space-16) var(--fm-space-6);
}
.fm-home-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fm-home-hero-inner { position: relative; z-index: 2; max-width: 60rem; display: flex; flex-direction: column; align-items: center; gap: var(--fm-space-4); }
.fm-home-hero-inner .fm-display { color: var(--fm-navy); }
/* subtítulo do hero = .text-size-medium.black: Nunito 1.25rem, navy */
.fm-home-hero-sub { margin: 0; max-width: 40rem; font-size: 1.25rem; line-height: 1.5; color: var(--fm-navy); }
@keyframes fm-home-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.fm-home-hero-inner > * { animation: fm-home-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fm-home-hero-inner > :nth-child(2) { animation-delay: 0.08s; }
.fm-home-hero-inner > :nth-child(3) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { .fm-home-hero-inner > * { animation: none; } }

/* —— (2) serviços: section branca que sobrepõe o hero —— */
.fm-home-services {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--fm-radius-screen));
  background: var(--fm-white);
  border-top-left-radius: var(--fm-radius-screen);
  border-top-right-radius: var(--fm-radius-screen);
  /* page-padding do skin = 4rem lateral (mais centrado/distribuído, não na borda) */
  padding: var(--fm-space-24) clamp(1.5rem, 4vw, 4rem) var(--fm-space-16);
}
/* = .container-large do skin: 1400px centrado (não a largura site 1600) */
.fm-home-services-inner { box-sizing: border-box; max-width: 87.5rem; margin: 0 auto; }
/* eyebrow = .text-meta do skin: Nunito Sans 1.5rem/800, uppercase, cor NAVY (não teal) */
.fm-home-services-eyebrow {
  font-family: var(--fm-font-body); text-transform: uppercase; letter-spacing: 1px;
  font-weight: 800; font-size: 1.5rem; line-height: 1.5; color: var(--fm-navy); text-align: center; margin: 0 0 var(--fm-space-24);
}
/* lista de serviços = original (.home-services-item): título(esq.) | descrição+logos(dir.),
   grid 1fr 1.25fr + gap 4rem, fio entre as linhas */
.fm-home-services-list { display: flex; flex-direction: column; }
.fm-home-services-cta { margin-top: var(--fm-space-8); }
.fm-home-service-row {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--fm-space-16);
  align-items: start; padding: var(--fm-space-16) 0;
  border-top: 1px solid rgba(1, 18, 34, 0.12);
}
.fm-home-service-row:first-child { border-top: none; }
/* título de serviço = .heading-3.program-title do skin: Nunito Sans 700, 2rem (NÃO Oswald) */
.fm-home-service-title { margin: 0; font-family: var(--fm-font-body); font-weight: 700; font-size: 2rem; line-height: 1.2; color: var(--fm-navy); }
@media (max-width: 767px) { .fm-home-service-title { font-size: 1.4rem; } }
.fm-home-service-body { display: flex; flex-direction: column; gap: var(--fm-space-8); }
/* descrição = .text-size-medium.high-gray.max-width-medium: Nunito 1.25rem, #3c444c, max 35rem */
.fm-home-service-desc { margin: 0; max-width: 35rem; font-size: 1.25rem; color: var(--fm-gray-700); line-height: 1.5; }
.fm-home-service-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-8); }
.fm-home-service-logos img { height: 34px; width: auto; opacity: 0.85; }
@media (max-width: 767px) {
  .fm-home-service-row { grid-template-columns: 1fr; gap: var(--fm-space-4); }
}

/* —— CTA Matter — regras em public/css/fm/cta.css (componente <CtaMatter />) —— */

/* section alugue (cta-spaces) = IGUAL ao original: imagem + scrim escuro, conteúdo
   alinhado à ESQUERDA (coluna esquerda) e centrado na vertical, título CAIXA-ALTA,
   texto branco, botão "texto + seta" (fm-button text+withArrow) branco. */
.fm-home-spaces { display: flex; align-items: center; }
.fm-home-spaces .fm-case-overlay { background: linear-gradient(120deg, rgba(1,18,34,.82) 0%, rgba(1,18,34,.55) 55%, rgba(1,18,34,.35) 100%); }
.fm-home-spaces .fm-case-content,
.fm-home-spaces .fm-case-content h2,
.fm-home-spaces .fm-case-content p { color: var(--fm-white); }
.fm-home-spaces .fm-case-content {
  position: relative; z-index: 2; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--fm-space-6); text-align: left;
  width: 100%; max-width: var(--fm-max-width); margin: 0 auto; height: auto;
  padding: var(--fm-space-16) var(--fm-space-12);
}
.fm-home-spaces .fm-case-content > * { max-width: 42rem; } /* coluna esquerda (≈ metade) */
/* título = .heading-large-2.text-uppercase: Oswald 500, uppercase (8rem skin; capado a 5rem
   p/ caber na coluna esquerda — = o valor ≤991 do skin). desc = .text-size-xlarge: 1.2rem. */
.fm-home-spaces .fm-case-content h2 { text-transform: uppercase; font-family: var(--fm-font-display); font-weight: 500; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.04; margin: 0; }
.fm-home-spaces .fm-case-content p { font-size: 1.2rem; line-height: 1.5; margin: 0; }
/* botão texto+seta branco sobre a foto */
.fm-home-spaces .fm-button--text { color: var(--fm-white); }
.fm-home-spaces .fm-button--text .fm-button-circle { border-color: rgba(255,255,255,.6); color: var(--fm-white); }

/* —— (3) pilha sticky: cases (.fm-case, vem de route-projetos.css) → cta-spaces
   (.fm-home-spaces) → <CtaMatter /> (.fm-cta, z-index:4 em cta.css). Mecânica = a da home
   legada (site.css main:has(.cta-spaces)): cada case sticky top:0 height:100vh; "pista" de
   100vh no fim da lista; a section seguinte sobe -100vh e rola por cima; radius superior pelo
   token --fm-radius-screen (no lugar do 6rem literal do skin). —— */
.fm-home-stack { position: relative; }
.fm-home-cases { position: relative; z-index: 2; }
.fm-home-cases::after { content: ""; display: block; height: 100vh; } /* pista do último case */
.fm-home-spaces {
  position: sticky; top: 0; margin-top: -100vh; z-index: 3;
  min-height: 100vh; overflow: hidden;
  border-top-left-radius: var(--fm-radius-screen);
  border-top-right-radius: var(--fm-radius-screen);
}