/* A faixa "Mais que treinos, experiencias que movem voce", na home.

   Referencia "secao-do-in-move-pagina-bianca" de Lucas, 2026-09-22. A foto da
   cidade ao por do sol (`comunidade-fundo.webp`) e fundo de CSS, com o veu
   medido pixel a pixel contra o pior ponto de cada texto em 360/768/1440/1920.
   O filme do kettlebell que vivia aqui saiu a pedido dele; a secao e HTML e
   CSS, sem script.

   As cores sao as do sistema: terracota da marca no acento do titulo, no
   botao e na manuscrita; areia no resto. Escopo `.fx-cinema`. */
.fx-cinema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: calc(-1 * var(--espaco-6));
  scroll-margin-top: 94px;
  min-height: 34rem;
  display: flex;
  align-items: center;
  color: var(--cor-texto);
  background: var(--cor-fundo) url("../img/home/comunidade-fundo.889467c36a1d.webp") 64% 40% / cover no-repeat;
}
.fx-cinema-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--cor-fundo) 92%, transparent) 0%,
      color-mix(in srgb, var(--cor-fundo) 84%, transparent) 40%,
      color-mix(in srgb, var(--cor-fundo) 50%, transparent) 62%,
      color-mix(in srgb, var(--cor-fundo) 22%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--cor-fundo) 45%, transparent) 0%,
      transparent 20%,
      transparent 70%,
      color-mix(in srgb, var(--cor-fundo) 75%, transparent) 100%);
}
.fx-cinema-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espaco-8);
  width: 100%;
  max-width: 76rem;
  padding: clamp(var(--espaco-10), 5vw, var(--espaco-16)) clamp(24px, 3.5vw, 44px);
  margin-inline: auto;
}
.fx-cinema-copy { max-width: 36rem; }
/* "Movimento em comunidade" e a sobrancelha do site desde 24/09, a pedido de
   Lucas: ambar, com o traco antes, como "Projeto que eu organizo" no In Move.
   A cor e o espacamento vem de `.sobrancelha`; aqui nao se sobrepoe nada. */
.fx-cinema h2 {
  margin: 0 0 var(--espaco-5);
  color: var(--cor-texto);
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  font-weight: var(--peso-display);
  font-stretch: var(--largura-titulo);
  line-height: 1;
  letter-spacing: -.035em;
}
.fx-cinema-accent { color: var(--marca); }
.fx-cinema-copy > p:not(.fx-eyebrow) { margin: 0 0 var(--espaco-6); max-width: 32rem; font-size: var(--fs-18); line-height: 1.5; }
.fx-cinema-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-4) var(--espaco-6); }
.fx-cinema .fx-button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--espaco-6);
  min-height: 3.25rem; padding: 0 var(--espaco-6);
  border: 1px solid transparent; border-radius: var(--raio-md);
  font: inherit; font-size: var(--fs-14); font-weight: var(--peso-forte); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; text-decoration: none;
  color: var(--cor-sobre-marca); background: var(--marca);
  transition: background-color .2s;
}
.fx-cinema .fx-button:hover { color: var(--cor-sobre-marca); background: var(--marca-hover); text-decoration: none; }
.fx-cinema :focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 5px; }
/* A frase sobre o ceu. Desde a call com a Bianca de 2026-09-22 ela sai reta,
   e nao mais manuscrita; as palavras de baixo e os tres icones da coluna de
   texto sairam. */
.fx-cinema-side { display: grid; justify-items: end; gap: var(--espaco-5); }
/* Em 24/09 Lucas pediu a letra do design system e o fundo transparente: sai o
   vidro escuro, entra a letra dos titulos (Archivo larga, peso 900), e so o
   texto, sem sombra nem veu - decisao dele depois de ver os numeros. Sobre o
   ceu claro do canto, a frase fica abaixo de 3:1 em quase toda tela de
   computador; e excecao registrada a WCAG 1.4.3 na decisao 66. */
.fx-cinema-script {
  margin: 0;
  padding: var(--espaco-3) var(--espaco-5);
  color: var(--cor-texto);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: var(--peso-display);
  font-stretch: var(--largura-titulo);
  letter-spacing: -.035em;
  line-height: 1.1;
  text-align: center;
}
/* O lugar da frase, escolhido por Lucas arrastando-a numa bancada temporaria
   (24/09, tela de 1080x1065): o canto de cima a direita do cinema, 2 px das
   bordas. Vale enquanto o cinema tem duas colunas; em tela larga ele e um
   cartao no container, e a frase acompanha o canto do cartao. Ate 64rem ela
   desce para baixo do texto, como antes. */
@media (width > 64rem) {
  .fx-cinema-side { position: absolute; top: 2px; right: 2px; }
}
@media (max-width: 64rem) {
  .fx-cinema { background-position: 68% 40%; }
  .fx-cinema-shade {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--cor-fundo) 86%, transparent) 0%,
        color-mix(in srgb, var(--cor-fundo) 80%, transparent) 60%,
        color-mix(in srgb, var(--cor-fundo) 92%, transparent) 100%);
  }
  .fx-cinema-inner { grid-template-columns: minmax(0, 1fr); }
  .fx-cinema-side { justify-items: start; }
  .fx-cinema-script { text-align: left; }
}
@media (max-width: 650px) {
  .fx-cinema { min-height: 0; scroll-margin-top: 16px; }
  .fx-cinema h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .fx-cinema .fx-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-cinema .fx-button { transition: none; }
}
@media (forced-colors: active) {
  .fx-cinema { background-image: none; background-color: Canvas; }
  .fx-cinema-shade { display: none; }
  .fx-cinema h2, .fx-cinema .sobrancelha, .fx-cinema-copy > p:not(.fx-eyebrow), .fx-cinema-accent, .fx-cinema-script { color: CanvasText; }
  .fx-cinema-script { background: Canvas; border: 1px solid CanvasText; }
  .fx-cinema .fx-button, .fx-cinema .fx-button:hover { color: LinkText; background: Canvas; border-color: LinkText; }
  .fx-cinema :focus-visible { outline-color: Highlight; }
}
@media print {
  .fx-cinema { background-image: none; min-height: 0; }
  .fx-cinema-shade { display: none; }
}