/* ============================================================
   FX STUDIOS | Página de ferramentas
   Só o que é exclusivo desta página. Tokens, botões, marca,
   cabeçalho e rodapé continuam vindo de base.css e vendas.css.
   ============================================================ */

/* ---------- abertura ---------- */
.abertura{ padding:clamp(52px,8vw,92px) 0 clamp(38px,5vw,54px); }
.abertura h1{
  font-size:clamp(31px,5.4vw,54px);
  letter-spacing:-.024em;
  max-width:18ch;
  margin-bottom:.44em;
}
.abertura h1 em{ font-style:italic; color:var(--ouro-claro); }

/* ---------- grade de ferramentas ----------
   Mesma construção do bloco das dores da home: um painel só, células separadas
   por fio de 1px. Cartão solto arredondado, repetido quatro vezes, é o que faz
   uma página parecer modelo pronto. */
.ferramentas{
  display:grid; gap:1px;
  background:var(--linha);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  overflow:hidden;
  box-shadow:var(--sombra-painel);
}
@media (min-width:860px){ .ferramentas{ grid-template-columns:repeat(2,1fr); } }

.ferramenta{
  background:linear-gradient(178deg,#161310,#100F0D);
  padding:36px 32px 32px;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  box-shadow:var(--luz-borda);
  transition:background .3s ease;
}
.ferramenta:hover{ background:linear-gradient(178deg,#1B1712,#121110); }
/* Trama diagonal, a mesma do `.tem-trama`. De perto é tecido, de longe some.
   Serve para a célula ter material e não ser um retângulo pintado. */
.ferramenta::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:repeating-linear-gradient(128deg,
    rgba(247,244,238,.016) 0 1px, transparent 1px 5px);
}
.ferramenta > *{ position:relative; z-index:1; }

/* Etiqueta de preço, o primeiro dado que a pessoa procura numa lista destas.
   Grátis acende em dourado; o que é pago fica em cinza e não disputa. */
.ferramenta__selo{
  display:inline-flex; align-items:center; align-self:flex-start; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500;
  padding:6px 11px; border-radius:999px;
  border:1px solid var(--linha);
  color:var(--texto-3);
  margin-bottom:20px;
}
.ferramenta__selo--gratis{
  color:var(--ouro); border-color:var(--linha-forte); background:var(--ouro-fundo);
}
.ferramenta__tipo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-3);
  margin:0 0 10px;
}
.ferramenta h2{
  font-size:clamp(22px,2.8vw,28px);
  line-height:1.2; letter-spacing:-.016em;
  color:var(--papel);
  margin:0 0 .5em;
  max-width:22ch;
}
.ferramenta p{
  color:var(--texto-2); font-size:15px; line-height:1.65;
  max-width:44ch; margin:0 0 26px;
}
/* O link fica colado no pé da célula, na mesma linha em todas: célula com
   texto curto e célula com texto longo terminam no mesmo lugar. */
.ferramenta__ir{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-weight:600; font-size:14.5px; color:var(--ouro);
  min-height:44px;
  transition:color .16s ease, gap .16s ease;
}
.ferramenta__ir:hover{ color:var(--ouro-claro); gap:13px; }
.ferramenta__ir svg{ flex:none; }

/* ---------- chamada de fechamento ---------- */
.chamada{
  border:1px solid var(--linha-forte);
  border-radius:var(--raio);
  background:
    radial-gradient(88% 120% at 86% 0%, rgba(201,162,75,.10), transparent 62%),
    linear-gradient(168deg,var(--preto-3),var(--preto-2));
  padding:clamp(32px,5vw,52px);
  box-shadow:var(--luz-borda-alta), var(--sombra-painel);
  text-align:center;
}
.chamada h2{
  font-size:clamp(24px,3.6vw,36px);
  letter-spacing:-.02em;
  max-width:22ch; margin:0 auto .5em;
}
.chamada h2 em{ font-style:italic; color:var(--ouro-claro); }
.chamada p{
  color:var(--texto-2); font-size:16px; line-height:1.68;
  max-width:54ch; margin:0 auto 28px;
}
.chamada__botoes{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.chamada__nota{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-3);
  margin:22px 0 0;
}

/* Tres tracos por card. O paragrafo corrido pedia leitura; o traco pede so
   o olho, e e assim que a pessoa decide em qual card clicar. */
.ferramenta ul{ margin:0 0 22px; padding:0; list-style:none; display:grid; gap:9px; }
.ferramenta li{ font-size:14.6px; line-height:1.5; color:var(--texto-2); padding-left:19px; position:relative; }
/* Filete dourado no lugar do travessao: a regra da casa vale ate para o
   caractere que o CSS desenha. */
.ferramenta li::before{ content:""; position:absolute; left:0; top:.74em; width:10px; height:1px; background:var(--ouro); opacity:.75; }

/* Com numero impar de cartoes, o ultimo ocupa a linha inteira em vez de
   deixar um buraco na grade. */
@media (min-width:860px){ .ferramenta:last-child:nth-child(odd){ grid-column:1 / -1; } }
.ferramenta li b{ color:var(--texto); font-weight:600; }