/* novidades.css — a faixa de NOVIDADES da home e a página `/news`.
 *
 * O dono pediu (12/09/2026) uma seção de novidades e atualizações acima do
 * capítulo da REDE, "passando" — uma esteira infinita — e uma página em
 * `/news` com a lista inteira. O conteúdo dos dois sai do MESMO
 * `_local/novidades.json`: publicar novidade é editar um arquivo.
 *
 * ## A esteira é do `InfiniteSlider`, sem React
 *
 * O componente que o dono mandou é React + framer-motion + shadcn; o espelho é
 * HTML estático. O comportamento foi portado: trilho duplicado, deslocamento
 * de −50% em laço, e no hover a esteira DESACELERA em vez de parar (o
 * `durationOnHover` do original). Quem anima é a Web Animations API no
 * `novidades.js`, porque trocar `animation-duration` no CSS faz a posição
 * SALTAR — a mesma fração de um tempo diferente é outro ponto do trajeto.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A captura reseta `border/margin/padding` num bloco `[dir] div, [dir] p, …`
 * de especificidade (0,1,1), que vence classe sozinha (0,1,0). Sem `rem`: a
 * raiz do espelho é 13.33vw.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/_local/fonts/space-grotesk-400.cbee7234.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/_local/fonts/JetBrainsMono.340e696a.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --nov-bg:        #000000;
  --nov-tile:      #070707;
  --nov-tile-on:   #0B0906;
  --nov-line:      #1C1C1C;
  --nov-line-soft: #161616;
  --nov-ink:       #FFFFFF;
  --nov-ink-2:     #C8CCD2;
  --nov-ink-3:     #A4AAB2;
  --nov-ink-5:     #7C828A;
  --nov-ink-6:     #5A5F67;
  --nov-accent:      #FFA51F;
  --nov-accent-soft: #FFC24A;
  --nov-accent-deep: #C9861A;
  --nov-font: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  --nov-mono: 'JetBrains Mono', ui-monospace, monospace;
  --nov-slant: -23.5deg;
}

/* ============================================================
   A FAIXA DA HOME
   ============================================================ */

[dir] .oc-nov {
  position: relative;
  margin: 0;
  padding: 54px 0 10px;
  border: 0;
  background: var(--nov-bg);
  color: var(--nov-ink);
  font-family: var(--nov-font);
}
[dir] .oc-nov *,
[dir] .oc-nov *::before,
[dir] .oc-nov *::after { box-sizing: border-box; }

[dir] .oc-nov-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1400px;
  margin: 0 auto 18px;
  padding: 0 44px;
  border: 0;
}
[dir] .oc-nov-tick {
  width: 4px;
  height: 20px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--nov-accent);
  transform: skewX(var(--nov-slant));
}
[dir] .oc-nov-titulo {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nov-ink-2);
}
[dir] .oc-nov-regua { flex: 1; height: 1px; margin: 0; padding: 0; border: 0; background: var(--nov-line-soft); }
[dir] .oc-nov-todas {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--nov-ink-5);
  text-decoration: none;
  transition: color 0.15s ease;
}
[dir] .oc-nov-todas:hover { color: var(--nov-accent-soft); }

/* a pista: as bordas somem em degradê para a esteira não "começar" no canto */
[dir] .oc-nov-pista {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
[dir] .oc-nov-trilho {
  display: flex;
  width: max-content;
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  will-change: transform;
}

[dir] .oc-nov-cartao {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 320px;
  flex: none;
  margin: 0;
  padding: 16px 18px 17px;
  border: 1px solid var(--nov-line);
  border-radius: 13px;
  background: var(--nov-tile);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
[dir] a.oc-nov-cartao:hover {
  border-color: rgba(255, 165, 31, 0.38);
  background: var(--nov-tile-on);
}
/* hairline laranja de entrada — assinatura OFFCODE */
[dir] .oc-nov-cartao::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 165, 31, 0.5) 45%, transparent);
  opacity: 0;
  transition: opacity 0.16s ease;
}
[dir] a.oc-nov-cartao:hover::before { opacity: 1; }

[dir] .oc-nov-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
[dir] .oc-nov-data {
  font-family: var(--nov-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--nov-ink-6);
}
[dir] .oc-nov-selo {
  margin: 0;
  padding: 3px 9px;
  border: 1px solid rgba(255, 165, 31, 0.24);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nov-accent-soft);
  background: rgba(255, 165, 31, 0.1);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
[dir] .oc-nov-selo--melhoria {
  border-color: rgba(200, 204, 210, 0.2);
  color: var(--nov-ink-2);
  background: rgba(200, 204, 210, 0.07);
}
[dir] .oc-nov-selo--correcao {
  border-color: rgba(14, 203, 129, 0.26);
  color: #0ECB81;
  background: rgba(14, 203, 129, 0.09);
}
[dir] .oc-nov-cartao-titulo {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--nov-ink);
  text-wrap: pretty;
}
[dir] .oc-nov-cartao-resumo {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--nov-ink-5);
  text-wrap: pretty;
  /* três linhas: o cartão tem altura igual para todos, e a tradução mais
   * longa não pode esticar a esteira inteira */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quem pede menos movimento não recebe esteira nenhuma: o trilho vira uma
 * linha rolável à mão. */
@media (prefers-reduced-motion: reduce) {
  [dir] .oc-nov-pista { overflow-x: auto; }
  [dir] .oc-nov-trilho { animation: none !important; }
}

@media (max-width: 560px) {
  [dir] .oc-nov { padding: 34px 0 6px; }
  [dir] .oc-nov-topo { padding: 0 20px; margin-bottom: 14px; }
  [dir] .oc-nov-cartao { width: 268px; padding: 14px 15px 15px; border-radius: 12px; }
  [dir] .oc-nov-cartao-titulo { font-size: 12.5px; }
  [dir] .oc-nov-cartao-resumo { font-size: 10.5px; }
}

/* ============================================================
   A PÁGINA /news
   ============================================================ */

/* A casca sai do `/about`: o `<main>` dele tem caixa de 1200px e folga
 * própria. 🔴 Os 65px de cima repõem a altura do cabeçalho FIXO — sem eles o
 * título nasce atrás da barra. Uma vez só: somar com `body.oc-com-abas` dá a
 * faixa preta que o `/deposit` levou em 11/09. */
[dir] main.oc-news-main { max-width: none; margin: 0; padding: 65px 0 0; }

[dir] .news {
  margin: 0;
  padding: 0 0 90px;
  border: 0;
  background: var(--nov-bg);
  color: var(--nov-ink);
  font-family: var(--nov-font);
}
[dir] .news *,
[dir] .news *::before,
[dir] .news *::after { box-sizing: border-box; }

[dir] .news__wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 52px 44px 0;
  border: 0;
}
[dir] .news__head { margin: 0 0 34px; padding: 0; border: 0; }
[dir] .news__title-row { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 0; border: 0; }
[dir] .news__tick {
  width: 4px;
  height: 32px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--nov-accent);
  transform: skewX(var(--nov-slant));
}
[dir] .news__title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1;
}
[dir] .news__lede {
  margin: 0;
  padding: 0 0 0 20px;
  border: 0;
  max-width: 620px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--nov-ink-3);
  text-wrap: pretty;
}

[dir] .news-lista { margin: 0; padding: 0; border: 0; }
[dir] .news-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 0 26px;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--nov-line-soft);
}
[dir] .news-item:first-child { border-top: 0; padding-top: 0; }
[dir] .news-item__quando {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
}
[dir] .news-item__data {
  font-family: var(--nov-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--nov-ink-6);
}
[dir] .news-item__corpo { min-width: 0; margin: 0; padding: 0; border: 0; }
[dir] .news-item__titulo {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--nov-ink);
  text-wrap: pretty;
}
[dir] .news-item__titulo a { color: inherit; text-decoration: none; }
[dir] .news-item__titulo a:hover { color: var(--nov-accent-soft); }
[dir] .news-item__resumo {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--nov-ink-3);
  max-width: 640px;
  text-wrap: pretty;
}
[dir] .news-item__ir {
  display: inline-block;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--nov-accent);
  text-decoration: none;
}
[dir] .news-item__ir:hover { color: var(--nov-accent-soft); }

[dir] .news-vazio,
[dir] .news-erro {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--nov-line);
  border-radius: 12px;
  background: var(--nov-tile);
  font-size: 12px;
  line-height: 1.6;
  color: var(--nov-ink-3);
}

@media (max-width: 560px) {
  [dir] .news__wrap { padding: 26px 20px 0; }
  [dir] .news__title { font-size: 22px; }
  [dir] .news__tick { height: 24px; }
  [dir] .news__lede { padding-left: 0; margin-top: 10px; font-size: 11.5px; }
  [dir] .news-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 0;
  }
  [dir] .news-item__quando { flex-direction: row; align-items: center; gap: 10px; }
  [dir] .news-item__titulo { font-size: 14.5px; }
  [dir] .news-item__resumo { font-size: 12px; }
}