/* ==========================================================================
   SystemFarm — linha do tempo das novidades
   Carrega só em /novidades/. Depende de tema.css (o tema oficial).
   O bloco abaixo traduz os nomes antigos para os tokens do tema.
   ========================================================================== */
:root{
  --larg:1180px; --branco:#fff; --raio:14px;
  --tinta-3:#93A4B3; --fundo:var(--creme);
  --azul-esc:var(--profundo-2); --ambar:#E0912A; --roxo:#7A4FD0;
}

/* ---------- filtros ---------- */
.filtros{
  max-width:var(--larg);margin:26px auto 0;position:relative;z-index:3;background:var(--branco);
  border:1px solid var(--linha);border-radius:16px;padding:15px;display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;box-shadow:0 14px 36px rgba(12,43,69,.10);width:calc(100% - 44px);
}
.fbt{
  border:1px solid var(--linha);background:#fff;border-radius:100px;padding:8px 17px;font-size:13.5px;
  cursor:pointer;color:var(--tinta-2);font-weight:600;font-family:inherit;transition:.15s;
}
.fbt:hover{border-color:#C3D2DF;color:var(--tinta)}
.fbt.on{background:var(--azul-esc);border-color:var(--azul-esc);color:#fff}
.fbt b{opacity:.6;font-weight:700;margin-left:3px}
.busca{margin-left:auto;position:relative;display:inline-flex}
.busca input{
  border:1px solid var(--linha);border-radius:100px;padding:9px 16px 9px 38px;font-size:14px;
  min-width:240px;font-family:inherit;color:var(--tinta);
}
.busca input:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(30,111,184,.12)}
.busca::before{content:'\2315';position:absolute;left:15px;top:8px;font-size:16px;color:var(--tinta-3)}

/* ---------- trilho ---------- */
.tl{max-width:var(--larg);margin:50px auto 90px;padding:0 22px;position:relative}
.tl::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;border-radius:3px;
  background:linear-gradient(180deg,var(--ciano) 0%,var(--azul) 45%,var(--verde) 100%);opacity:.3;
}
.mes{text-align:center;margin:44px 0 28px;position:relative}
.mes span{
  background:var(--fundo);padding:0 18px;font-size:12.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta-2);position:relative;z-index:1;
}

.item{position:relative;width:calc(50% - 46px);margin-bottom:26px}
.item:nth-of-type(odd){margin-left:auto}
.item::before{
  content:'';position:absolute;top:27px;width:16px;height:16px;border-radius:50%;background:#fff;
  border:4px solid var(--azul);z-index:2;box-shadow:0 0 0 5px var(--fundo);
}
.item:nth-of-type(odd)::before{left:-54px}
.item:nth-of-type(even)::before{right:-54px}
.item.c-MELHORIA::before{border-color:var(--verde)}
.item.c-CORRECAO::before{border-color:var(--ambar)}
.item.c-PLUGIN::before{border-color:var(--roxo)}
.item.c-DICA::before{border-color:var(--tinta-3)}

/* ---------- cartão ---------- */
.tl .card{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:21px 23px;
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.tl .card:hover{box-shadow:0 14px 32px rgba(12,43,69,.10);transform:translateY(-2px);border-color:#CFDCE7}
.tl .card.aberto{border-color:var(--azul);box-shadow:0 14px 32px rgba(30,111,184,.14)}
.tl .card.realce{box-shadow:0 0 0 3px rgba(141,198,63,.4),0 14px 32px rgba(30,111,184,.14)}
.tl .l1{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tl .card h3{margin:0 0 9px;font-size:19px;line-height:1.34;font-weight:700}
.tl .card > p{margin:0;color:var(--tinta-2);font-size:15px}

.mais{
  margin-top:13px;font-size:13.5px;color:var(--azul);font-weight:700;display:inline-flex;
  align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
}
.mais::after{content:'\25BE';transition:transform .22s}
.card.aberto .mais::after{transform:rotate(180deg)}
.corpo{max-height:0;overflow:hidden;transition:max-height .35s ease}
.card.aberto .corpo{max-height:1400px}
.corpo-in{
  padding-top:16px;margin-top:16px;border-top:1px solid var(--linha);white-space:pre-line;
  font-size:15.2px;color:#3B4A57;
}

/* chamada comercial — só em PLUGIN e LANCAMENTO */
.nov-cta{
  margin-top:20px;background:linear-gradient(120deg,#F2F9EE,#EAF4FB);border:1px solid #D9E9CF;
  border-radius:12px;padding:17px 19px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  white-space:normal;
}
.nov-cta b{font-size:15px;display:block}
.nov-cta small{display:block;color:#4C6154;font-size:13.5px;margin-top:2px}
.nov-cta .btn{margin-left:auto}

.vazio{text-align:center;color:var(--tinta-3);padding:60px 0}
#tl .carregando{text-align:center;display:block}

/* ---------- legenda das categorias ---------- */
.legenda{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:34px;
         font-size:13px;color:var(--tinta-2)}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{width:10px;height:10px;border-radius:50%;border:3px solid var(--azul);display:block}
.legenda .l-MELHORIA i{border-color:var(--verde)}
.legenda .l-CORRECAO i{border-color:var(--ambar)}
.legenda .l-PLUGIN i{border-color:var(--roxo)}
.legenda .l-DICA i{border-color:var(--tinta-3)}

@media(max-width:860px){
  .filtros{margin:20px 22px 0;width:auto}
  .busca{margin-left:0;width:100%}
  .busca input{width:100%;min-width:0}
  .tl::before{left:19px}
  .item,.item:nth-of-type(odd){width:auto;margin-left:46px}
  .item::before,.item:nth-of-type(odd)::before,.item:nth-of-type(even)::before{left:-35px;right:auto}
  .mes{text-align:left;padding-left:46px}
  .nov-cta .btn{margin-left:0}
}