/* =========================================================
   jOTa — sidebars (carregado em TODAS as paginas)
   - Esquerda (.col-nav): headers dos menu-blocks em crimson dagged
   - Direita (.col-side): widget "Primeira vez no jOTa?"
   Usa cores diretas (sem depender de vars) p/ zero colisao com jota.css.
   ========================================================= */

/* ----- menu-blocks (esquerda): header crimson, mantendo o realce dourado no topo ----- */
.col-nav .ph{
  background: linear-gradient(180deg, #a8313e 0%, #5d141c 100%);
  color: #f1e3bf;
}
.col-nav .ph .ic{ color: #efd58a; }

/* ----- widget "Primeira vez no jOTa?" (direita) ----- */
.col-side .first-time .pb{ padding: 6px 0 10px; }
.col-side .first-time .ft-steps{ list-style: none; margin: 0; padding: 0; position: relative; }
.col-side .first-time .ft-steps li{ position: relative; }
.col-side .first-time .ft-steps li:not(:last-child)::after{
  content: ""; position: absolute;
  left: 24px; top: 36px; bottom: -4px;
  border-left: 2px dashed rgba(201,168,90,.3); z-index: 1;
}
.col-side .first-time .ft-steps a{
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  align-items: center; padding: 8px 12px;
  text-decoration: none; position: relative;
  transition: background .12s ease;
}
.col-side .first-time .ft-steps a:hover{ background: rgba(201,168,90,.06); }
.col-side .first-time .ft-num{
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #a8313e, #5d141c);
  color: #f1e3bf;
  font-family: "Cinzel", serif; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  position: relative; z-index: 2; transition: all .15s ease;
}
.col-side .first-time .ft-steps a:hover .ft-num{
  background: linear-gradient(180deg, #c9a85a, #8e7233);
  color: #0b1322; transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(201,168,90,.4);
}
.col-side .first-time .ft-content{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.col-side .first-time .ft-title{
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #2c2014; /* ink escuro: o .pb do painel e pergaminho claro */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-side .first-time .ft-steps a:hover .ft-title{ color: #8a1f2b; }
.col-side .first-time .ft-desc{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-size: 12.5px;
  color: #7a6240; line-height: 1.3;
}

/* ----- busca na sidebar estreita: empilhar (input em cima, botao full embaixo) ----- */
.col-side .search{ flex-direction: column; gap: 8px; }
.col-side .search input{ width: 100%; }
.col-side .search .btn{ width: 100%; padding: 10px 14px; }

/* ----- GIF "apoie o servidor" na caixa promo do Webshop ----- */
.webshop .promo{ overflow: hidden; }
.webshop .promo .promo-gif{
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 3px;
}