/* Letfit na home (index.html) — carregado depois de home/home.css. Só o que é
   novo: o bloco do Letfit abaixo da grade de jogos e a cor dele no resto da
   página (continuar jogando, detalhes). As prévias imitam o tabuleiro do
   Letfit (letfit/public/css/letfit.css): fundo creme, espaço em tom de
   "buraco", peça colorida entrando no espaço. */

body.home{
  --letfit:      #BE185D;
  --letfit-tint: #FCE7F3;
  /* tabuleiro do Letfit (theme-infantil + letfit.css, modo dia) */
  --fit-board:  #FFF1D6;
  --fit-slot:   #E1D3C0;
  --fit-tinta:  #9F8B74;
  --fit-c0: #4F8FCE;
  --fit-c1: #E8834A;
  --fit-c2: #3BAA83;
  --fit-c4: #8E6CC9;
  --fit-glyph: #fff;
}
html.night body.home{
  --letfit:      #F472B6;
  --letfit-tint: #3A1528;
  --fit-board:  #241831;
  --fit-slot:   #43374A;
  --fit-tinta:  #7C6F83;
  --fit-c0: #6AA8E6;
  --fit-c1: #F29A62;
  --fit-c2: #52C29A;
  --fit-c4: #A88AE0;
  --fit-glyph: #2B1E3D;
}

.resume.letfit{ --g: var(--letfit); --g-tint: var(--letfit-tint); }
.icon-box.letfit{ background: var(--letfit-tint); color: var(--letfit); }

/* ---------- separador entre a grade e o Letfit ---------- */
.fit-sep{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
.fit-sep::before,
.fit-sep::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
.fit-sep + .fit{ margin-top: 32px; }
/* mesmo respiro que fica embaixo das vantagens (padding-bottom de section.play) */
.fit + .play-foot{ margin-top: 44px; }
.play-foot[hidden]{ display: none; }

/* index.html: o Letfit numa section.play própria, irmã de #top. Ela entra
   com fundo .alt e a alternância inverte daí pra baixo (#detalhes e #contato
   sem .alt, #turmas com .alt); os cartões invertem junto pra manter o
   contraste com o fundo da section. */
section.play-fit{ padding-top: 44px; }
.play-fit .fit{ margin-top: 0; }
section.alt .fit{
  background:
    radial-gradient(120% 90% at 0% 0%, var(--letfit-tint) 0%, transparent 62%),
    var(--bg);
}
section:not(.alt) .detail{ background: var(--bg-alt); }
section:not(.alt) .detail .tags span{ background: var(--bg); }
/* a última section sem .alt precisa da linha que separa do rodapé */
main > section:not(.alt):last-child{ border-bottom: 1px solid var(--border); }

/* ---------- bloco do Letfit ---------- */
.fit{
  margin-top: 22px;
  padding: 26px 26px 22px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--letfit);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--letfit-tint) 0%, transparent 62%),
    var(--bg-alt);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 22px 30px;
  scroll-margin-top: 16px;
}

.fit-intro{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.fit-badges{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fit-badge{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--letfit);
  padding: 3px 9px;
  border-radius: 999px;
}
html.night .fit-badge{ color: #0B0F17; }
.fit-intro .game-cat{ color: var(--letfit); }
.fit h2{
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -.015em;
  margin: 8px 0 6px;
  line-height: 1.1;
}
.fit-lead{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14.5px;
}

.fit-for{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.fit-for li{
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.fit-for strong{ display: block; color: var(--ink); font-size: 14px; }
.fit-for-icon{
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--letfit-tint);
  color: var(--letfit);
}

.fit-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.fit-play{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* só "Jogar" deixaria o botão curto demais ao lado do texto do bloco */
  min-width: 168px;
  gap: 7px;
  background: var(--letfit);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 9px;
  text-decoration: none;
  transition: filter .15s ease;
}
.fit-play:hover{ filter: brightness(1.08); }
.fit-play:focus-visible{ outline: 3px solid var(--letfit); outline-offset: 2px; }
html.night .fit-play{ color: #0B0F17; }
.fit-link{
  font-size: 14px;
  font-weight: 600;
  color: var(--letfit);
  text-decoration: none;
}
.fit-link:hover{ text-decoration: underline; }

/* ---------- as 4 modalidades ---------- */
.fit-modes-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.fit-modes-head h3{
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fit-modes-head span{ font-size: 12.5px; color: var(--muted-2); }
.fit-modes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fit-mode{
  --m: var(--fit-c0);
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.fit-mode:hover{
  box-shadow: var(--shadow-hover);
  border-color: var(--letfit);
  transform: translateY(-2px);
}
.fit-mode:focus-visible{ outline: 3px solid var(--letfit); outline-offset: 2px; }
.fit-mode.m-formas{      --m: var(--fit-c1); }
.fit-mode.m-letras{      --m: var(--fit-c0); }
.fit-mode.m-transportes{ --m: var(--fit-c2); }
.fit-mode.m-numeros{     --m: var(--fit-c4); }
.fm-body{ padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.fm-body strong{ font-size: 15px; line-height: 1.25; }
.fm-body span{ font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; flex: 1; }
.fm-go{
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--letfit);
  flex: none !important;
}

/* Prévia: 16:10. Tamanhos em % da largura/altura da prévia; o espaço fica
   em cima, a peça sai de baixo (bandeja) e encaixa, em loop. A peça fica
   DENTRO do espaço e a animação desloca a partir de lá, então o ponto de
   chegada é sempre exato, em qualquer largura. */
.fm-pv{
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fit-board);
  overflow: hidden;
  user-select: none;
}
.fm-pv::after{
  /* linha que separa espaços (em cima) da bandeja (embaixo), como no jogo */
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 51%;
  border-top: 2px dashed var(--fit-slot);
}
.fm-pv svg{ display: block; width: 100%; height: 100%; }

.fm-slot{
  position: absolute;
  top: 6%;
  height: 40%;
  aspect-ratio: 1;
  left: 50%;
  transform: translateX(-50%);
  color: var(--fit-slot);
}
.fm-piece{
  position: absolute;
  inset: 0;
  color: var(--m);
  animation: fm-fit 4.2s cubic-bezier(.45,.05,.3,1) infinite;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
}
/* Formas: a peça chega girada — nos níveis altos a criança gira pela alça */
.m-formas .fm-piece{ --rot: -90deg; }

@keyframes fm-fit{
  0%   { transform: translate(70%, 125%) rotate(var(--rot, 0deg)) scale(1); opacity: 0; }
  8%   { transform: translate(70%, 125%) rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
  22%  { transform: translate(70%, 125%) rotate(var(--rot, 0deg)) scale(1); }
  52%  { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); }
  62%  { transform: translate(0, 0) rotate(0deg) scale(1); }
  67%  { transform: translate(0, 0) rotate(0deg) scale(1.08); }
  72%  { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  92%  { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
}

/* Cartões (transportes, números): o espaço é um cartão com o desenho; a
   peça é um cartão colorido com a letra/número que, encaixado, vira uma
   etiqueta embaixo do desenho (igual ao jogo). */
.fm-card{
  position: absolute;
  top: 5%;
  height: 42%;
  aspect-ratio: 1;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fit-slot);
  border-radius: 14%;
}
.fm-card > svg{
  position: absolute;
  left: 15%; top: 8%;
  width: 70%; height: 70%;
  color: var(--fit-tinta);
}
.fm-card .fm-piece{
  border-radius: 14%;
  background: var(--m);
  color: var(--fit-glyph);
  padding: 16%;
  animation-name: fm-card;
}
@keyframes fm-card{
  0%   { transform: translate(70%, 122%) scale(1); opacity: 0; }
  8%   { transform: translate(70%, 122%) scale(1); opacity: 1; }
  22%  { transform: translate(70%, 122%) scale(1); }
  52%  { transform: translate(0, 0) scale(1); }
  64%  { transform: translate(0, 44%) scale(.34); }
  69%  { transform: translate(0, 44%) scale(.4); }
  74%  { transform: translate(0, 44%) scale(.34); opacity: 1; }
  92%  { transform: translate(0, 44%) scale(.34); opacity: 1; }
  100% { transform: translate(0, 44%) scale(.34); opacity: 0; }
}

/* cada modalidade em um tempo, pra não mexerem todas juntas */
.fit-modes li:nth-child(2) .fm-piece{ animation-delay: .5s; }
.fit-modes li:nth-child(3) .fm-piece{ animation-delay: 1s; }
.fit-modes li:nth-child(4) .fm-piece{ animation-delay: 1.5s; }

/* ---------- faixa de acompanhamento ---------- */
.fit-pro{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 16px;
}
.fit-pro div{ font-size: 13px; color: var(--muted); line-height: 1.45; }
.fit-pro strong{ display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce){
  .fm-piece{ animation: none; }
  .fm-card .fm-piece{ transform: translate(0, 44%) scale(.34); }
  .fit-mode, .fit-mode:hover{ transform: none; }
}

/* ---------- responsivo ---------- */
@media (max-width: 960px){
  .fit{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 660px){
  .fit{ padding: 18px 14px 16px; margin-top: 14px; border-radius: 12px; gap: 18px; }
  .fit-sep{ margin-top: 24px; gap: 10px; }
  .fit-sep + .fit{ margin-top: 24px; }
  .fit + .play-foot{ margin-top: 32px; }
  section.play-fit{ padding-top: 32px; }
  .fit h2{ font-size: 24px; }
  .fit-lead{ font-size: 14px; }
  .fit-play{ width: 100%; justify-content: center; }
  .fit-actions{ flex-direction: column; align-items: stretch; text-align: center; }
  .fit-modes{ gap: 10px; }
  .fm-body{ padding: 8px 10px 10px; }
  .fm-body strong{ font-size: 14px; }
  .fm-body span{ font-size: 12px; }
  .fit-pro{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
}