/* ============================================================
   ARX Cyber — eixo de conteúdo
   blog.html (archive-post) · insights.html (page-insights)
   single-post.html (single) · single-evento.html (single-eventos)

   Medidas do Figma (blog 408-12411, insights 387-104) trazidas para o
   container de 1440 do site: a prancheta usa 1268, e a decisão de alargar
   está registrada em PENDENCIAS.md. As proporções são as do Figma; as
   larguras absolutas escalam com o container.
   ============================================================ */

/* ---- placeholder de capa: mesma receita da home enquanto não há
   featured image (pendência #14). Um só lugar para trocar depois. ---- */
.pcard__ph, .bl-dest__ph, .art-capa__ph, .evt-player__ph, .in-dest__ph {
  position: absolute; inset: 0; display: block;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(21,116,255,.35), transparent 60%),
    linear-gradient(160deg, #14203a, #0b0b0b);
}

/* ============================================================
   Card de post — usado no blog, nos insights e nos relacionados
   ============================================================ */
.pcard { display: flex; flex-direction: column; }
.pcard__capa {
  position: relative; display: block; aspect-ratio: 390 / 314; overflow: hidden;
  border-radius: var(--r-small-xxl); background: #0c0c0c;
  box-shadow: 0 0 0 1px rgba(21,116,255,.25), 0 18px 50px -24px rgba(21,116,255,.55);
}
.pcard__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--arx-ease); }
.pcard:hover .pcard__capa img { transform: scale(1.05); }
/* A capa carrega a categoria, no lugar onde antes ficava a data. Mesma pílula
   do resto da página; a altura é a das pílulas do destaque (42px). */
.pcard__cat {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; height: 42px; padding-inline: 18px;
  font-size: 15px; line-height: 28.8px; letter-spacing: -.24px; color: var(--arx-white);
}
.pcard__titulo { margin-top: 22px; font-size: 20px; line-height: 29px; font-weight: var(--fw-semibold); }
.pcard__titulo a { color: var(--arx-white); transition: color .3s var(--arx-ease); }
.pcard__titulo a:hover { color: var(--arx-blue-border); }
.pcard__resumo { margin-top: 12px; flex: 1; font-size: 15px; line-height: 23px; color: var(--arx-grey-70); }
.pcard__btn { margin-top: 22px; align-self: flex-start; }

html.arx-anim .pcard {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--arx-ease), transform .6s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.arx-anim .is-revealed .pcard { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .pcard { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BLOG — hero + vitrine de destaques
   ============================================================ */
.bl-hero { position: relative; padding: calc(var(--arx-header-h) + 24px) 0 0; overflow-x: clip; }
.bl-hero__grad {
  position: absolute; inset: 206px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,21,21,0) 57%, #151515 98%);
}
.bl-hero .arx-container { position: relative; z-index: 1; }
.bl-hero__topo { display: grid; grid-template-columns: 1fr 396px; gap: 60px; align-items: end; }
.bl-hero__title {
  /* Mesma correção da CTA: a prancheta é 1920, então o corpo escala com a
     página. E o tracking vai em em — a -0,68px fixa vale -0,01em nos 68px do
     comp, mas -0,02em quando o título encolhe no celular, e aí as letras se
     agarram. */
  margin-top: 22px;
  font-size: clamp(32px, 3.5417vw, 68px); line-height: 1.09; letter-spacing: -0.01em;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.bl-hero__sub { font-size: 20px; line-height: 30px; color: var(--arx-white); }

/* ---- Vitrine do topo: carrossel ----
   O slide ativo manda; os vizinhos aparecem como prévia recortada. Quem anima
   é a LARGURA de cada slide junto com o deslocamento do trilho — as duas
   transições correm com a mesma duração e a mesma curva, então o card cresce
   enquanto desliza, em vez de pular de posição. As medidas vêm do JS porque
   dependem da largura do palco (insights.js as escreve em --palco/--lado). */
.bl-vitrine { margin-top: 56px; }
.bl-vitrine__palco { overflow: hidden; }
.bl-vitrine__trilho {
  --dur: .72s;
  display: flex; gap: var(--vao, 30px); align-items: stretch;
  transform: translate3d(var(--desloc, 0px), 0, 0);
  transition: transform var(--dur) var(--arx-ease);
  will-change: transform;
}
.bl-dest {
  position: relative; flex: 0 0 auto;
  width: var(--lado, 240px); min-height: 600px;
  border-radius: 20px; overflow: hidden;
  transition: width var(--dur) var(--arx-ease), opacity var(--dur) var(--arx-ease),
              box-shadow var(--dur) var(--arx-ease);
  opacity: .45;
}
.bl-dest.is-ativo { width: var(--centro, 725px); opacity: 1; box-shadow: 0 0 0 1px rgba(21,116,255,.28); }
.bl-dest__ph { border-radius: inherit; }
.bl-dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-dest::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--dur) var(--arx-ease);
  background: linear-gradient(180deg, rgba(6,8,14,.35) 0%, rgba(6,8,14,.55) 45%, rgba(6,8,14,.94) 100%);
}
.bl-dest.is-ativo::after { opacity: 1; }

/* o conteúdo só existe no slide ativo — nas prévias ele sairia cortado */
.bl-dest__meta, .bl-dest__corpo {
  position: absolute; z-index: 1; left: 38px; right: 38px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--arx-ease), transform .5s var(--arx-ease);
  pointer-events: none;
}
.bl-dest__meta { top: 34px; }
.bl-dest__corpo { bottom: 40px; }
.bl-dest.is-ativo .bl-dest__meta,
.bl-dest.is-ativo .bl-dest__corpo { opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s; }
.bl-dest__meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--arx-grey-90); }
.bl-dest__meta b { font-weight: var(--fw-semibold); color: var(--arx-white); }
.bl-dest__cats { display: flex; gap: 10px; }
.bl-dest__cats span {
  min-width: 134px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center; padding-inline: 18px;
  font-size: 15px; line-height: 28.8px; letter-spacing: -.24px; color: var(--arx-white);
}
.bl-dest__titulo { margin-top: 24px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); }
.bl-dest__titulo a { color: var(--arx-white); }
.bl-dest__titulo a:hover { color: var(--arx-blue-border); }
.bl-dest__resumo { margin-top: 16px; max-width: 580px; font-size: 16px; line-height: 25px; color: var(--arx-grey-90); }
.bl-dest__corpo .arx-btn { margin-top: 24px; }

.bl-vitrine__controles { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.bl-vitrine__seta {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: none; color: var(--arx-grey-90); cursor: pointer;
  transition: border-color .3s var(--arx-ease), color .3s var(--arx-ease), background-color .3s var(--arx-ease);
}
.bl-vitrine__seta:hover { border-color: var(--arx-blue); color: var(--arx-white); background: rgba(21,116,255,.14); }
.bl-vitrine__seta svg { width: 12px; height: 12px; }
.bl-vitrine__pontos { display: flex; align-items: center; gap: 10px; }
.bl-vitrine__ponto {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: none; cursor: pointer;
  transition: width .45s var(--arx-ease), background-color .3s var(--arx-ease), border-color .3s var(--arx-ease);
}
.bl-vitrine__ponto.is-on { width: 28px; border-radius: 5px; background: var(--arx-blue); border-color: var(--arx-blue); }

@media (prefers-reduced-motion: reduce) {
  .bl-vitrine__trilho, .bl-dest, .bl-dest::after,
  .bl-dest__meta, .bl-dest__corpo, .bl-vitrine__ponto { transition: none; }
}

/* ============================================================
   BLOG — grade + coluna de filtros
   ============================================================ */
.bl-lista { padding-block: 96px; position: relative; overflow-x: clip; }
.bl-lista__h2 { margin-top: 14px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.bl-lista__grid {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr 396px; gap: 42px; align-items: start;
}
.bl-lista__posts { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 42px; }

/* ---- Painel de filtros — medidas do nó 426:451 ----
   O Figma usa um componente "Background+Blur" em quatro lugares: o painel
   (396x570), o campo de busca (351x52), os botões de ordenação (134x31) e as
   pílulas de categoria do destaque (134x42). Todos com a MESMA receita —
   borda 1px #1574ff, raio 20 e um fundo escuro levemente azulado no topo.
   Aqui isso vira uma classe só, .arx-blur, em vez de quatro aproximações. */
.arx-blur {
  border-radius: 20px;
  border: 1px solid var(--arx-blue);
  /* amostrado do PNG do componente: #1c212a nas quinas de cima,
     #09090b no miolo, #131313 na base. */
  background:
    radial-gradient(120% 120% at 50% 0%, #1c212a 0%, #111317 38%, transparent 72%),
    linear-gradient(180deg, #0e1013 0%, #09090b 46%, #131313 100%);
}

.bl-side {
  position: sticky; top: calc(var(--arx-header-h) - 60px);
  /* O recuo do painel é o do campo de busca (351 num painel de 396 → 22,5).
     O texto fica 21px mais para dentro, na guia de 43 do Figma. */
  padding: 34px 22px 40px; border-radius: 20px;
  --recuo-texto: 21px;
}
.bl-side__bloco + .bl-side__bloco { margin-top: 30px; }
.bl-side__tit {
  padding-left: var(--recuo-texto);
  font-size: 24px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white);
}

/* campo de busca: 52px de altura, raio 20, e o brilho é uma cópia borrada da
   própria borda — no Figma é literalmente o mesmo retângulo com blur 5. */
.bl-busca { position: relative; margin-top: 8px; }
.bl-busca::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: 20px; border: 2px solid var(--arx-blue);
  filter: blur(5px); pointer-events: none;
}
.bl-busca input {
  position: relative; z-index: 1;
  width: 100%; height: 52px; padding: 0 44px 0 22px;
  color: var(--arx-white); font-family: var(--arx-font); font-size: 14px; line-height: 27px;
}
.bl-busca input::placeholder { color: rgba(255,255,255,.45); }
.bl-busca input:focus-visible { outline: 2px solid var(--arx-blue-border); outline-offset: 3px; }
.bl-busca button {
  position: absolute; z-index: 2; right: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; padding: 0;
  background: none; border: 0; color: rgba(255,255,255,.75); cursor: pointer;
}
.bl-busca button svg { width: 16px; height: 16px; display: block; }
.bl-busca button:hover { color: var(--arx-white); }

/* ordenação: duas pílulas de 134x31, raio 20, texto 15/28,8 */
.bl-ordem { margin-top: 12px; padding-left: var(--recuo-texto); display: flex; gap: 9px; }
.bl-ordem__btn {
  width: 134px; height: 31px; padding: 0;
  font-family: var(--arx-font); font-size: 15px; line-height: 28.8px;
  letter-spacing: -.24px; color: var(--arx-white); cursor: pointer;
  transition: background-color .3s var(--arx-ease), box-shadow .3s var(--arx-ease);
}
.bl-ordem__btn:hover { background: rgba(21,116,255,.16); }
.bl-ordem__btn.is-on { box-shadow: inset 0 0 0 1px var(--arx-blue), 0 0 14px -4px rgba(21,116,255,.9); }

/* categorias: texto puro, sem pílula — passo de 39px entre as linhas */
.bl-cats { margin-top: 12px; padding: 0 0 0 var(--recuo-texto); list-style: none; }
.bl-cats a {
  display: block; height: 39px; display: flex; align-items: center;
  font-size: 15px; line-height: 28.8px; letter-spacing: -.24px; color: var(--arx-white);
  transition: color .3s var(--arx-ease), padding-left .3s var(--arx-ease);
}
.bl-cats a:hover { color: var(--arx-blue-border); padding-left: 6px; }

.bl-pag { margin-top: 56px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.bl-pag[hidden] { display: none; }
.bl-pag__num, .bl-pag__seta {
  font-family: var(--arx-font); background: none; cursor: pointer;
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-grid; place-items: center; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16); font-size: 14px; color: var(--arx-grey-90);
  transition: border-color .3s var(--arx-ease), background-color .3s var(--arx-ease), color .3s var(--arx-ease);
}
.bl-pag__num:hover, .bl-pag__seta:hover { border-color: var(--arx-blue); color: var(--arx-white); }
.bl-pag__num.is-on { background: rgba(21,116,255,.2); border-color: var(--arx-blue); color: var(--arx-white); }
.bl-pag__seta[disabled] { opacity: .3; pointer-events: none; }
.bl-pag__seta svg { width: 12px; height: 12px; }

/* ============================================================
   Newsletter — copy na guia do container, arte sangrando à direita
   (Figma 427:612: 892 / 1028 de 1920)
   ============================================================ */
.arx-news { position: relative; overflow: hidden; background: linear-gradient(180deg, #0e0f12, #0b0b0d); }
/* Halo da coluna de texto. No Figma ele é um PNG no fundo do bloco
   "Background+VerticalBorder" (892x640), não um elipse da camada Luz — por
   isso ocupa exatamente essa coluna e morre nas bordas dela.
   Amostrado do arquivo: ancorado na quina inferior esquerda, cor rgb(43,132,200)
   (um azul mais claro e menos saturado que o #1574ff da marca), alfa de pico
   0,58, raios de 75% da largura e 67% da altura. As paradas seguem a curva
   medida no PNG, que cai bem mais rápido que uma interpolação linear. */
.arx-news__luz {
  position: absolute; z-index: 0; inset: 0 53.54% 0 0; pointer-events: none;
  background: radial-gradient(75% 67% at 0% 100%,
    rgba(43,132,200,.58) 0%,
    rgba(43,132,200,.44) 11%,
    rgba(43,132,200,.31) 22%,
    rgba(43,132,200,.23) 33%,
    rgba(43,132,200,.12) 55%,
    rgba(43,132,200,.03) 77%,
    rgba(43,132,200,0) 100%);
}
/* A arte é posicionada contra a SEÇÃO, que ocupa a página inteira: a
   porcentagem resolve contra ela e não contra a viewport, então a barra de
   rolagem não desloca nada. A copy, por estar num .arx-container de verdade,
   nasce exatamente na guia de 1440 — que é o que o resto da página usa. */
.arx-news__arte { position: absolute; inset: 0 0 0 46.46%; border-left: 1px solid #171e2c; }
/* o Figma desloca a foto 7% para a direita para o cadeado cair no meio da
   coluna; com object-fit isso vira object-position. */
.arx-news__arte img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.arx-news__grid { position: relative; z-index: 1; }
.arx-news__copy {
  min-height: 640px; max-width: 517px;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 90px;
}
.arx-news__h2 { margin-top: 16px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.arx-news__sub { margin-top: 20px; font-size: 16px; line-height: 27px; color: var(--arx-grey-70); }
/* campo em uma linha, botão embaixo — é o arranjo do nó 427:616 (campo 517x70
   em y=387, botão 87x42 em y=487), não input e botão lado a lado. */
.arx-news__form { margin-top: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.arx-news__form input {
  width: 100%; height: 70px; padding: 0 26px; border-radius: 12px;
  color: var(--arx-white); font-family: var(--arx-font); font-size: 15px;
}
.arx-news__form input::placeholder { color: var(--arx-grey-50); }
.arx-news__form input:focus-visible { outline: 2px solid var(--arx-blue-border); outline-offset: 2px; }

/* ============================================================
   INSIGHTS — hero
   ============================================================ */
/* Hero (nó 387:113): a foto entra a 30% de opacidade e o degradê para #151515
   começa em ~57% da altura — foi assim que o comp resolveu o contraste, sem
   um véu escuro por cima da imagem inteira. */
.in-hero { position: relative; padding: calc(var(--arx-header-h) + 63px) 0 120px; overflow: hidden; }
.in-hero__bg { position: absolute; inset: 0; }
.in-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: .3; }
.in-hero__bg::after {
  content: ""; position: absolute; inset: 32% 0 -2% 0;
  background: linear-gradient(180deg, rgba(21,21,21,0) 57%, #151515 98%);
}
.in-hero__inner { position: relative; z-index: 1; text-align: center; }
.in-hero__title {
  font-size: clamp(32px, 3.5417vw, 68px); line-height: 1.15; letter-spacing: -0.01em;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.in-hero__sub { margin: 24px auto 0; max-width: 724px; font-size: 24px; line-height: 27px; color: var(--arx-white); }

.in-busca { position: relative; margin: 44px auto 0; max-width: 757px; }
.in-busca input {
  width: 100%; height: 64px; padding: 0 60px 0 26px; border-radius: 12px;
  background: rgba(10,12,20,.72); border: 1px solid var(--arx-blue);
  backdrop-filter: blur(10px);
  color: var(--arx-white); font-family: var(--arx-font); font-size: 16px;
}
.in-busca input::placeholder { color: var(--arx-grey-50); }
.in-busca input:focus-visible { outline: 2px solid var(--arx-blue-border); outline-offset: 2px; }
.in-busca button {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; color: var(--arx-grey-70); cursor: pointer;
}
.in-busca button svg { width: 22px; height: 22px; }
.in-busca button:hover { color: var(--arx-white); }

/* ---- Materiais em destaque (nós 387:401 e 388:2145) ----
   Os dois cards são o mesmo componente Background+Blur do resto da página.
   O da esquerda tem a copy à esquerda e o mockup à direita, com um halo azul
   por trás dele; o da direita tem o mockup no topo, esmaecendo para o fundo.
   As medidas do Figma (cards de 784 e 451 num container de 1265) viram
   proporções, para escalarem com o container de 1440 do site. */
.in-dest { padding-block: 0 96px; }
.in-dest__grid { display: grid; grid-template-columns: 784fr 451fr; gap: 30px; }
.in-dest__card { position: relative; overflow: hidden; min-height: 512px; }
.in-dest__card--alto { padding-bottom: 51px; }        /* 512 - 461 do nó 389:2248 */
.in-dest__card--largo { display: grid; grid-template-columns: 1fr 40%; align-items: center; padding-block: 59px 51px; }
/* z-index 3: a copy do card alto sobe por cima do esmaecimento do mockup
   (que é ::after com z-index 2) — senão o título entra por baixo dele. */
.in-dest__copy { position: relative; z-index: 3; }
.in-dest__card--largo .in-dest__copy { padding: 0 0 0 6.8%; }   /* 53 de 784 */

.in-dest__olho {
  display: block; font-size: 20px; line-height: 16.1px; letter-spacing: .64px;
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--arx-blue);
}
.in-dest__tit { margin-top: 26px; font-size: 36px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.in-dest__rot { margin-top: 18px; font-size: 18px; line-height: 27px; color: rgba(255,255,255,.58); }
.in-dest__txt { margin-top: 16px; max-width: 371px; font-size: 20px; line-height: 27px; color: var(--arx-white); }
.in-dest__card .arx-btn { margin-top: 28px; }

.in-dest__arte { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.in-dest__arte img { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 402px; width: auto; }
/* halo por trás do mockup — no Figma é uma elipse de 344x130 muito borrada,
   colada na base do livro. */
.in-dest__luz {
  position: absolute; z-index: 0; left: 50%; bottom: 12%;
  width: 78%; aspect-ratio: 344 / 130; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(21,116,255,.55), rgba(21,116,255,.18) 45%, transparent 72%);
  filter: blur(18px);
}

.in-dest__card--alto { display: flex; flex-direction: column; text-align: center; }
.in-dest__arte--topo { align-self: auto; margin: 18px 0 0; height: 290px; }
.in-dest__arte--topo img { max-height: 290px; }
/* o mockup esmaece na base, para o título nascer do fundo do card */
.in-dest__arte--topo::after {
  content: ""; position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0) 0%, #101011 86%);
}
.in-dest__card--alto .in-dest__copy { margin-top: -46px; padding-inline: 8%; }
.in-dest__card--alto .in-dest__txt { max-width: none; margin-inline: auto; }
.in-dest__card--alto .arx-btn { margin-inline: auto; }

/* ---- Centro de Recursos (nó 390:2253) ----
   Card de 297x286 com aro de 1px em gradiente — o mesmo recurso de aro da
   casa, aqui com as paradas do Figma: #1574ff na quina superior esquerda,
   morrendo em rgba(112,112,112,.2) a 24%. Miolo #1b1b1b, raio 10,
   recuo 24 e 40 de respiro em cima e embaixo. */
.in-rec-sec { padding-block: 96px; position: relative; overflow-x: clip; }
/* Halos da camada Luz do arquivo. São duas elipses de #1574FF com blur 150,
   e a receita aqui é a mesma — elipse sólida + filter: blur —, não um
   radial-gradient aproximado. Posição e tamanho medidos no SVG da camada e
   convertidos para a caixa da grade:

     Ellipse 10_2  centro (914,1810)  657x247  alfa 1     → dentro da grade
     Ellipse 11    centro (1896,2405) 680x475  alfa 0,42  → borda direita, abaixo

   Ficam ATRÁS dos cards, que são opacos: o halo aparece nos vãos e ao redor,
   como no comp. */
.in-rec__grid { position: relative; }
.in-rec__luz {
  position: absolute; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(21,116,255,var(--a));
  filter: blur(150px);
}
.in-rec__luz--a { left: 46.4%; top: 45.6%; width: 657px; height: 247px; --a: 1; }
.in-rec__luz--b { left: 123.8%; top: 145.4%; width: 680px; height: 475px; --a: .42; }
.in-rec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.in-rec__h2 { margin-top: 14px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.in-rec__lead { max-width: 349px; font-size: 16px; line-height: 27px; color: var(--arx-grey-70); }
/* auto-fit: a vitrine tinha oito cards em quatro colunas; com três, quatro
   colunas deixavam um buraco na direita. Assim ela acompanha quantos forem. */
.in-rec__grid {
  margin-top: 56px; display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.in-rec {
  position: relative; display: flex; flex-direction: column;
  min-height: 286px; padding: 1px; border-radius: 10px;
  background: linear-gradient(128.75deg, #1574ff 0%, rgba(112,112,112,.2) 24%);
}
.in-rec__miolo {
  flex: 1; display: flex; flex-direction: column;
  padding: 40px 24px; border-radius: 10px; background: #1b1b1b;
}
/* No hover só o feixe: sem deslocar o card e sem trocar a cor do miolo. */
/* Feixe de hover da casa: aro em conic-gradient girando na borda — mesmo
   efeito de .arx-card-svc, .mo-dia__passo e .cv-con-card. O @property
   --arx-beam vive no base.css, que é quem torna o ângulo animável.
   O halo difuso que estava aqui antes não é da linguagem da casa. */
.in-rec::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--arx-beam),
    transparent 0deg, transparent 78%,
    rgba(88,150,255,.55) 88%, rgba(160,200,255,.85) 92%, rgba(88,150,255,.55) 96%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--arx-ease); pointer-events: none;
}
.in-rec:hover::after { opacity: 1; animation: arx-beam-spin 3.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .in-rec:hover::after { animation: none; opacity: .5; }
}
.in-rec__ico { display: block; align-self: flex-start; width: auto; height: 57px; color: var(--arx-blue); }
.in-rec__nome { margin-top: auto; padding-top: 32px; font-size: 24px; line-height: 28px; font-weight: var(--fw-semibold); color: var(--arx-white); }
.in-rec__desc { margin-top: 20px; font-size: 14px; line-height: 18px; color: rgba(255,255,255,.6); }
.in-rec__mais {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; line-height: 18px; color: var(--arx-blue);
}
.in-rec__mais svg { width: 9px; height: 9px; }
.in-rec__acao { margin-top: 44px; display: flex; justify-content: center; }

html.arx-anim .in-rec {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--arx-ease), transform .55s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.arx-anim .in-rec__grid.is-revealed .in-rec { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .in-rec { opacity: 1; transform: none; transition: none; }
}

/* ---- últimos conteúdos ---- */
/* Faixa dos Últimos conteúdos. O fundo do arquivo é rgba(20,20,105,.54) sobre
   o #151515 da página, o que compõe exatamente o navy #151543 que a home já
   usa nos Boletins — mesma cor, mesma aba no topo. */
.in-ult { padding-block: 96px; position: relative; overflow: visible; background: #151543; }
.in-ult > .arx-container { position: relative; z-index: 1; }
.in-ult__head { text-align: center; }
.in-ult__h2 { margin-top: 14px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
/* Abas (nó 392:9192). A moldura é o Background+Blur da casa com a textura a
   50%: borda 1px #1574ff e raio 20, recuo 29 à esquerda e 34 à direita.
   As pastilhas têm 30,4px de altura e raio 10 — a ativa é #1574ff CHEIO e sem
   borda, as demais são contorno azul sobre transparente. */
.in-abas {
  margin: 34px auto 0; width: fit-content;
  display: flex; gap: 14px;
  padding: 16px 34px 19px 29px;
  border-radius: 20px; border: 1px solid var(--arx-blue);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(28,33,42,.5) 0%, rgba(17,19,23,.5) 38%, transparent 72%),
    linear-gradient(180deg, rgba(14,16,19,.5) 0%, rgba(9,9,11,.5) 46%, rgba(19,19,19,.5) 100%);
}
.in-abas__btn {
  /* 30 de recuo + min-width 132 reproduz as três larguras do arquivo:
     Formato e Missão batem no mínimo (132) e Módulo Civitas fecha em 173. */
  min-width: 132px; height: 30.4px; padding-inline: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--arx-blue); background: none;
  font-family: var(--arx-font); font-size: 16px; line-height: 27px;
  color: var(--arx-white); cursor: pointer;
  transition: background-color .3s var(--arx-ease), border-color .3s var(--arx-ease);
}
.in-abas__btn:hover { background: rgba(21,116,255,.22); }
.in-abas__btn.is-on { background: var(--arx-blue); border-color: transparent; }
.in-ult__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 42px; }

/* ---- Faixa do Blog ARX CYBER (nó 392:9425) ----
   Banda #1574ff com uma aba em cada ponta: em cima o navy da seção anterior
   desce para dentro do azul; embaixo o #151515 da seguinte sobe. É a mesma
   peça de 374x54 do resto do site, espelhada no topo. */
.in-blog { padding-block: 114px 152px; position: relative; overflow: hidden; background: var(--arx-blue-section); }
.in-blog > .arx-container { position: relative; z-index: 1; }
.in-blog__aba {
  position: absolute; left: 50%; width: 374px; height: 54px;
  z-index: 2; pointer-events: none; display: block;
}
.in-blog__aba--topo { top: 0; transform: translateX(-50%) scaleY(-1); }
.in-blog__aba--base { bottom: 0; transform: translateX(-50%); }

.in-blog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.in-blog__h2 { margin-top: 14px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.in-blog__sub { margin-top: 14px; font-size: 20px; line-height: 27px; color: var(--arx-white); }
.in-blog__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }
/* dentro da faixa azul o card perde o halo azul e o texto ganha contraste */
.in-blog .pcard__capa { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.in-blog .pcard__resumo { color: rgba(255,255,255,.85); }
.in-blog .arx-eyebrow { color: #cfe0ff; }
.in-blog .pcard__cat { color: var(--arx-white); }
/* botões: o do cabeçalho é o claro do arquivo; os dos cards, contorno branco —
   o azul da marca desapareceria dentro da própria faixa azul. */
.in-blog .pcard__btn {
  background-image: none; background: none;
  border: 2px solid #fff; color: var(--arx-white);
}
.in-blog .pcard__btn::before, .in-blog .pcard__btn::after { content: none; }
.in-blog .pcard__btn:hover { background: rgba(255,255,255,.14); }

/* ---- Glossário (nós 393:10077 e 407:12370) ----
   Pastilhas de 315x71 com raio 30 — o mesmo Background+Blur da página.
   O par ícone+texto é CENTRALIZADO: o grupo 407:12379 está em left: 50% com
   translate(-50%). Os 58 e 105 do arquivo são só onde "Ransomware", o termo
   mais longo, calha de cair — num termo curto o conjunto anda para o meio.
   ============================================================ */
.in-glos { padding-block: 96px; position: relative; overflow-x: clip; }
.in-glos__head { text-align: center; }
.in-glos__h2 { margin-top: 14px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.in-glos__sub { margin-top: 14px; font-size: 20px; line-height: 23px; color: var(--arx-white); }
.in-glos__grid { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px; }
.in-glos__termo {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  height: 71px; padding-inline: 24px; border-radius: 30px;
  font-size: 24px; line-height: 22.4px; color: var(--arx-white);
  transition: background-color .3s var(--arx-ease);
}
.in-glos__termo svg { width: 37px; height: 40px; flex: none; color: var(--arx-blue); }
.in-glos__termo:hover { background-color: rgba(21,116,255,.14); }
.in-glos__acao { margin-top: 40px; display: flex; justify-content: center; }

/* ============================================================
   SINGLE — artigo
   ============================================================ */
.art-hero { position: relative; padding: calc(var(--arx-header-h) + 20px) 0 60px; overflow: hidden; }
.art-hero__bg { position: absolute; inset: 0; background: linear-gradient(168deg, #101828 0%, #14161c 62%, #151515 100%); }
.art-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.art-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 380px at 20% 0%, rgba(21,116,255,.28), transparent 70%);
}
.art-hero__inner { position: relative; z-index: 1; --leitura: 900px; }
.art-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--arx-grey-50); }
.art-crumbs a { color: var(--arx-grey-70); }
.art-crumbs a:hover { color: var(--arx-blue-border); }
.art-cat {
  display: inline-block; margin-top: 24px;
  font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--arx-blue-border);
}
.art-titulo {
  margin-top: 14px;
  font-size: clamp(30px, 2.7083vw, 52px); line-height: 1.16; letter-spacing: -0.01em;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.art-meta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-size: 15px; color: var(--arx-grey-70); }
.art-meta__autor { display: inline-flex; align-items: center; gap: 10px; color: var(--arx-white); }
.art-meta__autor img { width: 28px; height: 28px; object-fit: contain; }

.art-capa {
  position: relative; max-width: var(--arx-container); margin: -30px auto 0;
  padding-inline: var(--arx-gutter);
}
.art-capa img, .art-capa__ph {
  position: relative; inset: auto; display: block;
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(21,116,255,.25), 0 40px 90px -50px rgba(0,0,0,.9);
}

.art-corpo { padding-block: 76px 96px; }
.art-corpo__grid, .evt-corpo__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start;
}
/* A tampa de leitura vai nos FILHOS, não no .arx-container: o container tem
   margin-inline:auto, então um max-width nele centraliza o bloco e a copy
   deixa de nascer na guia de 1440 que o resto da página usa. */
.art-hero__inner > *, .evt-hero__inner > *, .cs-topo__inner > * { max-width: var(--leitura, 900px); }
/* medida de leitura: ~72 caracteres na fonte do corpo */
.art-conteudo { max-width: 760px; font-size: 17px; line-height: 30px; color: var(--arx-grey-90); }
.art-conteudo > * + * { margin-top: 22px; }
.art-lead { font-size: 20px; line-height: 33px; color: var(--arx-white); }
.art-conteudo h2 {
  margin-top: 48px; font-size: 30px; line-height: 38px;
  font-weight: var(--fw-semibold); color: var(--arx-white);
}
.art-conteudo h3 {
  margin-top: 36px; font-size: 21px; line-height: 29px;
  font-weight: var(--fw-semibold); color: var(--arx-blue-border);
}
.art-conteudo ul, .art-conteudo ol { padding-left: 22px; display: grid; gap: 10px; }
.art-conteudo li::marker { color: var(--arx-blue); }
.art-conteudo blockquote {
  margin-top: 30px; padding: 22px 28px; border-left: 3px solid var(--arx-blue);
  background: rgba(21,116,255,.06); border-radius: 0 12px 12px 0;
  font-size: 19px; line-height: 30px; color: var(--arx-white);
}
.art-conteudo a { color: var(--arx-blue-border); text-decoration: underline; text-underline-offset: 3px; }

.art-tags { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.art-tags a {
  padding: 8px 16px; border-radius: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  font-size: 13px; color: var(--arx-grey-90);
}
.art-tags a:hover { border-color: var(--arx-blue); color: var(--arx-white); }

.art-autor {
  margin-top: 40px; display: flex; gap: 20px; align-items: flex-start;
  padding: 26px 28px; border-radius: 16px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09);
}
.art-autor img { width: 46px; height: 46px; flex: none; object-fit: contain; }
.art-autor b { display: block; font-size: 16px; color: var(--arx-white); }
.art-autor p { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--arx-grey-70); }

.art-side__sticky { position: sticky; top: calc(var(--arx-header-h) - 60px); display: grid; gap: 24px; }
.art-sumario, .art-share, .art-cta-lateral, .evt-form {
  padding: 24px 26px; border-radius: 16px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09);
}
.art-sumario b, .art-share b, .art-cta-lateral b, .evt-form__tit {
  display: block; font-size: 15px; font-weight: var(--fw-semibold); color: var(--arx-white);
}
.art-sumario ol { margin-top: 14px; padding-left: 18px; display: grid; gap: 10px; }
.art-sumario a { font-size: 14px; line-height: 21px; color: var(--arx-grey-70); }
.art-sumario a:hover { color: var(--arx-blue-border); }
.art-sumario li::marker { color: var(--arx-blue); font-variant-numeric: tabular-nums; }
.art-share__links { margin-top: 14px; display: flex; gap: 12px; }
.art-share__links a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); color: var(--arx-grey-90);
  transition: border-color .3s var(--arx-ease), color .3s var(--arx-ease);
}
.art-share__links a:hover { border-color: var(--arx-blue); color: var(--arx-white); }
.art-share__links svg { width: 20px; height: 20px; }
.art-cta-lateral { background: rgba(21,116,255,.06); border-color: rgba(21,116,255,.3); }
.art-cta-lateral p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--arx-grey-90); }
.art-cta-lateral .arx-btn { margin-top: 18px; }

.art-rel { padding-block: 0 96px; }
.art-rel__head { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.art-rel__h2 { font-size: 34px; line-height: 42px; font-weight: var(--fw-regular); color: var(--arx-white); }
.art-rel__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }

/* ============================================================
   SINGLE — evento
   ============================================================ */
.evt-hero { position: relative; padding: calc(var(--arx-header-h) + 20px) 0 70px; overflow: hidden; }
.evt-hero__bg { position: absolute; inset: 0; background: linear-gradient(168deg, #0d1730 0%, #14161c 62%, #151515 100%); }
.evt-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 75% 0%, rgba(21,116,255,.3), transparent 70%);
}
.evt-hero__inner { position: relative; z-index: 1; --leitura: 980px; }
.evt-selo {
  display: inline-block; margin-top: 24px; padding: 8px 18px; border-radius: 20px;
  background: rgba(21,116,255,.16); border: 1px solid var(--arx-blue);
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--arx-white);
}
.evt-titulo {
  margin-top: 18px;
  font-size: clamp(30px, 2.5vw, 48px); line-height: 1.17; letter-spacing: -0.01em;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.evt-lead { margin-top: 18px; max-width: 720px; font-size: 18px; line-height: 28px; color: var(--arx-grey-90); }

.evt-dados {
  margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  max-width: 860px;
}
.evt-dado {
  /* flex-start, não center: a data ocupa duas linhas e centralizar
     desalinharia o ícone dela em relação aos outros três cartões. */
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10);
}
.evt-dado svg { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--arx-blue); }
.evt-dado span { display: flex; flex-direction: column-reverse; gap: 3px; font-size: 12px; color: var(--arx-grey-50); }
.evt-dado b { font-size: 15px; font-weight: var(--fw-semibold); color: var(--arx-white); }
.evt-acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

.evt-video { padding-block: 0; margin-top: -40px; position: relative; z-index: 2; }
.evt-player {
  position: relative; aspect-ratio: 16 / 8; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(21,116,255,.3), 0 50px 110px -60px rgba(0,0,0,.95);
}
.evt-player img { width: 100%; height: 100%; object-fit: cover; }
.evt-player::after {
  content: ""; position: absolute; inset: 0; background: rgba(6,8,14,.35); pointer-events: none;
}
.evt-player__play {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(21,116,255,.9); border: 2px solid var(--arx-blue-border); cursor: pointer;
  box-shadow: 0 0 40px -6px rgba(21,116,255,.9);
  transition: transform .3s var(--arx-ease);
}
.evt-player__play:hover { transform: translate(-50%, -50%) scale(1.07); }
.evt-player__play svg { width: 32px; height: 32px; color: #fff; margin-left: 4px; }

.evt-corpo { padding-block: 76px 96px; }
.evt-prog { margin-top: 22px; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 760px; }
.evt-prog li {
  display: flex; gap: 20px; align-items: baseline;
  padding: 16px 20px; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08);
}
.evt-prog b { flex: none; width: 62px; font-variant-numeric: tabular-nums; color: var(--arx-blue-border); }
.evt-prog span { font-size: 15px; line-height: 23px; color: var(--arx-grey-90); }

.evt-palestrantes { margin-top: 48px; max-width: 760px; }
.evt-palestrantes h2 { font-size: 30px; line-height: 38px; font-weight: var(--fw-semibold); color: var(--arx-white); }
.evt-pal__grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.evt-pal {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 14px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09);
}
.evt-pal img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.evt-pal b { display: block; font-size: 15px; color: var(--arx-white); }
.evt-pal span { font-size: 13px; color: var(--arx-grey-70); }

.evt-form { display: grid; gap: 12px; }
.evt-form__sub { font-size: 14px; line-height: 21px; color: var(--arx-grey-70); }
.evt-form input {
  height: 46px; padding: 0 16px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  color: var(--arx-white); font-family: var(--arx-font); font-size: 15px;
}
.evt-form input::placeholder { color: var(--arx-grey-50); }
.evt-form input:focus-visible { outline: 2px solid var(--arx-blue-border); outline-offset: 2px; }
.evt-form .arx-btn { width: 100%; justify-content: center; }
.evt-form__nota { font-size: 12px; line-height: 18px; color: var(--arx-grey-50); }

/* ============================================================
   CASES — listagem e single
   Estrutura da brasiline.com.br/cases e /cases/grupo-morada,
   na linguagem da casa.
   ============================================================ */
.cs-hero { position: relative; padding: calc(var(--arx-header-h) + 40px) 0 70px; overflow: hidden; }
.cs-hero__luz {
  position: absolute; z-index: 0; left: 50%; top: -140px;
  width: 900px; height: 480px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(21,116,255,.34), rgba(21,116,255,.10) 45%, transparent 72%);
}
.cs-hero__inner { position: relative; z-index: 1; text-align: center; }
.cs-hero__title {
  margin-top: 20px;
  font-size: clamp(32px, 3.5417vw, 68px); line-height: 1.09; letter-spacing: -0.01em;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.cs-hero__sub { margin: 20px auto 0; max-width: 724px; font-size: 20px; line-height: 30px; color: var(--arx-grey-90); }

.cs-lista { padding-block: 0 96px; position: relative; overflow-x: clip; }
.cs-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cs-filtros__btn {
  height: 42px; padding-inline: 24px; border-radius: 21px;
  font-family: var(--arx-font); font-size: 15px; color: var(--arx-white); cursor: pointer;
  transition: background-color .3s var(--arx-ease);
}
.cs-filtros__btn:hover { background-color: rgba(21,116,255,.18); }
.cs-filtros__btn.is-on { background: var(--arx-blue); border-color: transparent; }

/* Seletor do celular: a fileira de sete pílulas não cabe em 375px. O <select>
   nativo abre a lista do sistema, que é melhor que qualquer menu nosso no
   toque. Só um dos dois aparece por vez. */
.cs-select { display: none; position: relative; border-radius: 24px; }
.cs-select select {
  width: 100%; height: 48px; padding: 0 46px 0 20px;
  background: none; border: 0; appearance: none;
  font-family: var(--arx-font); font-size: 15px; color: var(--arx-white);
}
.cs-select select option { background: #14161c; color: var(--arx-white); }
.cs-select svg {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--arx-blue); pointer-events: none;
}

.cs-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 42px; }
.cs-grid--rel { margin-top: 44px; }
.cs-vazio { margin-top: 52px; text-align: center; font-size: 16px; color: var(--arx-grey-70); }

.ccard { display: flex; flex-direction: column; }
.ccard__capa {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 390 / 240; overflow: hidden;
  border-radius: var(--r-small-xxl); background: #0c0c0c;
  box-shadow: 0 0 0 1px rgba(21,116,255,.25), 0 18px 50px -24px rgba(21,116,255,.55);
}
.ccard__ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(21,116,255,.22), transparent 60%),
    linear-gradient(160deg, #14203a, #0b0b0b);
}
/* a marca do cliente é o assunto do card: entra em branco, sem competir com o fundo */
.ccard__logo {
  position: relative; z-index: 1; max-width: 58%; max-height: 46%;
  object-fit: contain; filter: brightness(0) invert(1); opacity: .92;
  transition: transform .45s var(--arx-ease);
}
.ccard:hover .ccard__logo { transform: scale(1.05); }
.ccard__seg {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  display: inline-flex; align-items: center; height: 34px; padding-inline: 16px;
  font-size: 13.5px; letter-spacing: -.24px; color: var(--arx-white);
}
.ccard__titulo { margin-top: 22px; font-size: 22px; line-height: 28px; font-weight: var(--fw-semibold); }
.ccard__titulo a { color: var(--arx-white); transition: color .3s var(--arx-ease); }
.ccard__titulo a:hover { color: var(--arx-blue-border); }
.ccard__resumo { margin-top: 12px; flex: 1; font-size: 15px; line-height: 23px; color: var(--arx-grey-70); }
.ccard__btn { margin-top: 22px; align-self: flex-start; }

html.arx-anim .ccard {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--arx-ease), transform .6s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.arx-anim .is-revealed .ccard { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .ccard { opacity: 1; transform: none; transition: none; }
}

/* ---- single ---- */
.cs-topo { position: relative; padding: calc(var(--arx-header-h) + 20px) 0 60px; overflow: hidden; }
/* o degradê fecha no #151515 da página: terminando em #0a0b10 ele marcava
   uma emenda visível onde o topo encontra o corpo */
.cs-topo__bg { position: absolute; inset: 0; background: linear-gradient(168deg, #101828 0%, #14161c 62%, #151515 100%); }
.cs-topo__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 380px at 22% 0%, rgba(21,116,255,.28), transparent 70%);
}
.cs-topo__inner { position: relative; z-index: 1; --leitura: 940px; }
.cs-topo__logo { display: block; height: 46px; width: auto; margin-top: 26px; filter: brightness(0) invert(1); }
.cs-topo__seg {
  display: inline-block; margin-top: 22px;
  font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--arx-blue-border);
}
.cs-topo__titulo {
  margin-top: 12px;
  font-size: clamp(30px, 2.7083vw, 52px); line-height: 1.16; letter-spacing: -0.01em;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.cs-corpo { padding-block: 76px 96px; }
.cs-corpo__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }

.cs-depo {
  margin: 48px 0 0; padding: 32px 36px; border-radius: 16px;
  background: rgba(21,116,255,.06); border: 1px solid rgba(21,116,255,.3);
  display: grid; grid-template-columns: 116px 1fr; gap: 28px; align-items: start;
}
.cs-depo__foto {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(21,116,255,.45);
}
.cs-depo__foto img { width: 100%; height: 100%; object-fit: cover; }
.cs-depo__ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(21,116,255,.35), transparent 62%),
    linear-gradient(160deg, #14203a, #0b0b0b);
}
.cs-depo__aspas { display: block; width: 30px; height: 22px; color: var(--arx-blue); }
.cs-depo blockquote { margin: 14px 0 0; font-size: 19px; line-height: 30px; color: var(--arx-white); }
.cs-depo figcaption { margin-top: 18px; display: flex; flex-direction: column; }
.cs-depo b { font-size: 15px; color: var(--arx-white); }
.cs-depo span { margin-top: 2px; font-size: 14px; color: var(--arx-grey-70); }

.cs-tec { margin-top: 48px; }
.cs-tec h2 { font-size: 30px; line-height: 38px; font-weight: var(--fw-semibold); color: var(--arx-white); }
.cs-tec__grid { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.cs-tec__item {
  display: inline-flex; align-items: center; height: 46px; padding-inline: 22px;
  border-radius: 23px; font-size: 15px; color: var(--arx-white);
}


/* ============================================================
   BOLETINS — listagem e single
   Estrutura da brasiline.com.br/boletins-de-ciberseguranca.
   É blog em formato de boletim: periódico, com edição e mês.
   ============================================================ */
.bo-hero { position: relative; padding: calc(var(--arx-header-h) + 40px) 0 70px; overflow: hidden; }
.bo-hero__luz {
  position: absolute; z-index: 0; left: 50%; top: -160px;
  width: 900px; height: 500px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(21,116,255,.32), rgba(21,116,255,.10) 45%, transparent 72%);
}
.bo-hero__inner { position: relative; z-index: 1; text-align: center; }
.bo-hero__title {
  margin-top: 20px;
  font-size: clamp(32px, 3.5417vw, 68px); line-height: 1.09; letter-spacing: -0.01em;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.bo-hero__sub { margin: 20px auto 0; max-width: 724px; font-size: 20px; line-height: 30px; color: var(--arx-grey-90); }
.bo-hero__form { margin: 34px auto 0; max-width: 560px; display: flex; gap: 14px; }
.bo-hero__form input {
  flex: 1; min-width: 0; height: 52px; padding: 0 22px; border-radius: 26px;
  color: var(--arx-white); font-family: var(--arx-font); font-size: 15px;
}
.bo-hero__form input::placeholder { color: var(--arx-grey-50); }
.bo-hero__form input:focus-visible { outline: 2px solid var(--arx-blue-border); outline-offset: 3px; }

/* Canal do WhatsApp — os dois caminhos de inscrição no mesmo lugar, como no
   legado. O verde fica só no glifo: é o que torna o canal reconhecível sem
   trazer uma cor de fora da paleta para dentro do botão. */
.bo-hero__ou {
  margin: 22px auto 0; max-width: 560px;
  display: flex; align-items: center; gap: 16px;
  color: var(--arx-grey-50); font-size: 13px;
}
.bo-hero__ou::before, .bo-hero__ou::after { content: ""; flex: 1; height: 1px; }
.bo-hero__ou::before { background: linear-gradient(90deg, transparent, #1e2a3d); }
.bo-hero__ou::after  { background: linear-gradient(90deg, #1e2a3d, transparent); }

.bo-hero__zap {
  margin: 18px auto 0; height: 52px; padding: 0 26px; border-radius: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--arx-white); font-size: 15px; text-decoration: none;
  transition: border-color .25s ease;
}
.bo-hero__zap svg { width: 18px; height: 18px; fill: #25d366; flex: none; }
.bo-hero__zap:hover, .bo-hero__zap:focus-visible { border-color: #25d366; }

.bo-dest { padding-block: 0 96px; }
.bo-lista { padding-block: 0 96px; position: relative; overflow-x: clip; }
.bo-lista__h2 { margin-top: 14px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.bo-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 42px; }

.bcard { display: flex; flex-direction: column; }
.bcard__capa {
  position: relative; display: block; aspect-ratio: 390 / 240; overflow: hidden;
  border-radius: var(--r-small-xxl); background: #0c0c0c;
  box-shadow: 0 0 0 1px rgba(21,116,255,.25), 0 18px 50px -24px rgba(21,116,255,.55);
}
.bcard__ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(21,116,255,.32), transparent 60%),
    linear-gradient(160deg, #14203a, #0b0b0b);
}
/* a edição é o que identifica o boletim: fica na capa, como a categoria no blog */
.bcard__ed {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  display: inline-flex; align-items: center; height: 34px; padding-inline: 16px;
  font-size: 13.5px; letter-spacing: -.24px; color: var(--arx-white);
}
.bcard__mes { display: block; margin-top: 20px; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--arx-blue-border); }
.bcard__titulo { margin-top: 8px; font-size: 20px; line-height: 29px; font-weight: var(--fw-semibold); }
.bcard__titulo a { color: var(--arx-white); transition: color .3s var(--arx-ease); }
.bcard__titulo a:hover { color: var(--arx-blue-border); }
.bcard__resumo { margin-top: 12px; flex: 1; font-size: 15px; line-height: 23px; color: var(--arx-grey-70); }
.bcard__btn { margin-top: 22px; align-self: flex-start; }

/* A edição mais recente ocupa a faixa inteira, com a capa ao lado do texto.
   Os cinco filhos são irmãos diretos: num grid de duas colunas cairiam um por
   célula. A capa fica na coluna 1 e o texto empilha na 2 — sem wrapper, para o
   destaque e o card normal seguirem com o mesmo markup.

   As duas linhas 1fr nas pontas são o que centra o texto. A capa é mais alta
   que o bloco de texto, e a sobra precisa escoar igual para cima e para baixo;
   sem elas o Chrome despeja a folga toda na primeira linha e o texto desce até
   o pé do card, que foi como isto estava. */
.bcard--destaque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto auto auto 1fr;
  column-gap: 44px; padding: 28px; border-radius: 20px;
  background: rgba(255,255,255,.022); border: 1px solid rgba(21,116,255,.34);
}
.bcard--destaque .bcard__capa {
  grid-column: 1; grid-row: 1 / -1; align-self: center; aspect-ratio: 16 / 10;
}
.bcard--destaque .bcard__mes    { grid-column: 2; grid-row: 2; margin-top: 0; }
.bcard--destaque .bcard__titulo { grid-column: 2; grid-row: 3; font-size: 30px; line-height: 38px; }
.bcard--destaque .bcard__resumo { grid-column: 2; grid-row: 4; flex: none; margin-top: 14px; font-size: 16px; line-height: 25px; }
/* no grid quem alinha na horizontal é justify-self: o align-self do card
   normal (flex) não vale aqui, e o botão esticava a coluna toda */
.bcard--destaque .bcard__btn    { grid-column: 2; grid-row: 5; justify-self: start; margin-top: 22px; }

html.arx-anim .bcard {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--arx-ease), transform .6s var(--arx-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.arx-anim .is-revealed .bcard, html.arx-anim .is-revealed.bcard { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.arx-anim .bcard { opacity: 1; transform: none; transition: none; }
}

.bo-selo {
  display: inline-block; margin-top: 24px; padding: 8px 18px; border-radius: 20px;
  background: rgba(21,116,255,.16); border: 1px solid var(--arx-blue);
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--arx-white);
}
.bo-assina { padding: 24px 26px; border-radius: 16px; }
.bo-assina b { display: block; font-size: 15px; font-weight: var(--fw-semibold); color: var(--arx-white); }
.bo-assina p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--arx-grey-70); }
.bo-assina form { margin-top: 16px; display: grid; gap: 12px; }
.bo-assina input {
  height: 44px; padding: 0 16px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  color: var(--arx-white); font-family: var(--arx-font); font-size: 15px;
}
.bo-assina input::placeholder { color: var(--arx-grey-50); }
.bo-assina .arx-btn { width: 100%; justify-content: center; }