/* =============================================================================
   secoes-b.css — reetfps.com v2 (Agente C)
   Seções: #ferramentas, #recursos, #downloads.

   Linguagem = página Início do app (inicio2.css): painel por categoria com cor
   própria (--c), cabeçalho "mini-hero" com fio de 2 px na cor do grupo, quadrado
   de ícone vivo e linhas com título + descrição na mesma grade (coluna do ícone
   36 px, intervalo 12 px). Tudo é derivado de --c com color-mix; trocar a cor de
   um painel = trocar a classe .rs-c-*.

   Peça de assinatura: o medidor de níveis do Desbloqueador de FPS (#recursos),
   seis barras que sobem até MAX quando o painel entra na tela.

   Observação: o legacy.css aplica `section { padding: 5rem 0 }`; os painéis são
   <section>, por isso .rs-panel zera o padding explicitamente.
   ============================================================================= */

/* ---------- cor do grupo ---------- */
.rs-c-pb   { --c: var(--rs-c-pb, #7135ff); }
.rs-c-pc   { --c: var(--rs-c-pc, #4a7dff); }
.rs-c-limp { --c: var(--rs-c-limp, #2fcb8c); }
.rs-c-rede { --c: var(--rs-c-rede, #e9a53c); }
.rs-c-com  { --c: var(--rs-c-com, #d9509f); }
.rs-c-ferr { --c: var(--rs-c-ferr, #8a6bff); }

/* ---------- quadrado de ícone: .rs-icon do base.css ----------
   O .rs-icon fixa --c no roxo; dentro destas seções ele herda a cor do painel.
   Tamanho 36 px nas linhas (= coluna do ícone da Início), 46 px no destaque. */
.rs-tools .rs-icon, .rs-features .rs-icon, .rs-downloads .rs-icon { --c: inherit; --rs-icon-s: 36px; }
.rs-icon.rs-icon--lead { --rs-icon-s: 46px; }
.rs-tool-specs .rs-icon { --rs-icon-s: 30px; }

/* ---------- painel (= .section-panel.in2-group) ---------- */
.rs-panel,
.rs-tool {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
  border-radius: var(--rs-r-lg, 7px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, rgba(13,18,45,.94)), rgba(6,10,26,.93) 62%);
  box-shadow: var(--rs-sh-panel), 0 0 30px -18px color-mix(in srgb, var(--c) 75%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--rs-dur, .22s) ease, box-shadow var(--rs-dur, .22s) ease;
}
.rs-panel:hover,
.rs-tool:hover {
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: var(--rs-sh-panel), 0 0 34px -16px color-mix(in srgb, var(--c) 80%, transparent);
}

/* cabeçalho = mini-hero: fio de 2 px na cor, degradê que some para a direita */
.rs-panel-head,
.rs-tool-head {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 58px; padding: 10px 18px;
  border-top: 2px solid var(--c);
  border-bottom: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 6%, transparent) 72%);
}
.rs-panel-ico {
  display: grid; place-items: center; width: 36px; height: 36px;
  color: color-mix(in srgb, var(--c) 45%, #fff); font-size: 19px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 55%, transparent));
}
.rs-panel-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs-panel-name h3,
.rs-tool-name h3 {
  margin: 0; color: #fff;
  font-family: var(--rs-font-display); font-size: clamp(1.1rem, 1.02rem + .3vw, 1.3rem); font-weight: 700;
  line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
}
.rs-panel-sub { margin: 0; color: var(--rs-text-2); font-size: var(--rs-fs-xs); line-height: 1.35; }
.rs-panel-count {
  display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 5px;
  color: #f0eef8; background: rgba(5,6,16,.72);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  font-family: var(--rs-font-display); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- linhas (= .in2-row, sem seta: aqui não são botões) ---------- */
.rs-rows { list-style: none; margin: 0; padding: 8px 10px 10px; display: grid; gap: 2px; align-content: start; }
.rs-row {
  position: relative;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 8px; border-radius: var(--rs-r-sm, 5px);
  transition: background var(--rs-dur, .22s) ease;
}
.rs-row + .rs-row::before {
  content: ''; position: absolute; top: -1px; left: 8px; right: 8px; height: 1px;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.rs-row:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.rs-row:hover .rs-icon {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #0a0d24), color-mix(in srgb, var(--c) 42%, #070a1c));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.22), 0 0 16px -3px color-mix(in srgb, var(--c) 90%, transparent);
}
.rs-row-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs-row-copy h4,
.rs-lead-feat h4 {
  margin: 0; color: #ece9f6;
  font-family: var(--rs-font-display); font-size: 1.0625rem; font-weight: 700;
  line-height: 1.15; letter-spacing: .03em; text-transform: uppercase;
}
.rs-row-copy p { margin: 0; color: var(--rs-muted); font-size: var(--rs-fs-sm); line-height: 1.45; }

/* selo da linha: .rs-badge do base.css; --tint = na cor do painel */
.rs-badge--tint { color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 13%, rgba(6,8,22,.8)); }
.rs-row > .rs-badge { align-self: center; }

/* =============================================================================
   #ferramentas — um painel por ferramenta: nome, tela (abre o modal), o que faz,
   benefícios em linhas
   ============================================================================= */
.rs-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rs-gap); }
.rs-tool-head { grid-template-columns: 46px minmax(0, 1fr); min-height: 72px; padding: 12px 18px; }
.rs-tool-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-tool-name h3 { font-size: clamp(1.4rem, 1.25rem + .55vw, 1.75rem); letter-spacing: .03em; text-transform: none; }
.rs-tool-tag {
  color: color-mix(in srgb, var(--c) 40%, #fff);
  font-family: var(--rs-font-display); font-size: var(--rs-fs-micro); font-weight: 700;
  line-height: 1; letter-spacing: var(--rs-ls-label, .16em); text-transform: uppercase;
}

/* tela: botão de verdade (teclado abre o modal); o rótulo aparece no hover/foco */
.rs-tool-shot {
  position: relative; display: block; width: auto;
  margin: 16px 16px 0; padding: 0;
  border: 1px solid color-mix(in srgb, var(--c) 28%, rgba(255,255,255,.06));
  border-radius: var(--rs-r-md, 6px);
  background: #080b1e; cursor: zoom-in; overflow: hidden;
  aspect-ratio: 3 / 2;
}
.rs-tool-shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--rs-dur-slow, .45s) var(--rs-ease), filter var(--rs-dur, .22s) ease;
}
.rs-tool-shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(4,6,15,.75));
}
.rs-tool-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: var(--rs-r-sm, 5px);
  color: #fff; background: rgba(6,8,22,.82);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent);
  font-family: var(--rs-font-display); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: .85; transform: translateY(0);
  transition: opacity var(--rs-dur, .22s) ease, background var(--rs-dur, .22s) ease;
}
.rs-tool-shot:hover img { transform: scale(1.035); }
.rs-tool-shot:hover .rs-tool-zoom,
.rs-tool-shot:focus-visible .rs-tool-zoom { opacity: 1; background: color-mix(in srgb, var(--c) 45%, rgba(6,8,22,.85)); }
.rs-tool-shot:focus-visible { outline: 2px solid color-mix(in srgb, var(--c) 55%, #fff); outline-offset: 3px; }

.rs-tool-desc { margin: 16px 18px 0; color: var(--rs-text-2); font-size: .9375rem; line-height: 1.6; }
.rs-tool-specs { list-style: none; margin: auto 0 0; padding: 14px 10px 12px; display: grid; gap: 2px; }
.rs-tool-specs li {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 7px 8px; color: #ece9f6; font-size: var(--rs-fs-sm); font-weight: 500;
}
.rs-tool-specs li + li::before { content: ''; position: absolute; top: -1px; left: 8px; right: 8px; height: 1px; background: rgba(255,255,255,.05); }

/* =============================================================================
   #recursos — 21 recursos em 4 grupos. FPS e Fluidez abre a seção em largura
   total (destaque + 5 linhas ao lado); os outros três ficam em 3 colunas,
   como a grade de painéis da Início.
   ============================================================================= */
.rs-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rs-gap); }
.rs-panel-lead { grid-column: 1 / -1; }

.rs-lead-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; }
/* 5 linhas ao lado do destaque, uma por linha: descrição cabe em 1 linha em 1440 */
.rs-rows-2 { align-content: center; padding: 14px 14px 14px 10px; }

/* o destaque: Desbloqueador de FPS e o medidor de níveis */
.rs-lead-feat {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0 14px 14px; padding: 20px 22px 22px;
  border-radius: var(--rs-r-md, 6px);
  background:
    radial-gradient(420px 220px at 100% 100%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, #0d122d), #080b1e 85%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
.rs-lead-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rs-lead-feat h4 { color: #fff; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); letter-spacing: .02em; line-height: 1; }
.rs-lead-feat p { margin: 0; color: var(--rs-text-2); font-size: .9375rem; line-height: 1.5; }

.rs-fps-meter {
  --bar: 18px;
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 6px;
  min-height: calc(var(--bar) * 6 + 30px);
}
.rs-fps-meter li {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  color: color-mix(in srgb, var(--c) 35%, #fff);
  font-family: var(--rs-font-display); font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); font-weight: 700;
  line-height: 1; letter-spacing: .02em; text-align: center; font-variant-numeric: tabular-nums;
}
.rs-fps-meter li::before {
  content: ''; display: block; height: calc(var(--bar) * var(--i) - 4px);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) calc(40% + var(--i) * 10%), #fff), color-mix(in srgb, var(--c) 55%, #0a0d24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 14px -6px color-mix(in srgb, var(--c) 90%, transparent);
  opacity: calc(.45 + var(--i) * .09);
  transform-origin: bottom;
  transition: transform .7s var(--rs-ease-out, cubic-bezier(.16,1,.3,1)) calc(var(--i) * 70ms + 150ms);
}
.rs-fps-meter li.is-max { color: var(--rs-gold); }
.rs-fps-meter li.is-max::before {
  background: linear-gradient(180deg, #ffe08a, var(--rs-gold) 40%, #b9821a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 22px -4px rgba(247,189,50,.75);
  opacity: 1;
}
/* sobe quando o painel recebe .visible (IntersectionObserver do index) */
.rs-panel-lead.fade-up:not(.visible) .rs-fps-meter li::before { transform: scaleY(.12); }

/* =============================================================================
   #downloads — dois painéis de biblioteca lado a lado
   ============================================================================= */
.rs-dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-gap); }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .rs-lead-body { grid-template-columns: 1fr; }
  .rs-lead-feat { margin: 14px 14px 0; }
  .rs-rows-2 { padding: 8px 10px 10px; }
}
@media (max-width: 1080px) {
  .rs-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-feat-grid > :last-child { grid-column: 1 / -1; }
  .rs-feat-grid > :last-child .rs-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .rs-feat-grid > :last-child .rs-row + .rs-row::before { display: none; }
  .rs-feat-grid > :last-child .rs-row:nth-child(n+3)::before { display: block; }

  /* ferramentas: um painel por linha, tela à esquerda */
  .rs-tools-grid { grid-template-columns: 1fr; }
  .rs-tool { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; }
  .rs-tool-head { grid-column: 1 / -1; }
  .rs-tool-shot { grid-row: 2 / 4; margin: 16px 0 16px 16px; align-self: start; }
  .rs-tool-desc { grid-column: 2; margin-top: 16px; }
  .rs-tool-specs { grid-column: 2; margin-top: 0; }
}
@media (max-width: 760px) {
  .rs-feat-grid,
  .rs-dl-grid { grid-template-columns: 1fr; }
  .rs-feat-grid > :last-child .rs-rows { grid-template-columns: 1fr; }
  .rs-feat-grid > :last-child .rs-row:nth-child(n+2)::before { display: block; }

  .rs-tool { display: flex; }
  .rs-tool-shot { margin: 14px 14px 0; }
  .rs-tool-desc { margin: 14px 16px 0; }
}
@media (max-width: 480px) {
  .rs-panel-head, .rs-tool-head { padding: 10px 14px; gap: 10px; }
  .rs-rows { padding: 6px 6px 8px; }
  .rs-row { gap: 10px; padding: 10px 6px; }
  /* selo desce para baixo do texto: o título ganha a largura toda */
  .rs-row { grid-template-columns: 36px minmax(0, 1fr); }
  .rs-row > .rs-badge { grid-column: 2; justify-self: start; margin-top: 2px; }
  .rs-lead-feat { margin: 12px 10px 0; padding: 18px 16px 18px; }
  .rs-fps-meter { --bar: 14px; gap: 4px; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .rs-panel, .rs-tool, .rs-row, .rs-tool-shot img, .rs-tool-zoom,
  .rs-fps-meter li::before { transition: none; }
  .rs-tool-shot:hover img { transform: none; }
  .rs-panel-lead.fade-up:not(.visible) .rs-fps-meter li::before { transform: none; }
}