/* Encaixe e ritmo de rolagem aprovados no 8002, com a composicao do principal. */
html[data-section-pages] {
  scroll-snap-type: y mandatory;
  scroll-padding-block-start: var(--section-header, 80px);
}
html[data-section-pages][data-section-scrolling] {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* O encaixe obrigatório do WebKit pode saltar o fim de painéis maiores que a
   tela. No toque, a proximidade conserva a chegada à seção e deixa ler o meio. */
@media (pointer: coarse) {
  html[data-section-pages] { scroll-snap-type: y proximity; }
  html[data-section-pages][data-section-scrolling] { scroll-snap-type: none; }
}
/* overflow:hidden criava outro scroller e devolvia a pagina para Servicos. */
.fx-section-pages .fx-event-flow { overflow: clip; }
.pagina-home.fx-section-pages .fx-screen {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--section-height, calc(100svh - 80px));
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin: 0;
}
.fx-section-pages .fx-screen__content,
.fx-section-pages .home-stack__surface { flex: none; width: 100%; }
.fx-section-pages .home-stack__surface { transform: none; will-change: auto; }
.fx-section-pages .home-stack__surface::after { display: none; }
.pagina-home.fx-section-pages .fx-screen .secao {
  padding-block: clamp(32px, 5svh, 64px);
  margin-block: 0;
}
.fx-section-pages .fx-screen > .fx-screen__content { margin-block: 0; }
.pagina-home.fx-section-pages .fx-screen--opening {
  min-height: var(--section-opening-height);
  scroll-margin-block-start: var(--section-opening-offset, 0px);
}
.fx-section-pages .fx-screen--ending { background: var(--cor-fundo); }
/* A home termina no quadro terracota (Lucas, 24/09). O quadro era centralizado
   no ultimo painel, e sobrava faixa escura embaixo dele, no fim da pagina (38 px
   na tela dele). Agora ele ocupa o painel abaixo do respiro de cima, e a sobra
   vai para a foto: a grade da foto cresce, a foto estica com ela e o texto
   continua centralizado ao lado. Sobra vazia em volta do conteudo, dentro do
   quadro, tambem nao ficou bem (Lucas, mesmo dia). Quando o conteudo e mais alto
   que a tela, nada muda: o quadro ja era o fim da pagina. */
.pagina-home.fx-section-pages .fx-screen--ending > .fx-rhythm {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-top: clamp(var(--espaco-4), 3.6svh, var(--espaco-10));
}
.pagina-home.fx-section-pages .fx-screen--ending > .fx-rhythm > .fx-wrap {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.pagina-home.fx-section-pages .fx-screen--ending .fx-rhythm-closing { flex: 1 0 auto; }
.fx-section-pages .fx-screen .home-stack__chequer { z-index: 4; }
/* O filme sozinho ocupa a tela inteira. Dentro do cartao do evento ele divide a
   tela com a agenda, e forcar a altura da janela aqui era o que empurrava
   "Proximo evento" para um painel proprio. */
.fx-section-pages .fx-screen:not(.fx-event-flow) > .fx-cinema { min-height: var(--section-height); }
.fx-section-pages .fx-screen > .secao { border-bottom: 1px solid var(--home-divider-color); }
/* O cartao do evento sangra para fora do container por margem negativa. O
   `width: 100%` do painel o mede contra o container e devolve 48px a menos, so
   do lado direito - a borda arredondada deixa de acompanhar as outras secoes. */
.pagina-home.fx-section-pages .fx-screen.fx-event-flow { width: auto; }
/* O rodape do ritmo sangra pela mesma margem negativa, e pagava o mesmo preco:
   a moldura terracota nascia 24px a esquerda do lugar e sobrava o dobro do lado
   direito. Ela e filha do painel, e nao o proprio painel - dai o seletor
   diferente para a mesma correcao. */
.pagina-home.fx-section-pages .fx-screen > .fx-rhythm { width: auto; }
/* As perguntas frequentes pagavam o mesmo preco: o fundo da secao acabava
   48 px antes da borda direita (24/09). */
.pagina-home.fx-section-pages .fx-screen > .fx-faq { width: auto; }
/* A faixa da comunidade sem evento em destaque tambem: sem o cartao do evento em
   volta, ela vira painel proprio e media 342 px numa tela de 390, com os 48 px
   de fundo escuro so a direita (celular do Lucas, 28/09, Circuito inativo). */
.pagina-home.fx-section-pages .fx-screen > .fx-cinema { width: auto; }

@media (min-width: 70rem) {
  .fx-section-pages .fx-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A abertura inteira cabe na primeira tela (Lucas, 24/09): heroi, agenda do
   proximo encontro, "Conheca meu trabalho" e a faixa laranja no fim, que e a
   borda de `.home-explore`. O painel ja mede a tela menos o cabecalho; aqui a
   superficie ocupa o painel e o heroi fica com o que sobra.

   Antes o heroi tinha altura minima propria (ate `38.88vw`), e a faixa laranja
   caia 110 px abaixo da dobra na tela do Lucas e 217 px em 1920x937. */
.pagina-home.fx-section-pages .fx-screen--opening > .home-stack__surface {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.pagina-home.fx-section-pages .fx-screen--opening .hero { flex: 1 0 auto; }

/* Quando o conteudo nao cabe, os respiros encolhem com a altura da tela, e nao
   com a largura: `--tela-aperto` vai de 0 (painel de 960 px ou mais) a 100px
   (860 px ou menos), e cada respiro perde a sua fracao disso. Na home o
   cabecalho e fixo, entao `--section-height` e a altura da abertura sao a mesma
   medida, e a "Minha trajetoria", logo abaixo, usa a mesma escala. Com todos no
   minimo, a abertura cabe a partir de ~910 px de altura de janela (1920x911,
   Full HD com barra de favoritos; medido em 24/09). Abaixo disso nao cabe sem
   cortar texto: o heroi continua inteiro na primeira tela, e a agenda vem na
   rolagem. No celular a abertura e mais alta que a tela de qualquer jeito, e
   fica como estava. */
@media (width > 650px) {
  .pagina-home.fx-section-pages {
    --tela-aperto: clamp(0px, 960px - var(--section-height), 100px);
  }
  .pagina-home.fx-section-pages .fx-screen--opening .hero__interno {
    padding-top: calc(var(--espaco-12) - var(--tela-aperto) * .32);
    padding-bottom: calc(var(--espaco-8) - var(--tela-aperto) * .2);
  }
  .pagina-home.fx-section-pages .fx-screen--opening .hero__titulo {
    margin-bottom: calc(var(--espaco-6) - var(--tela-aperto) * .08);
  }
  .pagina-home.fx-section-pages .fx-screen--opening .hero__apoio {
    margin-bottom: calc(var(--espaco-10) - var(--tela-aperto) * .16);
  }
  .pagina-home.fx-section-pages .fx-screen--opening .home-explore {
    padding-bottom: calc(var(--espaco-6) - var(--tela-aperto) * .16);
  }
}
@media (width > 1000px) {
  .pagina-home.fx-section-pages .fx-screen--opening .hero__interno {
    padding-top: calc(var(--espaco-16) - var(--tela-aperto) * .48);
  }
}
@media (min-width: 70rem) {
  .pagina-home.fx-section-pages .fx-screen--opening .hero__interno {
    padding-block: calc(var(--espaco-10) - var(--tela-aperto) * .24) calc(var(--espaco-6) - var(--tela-aperto) * .12);
  }
}
/* A agenda usa os mesmos respiros de `proximo-encontro.css` enquanto sobra
   altura; abaixo de 768 px ela tem os seus, e a abertura ja nao cabe. */
@media (min-width: 768px) {
  .pagina-home.fx-section-pages .fx-screen--opening .fx-next-meeting {
    padding-top: max(18px, clamp(30px, 3vw, 42px) - var(--tela-aperto) * .24);
    padding-bottom: max(34px, clamp(54px, 4.2vw, 64px) - var(--tela-aperto) * .3);
  }
}
/* "Minha trajetoria" tambem cabe numa tela (Lucas, 24/09). Ela nao tinha altura
   fixa: era alta de conteudo, 1270 px para 985 na tela dele e 1130 para 860 em
   1920x937. O que devolve a altura sem tirar nada:
   - o ano vai ao lado do marco, e nao em cima dele. A cronologia continua um
     `<ol>` com `<time>` antes do `<h3>`, na mesma ordem de leitura;
   - o Instagram vai ao lado do nome, na assinatura;
   - a foto acompanha a coluna de texto. Com a `<img>` no fluxo, a altura dela
     (1,5x a largura da coluna) mandava na linha da grade em tela larga, e
     sobrava um vao antes da assinatura;
   - os respiros ficam mais curtos, e os da borda e da cronologia encolhem com
     `--tela-aperto`, como os da abertura.
   Abaixo de 60rem a foto desce para baixo do texto e a secao passa de uma tela
   de qualquer jeito; fica como estava. */
@media (min-width: 60rem) {
  .pagina-home.fx-section-pages .fx-screen .trajetoria {
    padding-block: max(var(--espaco-3), clamp(var(--espaco-5), 2svh, var(--espaco-12)) - var(--tela-aperto) * .1);
  }
  .fx-section-pages .trajetoria > .sobrancelha { margin-bottom: var(--espaco-3); }
  .fx-section-pages .trajetoria > .secao__titulo { margin-bottom: var(--espaco-5); }
  .fx-section-pages .trajetoria__bio { margin-bottom: var(--espaco-5); line-height: 1.65; }
  .fx-section-pages .trajetoria__bio p { margin-bottom: var(--espaco-3); }
  .fx-section-pages .trajetoria__linha {
    gap: calc(var(--espaco-3) - var(--tela-aperto) * .04);
    margin-bottom: var(--espaco-5);
  }
  .fx-section-pages .trajetoria__marco {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: var(--espaco-3);
    align-items: baseline;
  }
  /* O ponto acompanha a primeira linha do titulo (28 px), que agora abre o marco. */
  .fx-section-pages .trajetoria__marco::before { top: 10px; }
  .fx-section-pages .trajetoria__ano { margin: 0; }
  .fx-section-pages .trajetoria__marco .cartao__meta { grid-column: 2; margin-top: 2px; }
  .fx-section-pages .trajetoria__bloco { padding: var(--espaco-4); }
  .fx-section-pages .trajetoria__bloco .lista-barrada { gap: 10px; margin-top: var(--espaco-3); }
  .fx-section-pages .trajetoria__assinatura { padding-top: var(--espaco-4); }
  .fx-section-pages .trajetoria__identidade { display: flex; align-items: center; gap: var(--espaco-3); }
  .fx-section-pages .trajetoria__instagram { margin: 0; }
  .fx-section-pages .trajetoria__retrato { position: absolute; inset: 0; }
}
/* "Como eu trabalho" tambem cabe numa tela alta (Lucas, 24/09). Na tela dele ela
   passava 39 px, e secao mais alta que a tela sai sem a transicao das outras:
   `secoes-centralizadas.js` devolve o gesto a rolagem nativa para deixar ler o
   fim, e o encaixe do navegador pula seco para "Servicos". Em 1920x937 eram
   147 px, a maior parte da orbita, que tinha 28rem fixos.
   - a orbita respeita a altura da tela (`--section-height - 440px`, o que as
     outras pecas da coluna ocupam); em janela baixa, preserva os 28rem dos
     nos e deixa o restante da secao para a rolagem nativa;
   - os respiros da borda e das etapas encolhem com `--tela-aperto`;
   - o fio de cima sai: aqui cada secao e uma tela, e a trajetoria ja fecha com
     o fio dela. Com a secao cabendo, ele aparecia 13 px abaixo do cabecalho.
   Abaixo de 56rem a orbita desce para baixo do texto e a secao passa de uma
   tela de qualquer jeito; fica como estava. */
@media (width > 56rem) {
  .pagina-home.fx-section-pages .fx-screen .como-trabalho {
    padding-block: max(var(--espaco-3), clamp(var(--espaco-5), 2svh, var(--espaco-12)) - var(--tela-aperto) * .1);
    border-top: 0;
  }
  .fx-section-pages .como-trabalho .orbita {
    width: min(100%, 28rem, var(--section-height) - 440px);
    margin: var(--espaco-6) auto 0;
  }
  .fx-section-pages .como-trabalho__etapa:not(:first-child) {
    padding-top: calc(var(--espaco-6) - var(--tela-aperto) * .08);
  }
  .fx-section-pages .como-trabalho__etapa:not(:last-child) {
    padding-bottom: calc(var(--espaco-6) - var(--tela-aperto) * .08);
  }
}
@media (width > 56rem) and (max-height: 52rem) {
  .fx-section-pages .como-trabalho .orbita { width: min(100%, 28rem); }
}
@media (width > 56rem) and (width <= 64rem) and (max-height: 52rem) {
  .fx-section-pages .como-trabalho { grid-template-columns: minmax(0, 1fr); }
}
/* "Em movimento" e os depoimentos tambem cabem numa tela (Lucas, 24/09): na
   tela dele passavam 5 e 71 px, e as duas saiam sem transicao, pelo mesmo
   motivo de "Como eu trabalho".
   - o cinema perde a altura minima fixa (34rem) e fica com o que o cartao do
     evento deixa no painel, como o heroi na abertura; os respiros dele e do
     cartao encolhem com `--tela-aperto`;
   - nos depoimentos, o respiro da borda encolhe com a altura, e os cartoes
     ficam mais justos. Esses valores sao fixos, e nao pela altura, de
     proposito: `depoimentos.js` reserva a altura da combinacao mais longa ao
     carregar e ao mudar a LARGURA, e uma medida que dependesse da altura
     ficaria velha ao redimensionar so a altura.
   Em Full HD os depoimentos ainda passam: com o texto inteiro dos tres mais
   longos, so caberiam cortando o texto em trechos. */
.pagina-home.fx-section-pages .fx-event-flow > .fx-cinema { min-height: 0; flex: 1 0 auto; }
@media (width > 64rem) {
  .pagina-home.fx-section-pages .fx-event-flow .fx-cinema-inner {
    padding-block: max(var(--espaco-4), clamp(var(--espaco-10), 5vw, var(--espaco-16)) - var(--tela-aperto) * .48);
  }
  .pagina-home.fx-section-pages .fx-event-flow .fx-next-event {
    padding-top: calc(var(--espaco-6) - var(--tela-aperto) * .12);
    padding-bottom: calc(var(--espaco-10) - var(--tela-aperto) * .24);
  }
  .pagina-home.fx-section-pages .fx-event-flow .fx-event-card {
    padding-top: calc(var(--espaco-8) - var(--tela-aperto) * .08);
    padding-bottom: calc(var(--espaco-6) - var(--tela-aperto) * .04);
  }
}
.pagina-home.fx-section-pages .fx-screen .fx-testimonials {
  padding-block: max(var(--espaco-3), clamp(var(--espaco-5), 2svh, var(--espaco-12)) - var(--tela-aperto) * .1);
}
@media (min-width: 761px) {
  .fx-section-pages .fx-testimonials__heading { margin-bottom: 20px; }
  .fx-section-pages .fx-testimonials .story { padding: 20px 26px; }
  .fx-section-pages .fx-testimonials.is-stories-ready .story.is-featured { padding: 28px 32px; }
  .fx-section-pages .fx-testimonials .story-quote { margin: 10px 0 18px; }
  .fx-section-pages .fx-testimonials.is-stories-ready .story.is-featured .story-quote { padding: 16px 0 24px; }
  .fx-section-pages .fx-testimonials .story-footer { padding-top: 14px; }
}
html[data-section-pages][data-effects="off"] { scroll-snap-type: none; scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  html[data-section-pages] { scroll-snap-type: none; scroll-behavior: auto; }
}
@media print {
  html[data-section-pages] { scroll-snap-type: none; }
  .pagina-home.fx-section-pages .fx-screen { display: block; min-height: 0; }
}