/* =============================================================
   FERRAMENTAS E SKILLS · colunas em paralaxe
   Par de ferramentas-efeitos.js. Com JavaScript, a .secao5 ganha a grade de
   colunas (html.ferr-colunas) e, sem movimento reduzido, o pin e a paralaxe
   (html.ferr-anim). Sem JavaScript ficam as duas fileiras de antes, rolando na
   horizontal.
   ============================================================= */

/* ───────── seção presa ───────── */
html.ferr-anim .secao5 {
  height: 100vh;
  height: 100svh;
  overflow-x: clip;
}
.secao5.fx-colunas .slideSuperior,
.secao5.fx-colunas .slideInferior {
  display: none;
}
.secao5.fx-colunas .slides {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* celular em pé: o bloco do título fica mais compacto para sobrar altura às colunas */
@media (max-width: 768px) {
  html.ferr-anim .secao5.fx-colunas {
    justify-content: start;
    padding-bottom: 12px;
  }
  .secao5.fx-colunas .cardSubtitulo {
    margin-top: 64px;
    margin-bottom: 10px;
  }
  .secao5.fx-colunas .conteudo {
    margin-bottom: 10px;
  }
  .secao5 .fx-filtro {
    padding: 0 12px;
    font-size: 12px;
  }
}
/* telas baixas (celular deitado, zoom alto): sem o selo, título e filtro em menos
   espaço; o verso das cartas mostra só nome e texto */
@media (max-height: 560px) {
  .secao5.fx-colunas .cardSubtitulo {
    display: none;
  }
  .secao5.fx-colunas .conteudo {
    margin-top: 58px;
    padding-bottom: 4px;
  }
  .secao5 .fx-verso__rot,
  .secao5 .fx-verso__dica {
    display: none;
  }
  .secao5 .fx-filtros {
    margin-bottom: 6px;
  }
  .secao5 .fx-filtro {
    min-height: 36px;
  }
}

/* ───────── filtro por categoria ───────── */
.secao5 .fx-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 clamp(10px, 1.6svh, 18px);
}
.secao5 .fx-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  font: 500 13px / 1 var(--poppins);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.secao5 .fx-filtro b {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.secao5 .fx-filtro:hover {
  background: rgba(255, 255, 255, 0.1);
}
.secao5 .fx-filtro[aria-pressed="true"] {
  background: rgba(0, 79, 255, 0.32);
  border-color: rgba(120, 170, 255, 0.75);
  color: #ffffff;
}
.secao5 .fx-filtro[aria-pressed="true"] b {
  color: #bfe9ff;
}
.secao5 .fx-filtro:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
}

/* título parado quando só uma categoria está escolhida (o JS marca .mostra) */
.secao5 .titulos.fixo h2 {
  visibility: hidden;
}
.secao5 .titulos.fixo h2.mostra {
  visibility: visible;
}
.secao5 .titulos.fixo h2.mostra div {
  opacity: 1 !important;
}

/* ───────── grade de colunas ───────── */
.secao5 .fx-colunas-grade {
  --gap: clamp(8px, 1vw, 14px);
  --cwc: min(13vw, 200px);
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cwc));
  justify-content: center;
  align-items: start;
  gap: var(--gap);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  transform: skewY(calc(var(--sk, 0) * 0.35deg));
}
@media (max-width: 999px) {
  .secao5 .fx-colunas-grade {
    --cwc: calc((100vw - 2 * var(--padding) - (var(--n) - 1) * var(--gap)) / var(--n));
  }
}
@media (max-height: 560px) {
  .secao5 .fx-colunas-grade {
    --cwc: min(13vw, calc((100svh - 120px) / 1.6 / 1.7765));
  }
}
.secao5 .fx-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  will-change: transform;
}
/* movimento reduzido: a mesma grade, parada, com a altura que precisar */
html.ferr-colunas:not(.ferr-anim) .secao5 {
  height: auto;
}
html.ferr-colunas:not(.ferr-anim) .secao5 .fx-colunas-grade {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
}
html.ferr-colunas:not(.ferr-anim) .secao5 .fx-coluna {
  will-change: auto;
}
html.ferr-colunas:not(.ferr-anim) .secao5 .fx-slot .divImg {
  height: 100%;
}

/* ───────── a carta: frente (a capa) e verso (o texto) ───────── */
.secao5 .fx-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 192 / 341;
  perspective: 900px;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
}
.secao5 .fx-slot:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--ciano);
}
.secao5 .fx-carta {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--saida);
  /* com a inclinação do hover, metade da capa fica "atrás" do plano da carta: sem
     isto o cursor caía na carta (vazia) e a capa perdia o hover no meio */
  pointer-events: none;
}
.secao5 .fx-carta > .divImg,
.secao5 .fx-carta > .fx-verso {
  pointer-events: auto;
}
.secao5 .fx-slot.virada .fx-carta {
  transform: rotateY(180deg);
}
/* carta estreita: ao virar, o verso fica maior que a carta e se ajeita dentro
   da área das colunas (o JS calcula posição e tamanho); a coluna sobe de camada */
.secao5 .fx-coluna.tem-zoom {
  position: relative;
  z-index: 5;
}
.secao5 .fx-slot.zoom {
  z-index: 5;
}
.secao5 .fx-slot.zoom .fx-verso {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 50px rgba(0, 0, 0, 0.6);
}

/* frente: a capa com a inclinação e o brilho do hover (home-extras.js) */
.secao5 .fx-slot .divImg {
  --ax: 0;
  --ay: 1;
  --ang: 0deg;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  display: flex;
  align-items: end;
  overflow: hidden;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  rotate: var(--ax) var(--ay) 0 var(--ang);
  translate: 0 0;
  transition:
    rotate 0.5s var(--saida),
    translate 0.4s var(--saida),
    box-shadow 0.4s;
}
.secao5 .fx-slot .divImg img {
  display: block;
  width: 100%;
  height: auto;
}
.secao5 .fx-slot .divImg.ativo {
  translate: 0 -6px;
  box-shadow: 0 22px 30px -14px rgba(0, 79, 255, 0.7);
  transition:
    rotate 0.16s ease-out,
    translate 0.3s var(--saida),
    box-shadow 0.3s;
}
.secao5 .fx-slot .divImg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), rgba(33, 189, 239, 0.3), transparent 65%);
  box-shadow: inset 0 0 0 1px rgba(33, 189, 239, 0.55);
}
.secao5 .fx-slot .divImg.ativo::after {
  opacity: 1;
}

/* verso: categoria e número, nome e o texto curto, na cor da categoria */
.secao5 .fx-verso {
  --cor: var(--azul);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(10px, 1.1vw, 16px);
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--cor) 60%, transparent);
  background:
    radial-gradient(130% 80% at 0% 0%, color-mix(in srgb, var(--cor) 55%, transparent), transparent 72%),
    #0f1519;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.secao5 .fx-slot[data-cat="p"] .fx-verso {
  --cor: var(--ciano);
}
.secao5 .fx-slot[data-cat="i"] .fx-verso {
  --cor: var(--roxo);
}
.secao5 .fx-verso p {
  margin: 0;
}
.secao5 .fx-verso__rot {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--cor) 28%, transparent);
  color: #ffffff;
  font: 500 12px / 1.2 var(--poppins);
  letter-spacing: 0.04em;
}
.secao5 .fx-verso__nome {
  font-family: var(--titulo);
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
}
.secao5 .fx-verso__txt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font: 400 clamp(12px, 0.95vw, 15px) / 1.5 var(--poppins);
  color: rgba(255, 255, 255, 0.86);
}
.secao5 .fx-verso__dica {
  font: 400 12px / 1.2 var(--poppins);
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 699px) {
  .secao5 .fx-verso {
    gap: 6px;
    padding: 9px;
  }
  .secao5 .fx-verso__dica {
    display: none;
  }
}

/* menos movimento: a carta não gira, o verso aparece por cima em fade */
@media (prefers-reduced-motion: reduce) {
  .secao5 .fx-carta {
    transition: none;
  }
  .secao5 .fx-slot.virada .fx-carta {
    transform: none;
  }
  .secao5 .fx-verso {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .secao5 .fx-slot.virada .fx-verso {
    opacity: 1;
  }
  .secao5 .fx-slot .divImg {
    transition: none;
  }
}

/* ───────── sem JavaScript ─────────
   As duas fileiras de antes, com as capas inteiras, rolando na horizontal; os
   três títulos lado a lado. */
html:not(.ferr-colunas) .secao5 {
  height: auto;
}
html:not(.ferr-colunas) .secao5 .conteudo .titulos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
}
html:not(.ferr-colunas) .secao5 .conteudo .titulos h2 {
  position: static;
}
html:not(.ferr-colunas) .secao5 .conteudo .titulos h2 + h2::before {
  content: "· ";
}
html:not(.ferr-colunas) .secao5 .slideSuperior,
html:not(.ferr-colunas) .secao5 .slideInferior {
  justify-content: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
}
html:not(.ferr-colunas) .secao5 .modulos .divImg {
  height: 100%;
  scroll-snap-align: start;
}