/* =========================================================
   Blog do Saga — estilos compartilhados (listagem + post)
   Herda os tokens do index.html: navy #171D24, dourado #c8a97e,
   creme #f5f5f2, PP Neue Montreal + Cormorant Garamond.
   ========================================================= */

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/ppneuemontreal-book.woff2') format('woff2');
  font-display: swap; font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/ppneuemontreal-medium.woff2') format('woff2');
  font-display: swap; font-weight: 500; font-style: normal;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/ppneuemontreal-bold.woff2') format('woff2');
  font-display: swap; font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/ppneuemontreal-italic.woff2') format('woff2');
  font-display: swap; font-weight: 400; font-style: italic;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #171D24;
  --gold:   #c8a97e;
  --cream:  #f5f5f2;
  --ink:    #1a1a1a;
  --body:   #3f4854;
  --muted:  #677483;
  --line:   #181e2529;
}

html { scroll-behavior: auto; }

body {
  background: var(--cream);
  color: var(--body);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: rgba(200,169,126,.28); color: var(--ink); }

/* ── Barra de progresso de leitura ── */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gold);
  z-index: 60;
  pointer-events: none;
}

/* =========================================================
   Cabecalho navy (nav + titulo)
   ========================================================= */
.blogtop {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}

.blogtop-grain {
  position: absolute;
  inset: 0;
  background-image: url('/noise.webp');
  background-size: 300px 300px;
  opacity: .38;
  pointer-events: none;
  z-index: 1;
}

.blogtop-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 120%;
  height: 150%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 50% 45% at 50% 0%, rgba(200,169,126,.14) 0%, rgba(200,169,126,0) 70%),
    radial-gradient(ellipse 60% 50% at 15% 100%, rgba(200,169,126,.07) 0%, rgba(200,169,126,0) 70%);
  pointer-events: none;
  z-index: 1;
}

.blogtop > *:not(.blogtop-grain):not(.blogtop-glow):not(.blogtop-bg):not(.blogtop-veil) {
  position: relative;
  z-index: 2;
}

/* ── Fundo do topo — so na home do blog (.blogtop-home) ──
   Os posts continuam com o navy chapado: ali a capa do artigo ja carrega a
   imagem e duas fotos empilhadas competiriam entre si. */
/* mais alta que o cabecalho e deslocada para cima: a sobra e o curso do
   paralaxe. Sem ela, rolar a pagina mostraria a borda da imagem. */
.blogtop-bg {
  position: absolute;
  top: -18%;
  left: 0;
  width: 100%;
  height: 136%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  z-index: 0;
  /* mesmo tratamento das outras fotos do site */
  filter: saturate(.62) contrast(1.03);
  will-change: transform;
}

/* mascara navy: pesada onde o texto passa (esquerda), mais leve a direita,
   onde a pintura pode aparecer sem atrapalhar a leitura */
.blogtop-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(23,29,36,.34) 0%,
      rgba(23,29,36,.12) 42%,
      rgba(23,29,36,.58) 100%),
    linear-gradient(95deg,
      rgba(23,29,36,.93) 0%,
      rgba(23,29,36,.88) 34%,
      rgba(23,29,36,.66) 62%,
      rgba(23,29,36,.46) 100%);
}

/* ── Nav ── */
/* mesma largura do conteudo: o logo comeca na margem do titulo e o botao
   termina na margem direita do texto, nao na borda da tela. O padding de 56px
   tem que ser igual ao do .index-head/.post-head — o 70% e calculado depois
   dele, entao sem esse padding o nav fica ~40px mais a esquerda. */
nav {
  display: flex;
  justify-content: center;
  padding: 28px 56px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 70%;
  max-width: 1400px;
}

/* filete de ponta a ponta abaixo do logo e do botao — so na home do blog.
   Fica em cima da pintura, entao a cor e quase transparente. O respiro
   abaixo do logo e o mesmo de cima (os 28px do padding do nav). */

.nav-rule {
  width: 100%;
  height: 1px;
  background: rgba(240,235,227,.10);
}

.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 46px; width: auto; display: block; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  color: #f0ebe3;
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
  border: 1px solid rgba(240,235,227,.25);
  padding: 12px 28px;
  border-radius: 2px;
  background: rgba(240,235,227,.04);
  transition:
    background .35s cubic-bezier(.4,0,.2,1),
    border-color .35s cubic-bezier(.4,0,.2,1);
}
.nav-cta:hover { background: rgba(200,169,126,.12); border-color: rgba(200,169,126,.5); }
.nav-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Pill (mesmo do .about-label, versao escura) ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  color: #f0ebe3;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 8px 20px;
  width: fit-content;
}
.pill-icon { font-size: 15px; color: var(--gold); line-height: 1; display: flex; }

/* versao sobre fundo creme — mesmo desenho do botao "Ver todos os textos"
   da home: 1,5px de borda dourada, raio total, texto escuro */
.pill-claro { color: var(--ink); font-weight: 400; }

/* ── Voltar ── */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,235,227,.6);
  text-decoration: none;
  /* animava `gap`, que recalcula layout a cada quadro e sai em degraus —
     agora quem se move e a seta, por transform. Mesma curva dos botoes
     do site: .3s cubic-bezier(.4,0,.2,1) */
  transition: color .3s cubic-bezier(.4,0,.2,1);
}
.backlink:hover { color: var(--gold); }
.backlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.backlink span:first-child {
  font-size: 15px;
  line-height: 1;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.backlink:hover span:first-child { transform: translateX(-4px); }

/* =========================================================
   Cabecalho da listagem
   ========================================================= */
.index-head {
  padding: 70px 56px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.index-head-inner { width: 70%; max-width: 1400px; }

.index-title {
  /* 60px na tela do usuario (1744px). O vw desce junto com o maximo, senao so
     as pontas da escala mudariam e as telas do meio ficariam no tamanho antigo. */
  font-size: clamp(29px, 3.57vw, 60px);
  /* 450 caia no Medium: a familia so tem Book e Medium em woff2 e o CSS
     arredonda 401-499 para cima. 400 e o Book. */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #f6f2ec;
  margin: 26px 0 22px;
  text-wrap: balance;
  max-width: 17ch;
}
.index-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  /* o 700 italico so existe porque foi somado ao link do Google Fonts no
     build-blog.mjs — sem ele o navegador cairia no 600 */
  font-weight: 700;
  /* +4px em cima do titulo em qualquer breakpoint, sem mexer no clamp do pai */
  font-size: calc(1em + 4px);
  color: var(--gold);
}

.index-sub {
  font-size: clamp(17px, 1.15vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(240,235,227,.62);
  max-width: 62ch;
  text-wrap: pretty;
}

/* =========================================================
   Grid de cards (mesmo desenho da home)
   ========================================================= */
.cards-section {
  background: var(--cream);
  /* 56px lateral igual ao .index-head/.post-head: o 70% e calculado depois do
     padding, entao 80px empurrava o grid 16px para a direita do titulo */
  padding: 74px 56px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cards-inner { width: 70%; max-width: 1400px; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 40px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 12px 26px;
  /* mesma curva e mesmo tempo dos cards da home do site (index.html) */
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.blog-card:hover { transform: translateY(-6px); }
.blog-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; transform: translateY(-6px); }
.blog-card:active { transform: translateY(-2px); }
/* O card tambem e .fade-item, e a transicao de entrada (.9s) sobrescrevia a do
   card — o hover levava o dobro do tempo do site. Aqui o opacity fica com os
   .9s da entrada e o transform volta para os .45s dos cards da home. */
.blog-card.fade-item {
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}

.blog-card-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  background: #e9e6df;
}
.blog-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.62) contrast(1.03);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.blog-card:hover .blog-card-img { transform: scale(1.055); }

.blog-card-tint {
  position: absolute; inset: 0;
  background: var(--gold);
  opacity: .17;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.blog-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,24,46,.45) 0%, rgba(13,24,46,0) 58%);
  pointer-events: none;
}

.blog-card-body { padding: 0 6px; display: flex; flex-direction: column; gap: 11px; }

.blog-card-meta {
  display: flex; align-items: center; gap: 7px;
  /* a 10px o cap-height da PP Neue Montreal cai em meio pixel e o Chrome
     arredonda umas letras para 7px e outras para 8px — o "Q" e o "S" ficam
     visivelmente maiores que o "E". De 11px para cima o problema some. */
  font-size: clamp(11px, .74vw, 14px);
  font-weight: 400;
  letter-spacing: .02em; text-transform: capitalize;
  color: #8d97a3; white-space: nowrap;
}
.blog-card-dot { width: 3px; height: 3px; border-radius: 999px; background: var(--gold); flex-shrink: 0; }

/* trecho da description que so entra no card do celular (chaves no frontmatter) */
.so-mobile { display: none; }

.blog-card-title {
  font-size: clamp(15px, 1.17vw, 24px);
  font-weight: 450;
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.blog-card-desc {
  font-size: clamp(12px, 0.83vw, 17px);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
  display: -webkit-box;
  /* 4 e nao 3: em 1600px as descricoes cabem em 3 linhas, mas entre ~1050 e
     ~1400px o card estreita e TODAS terminavam em reticencias no meio da
     frase. Com 4 o texto fecha inteiro e o visual de 1600px nao muda. */
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   Post — cabecalho
   ========================================================= */
.post-head {
  padding: 56px 56px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* mesma largura da coluna de leitura e centralizado na pagina; o conteudo
   dentro continua alinhado a esquerda */
.post-head-inner { width: 100%; max-width: 864px; }

.post-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.post-title {
  /* 4px menor em toda a faixa: o vw tambem desce junto, senao so o topo e o
     fundo da escala mudariam */
  font-size: clamp(28px, 3.41vw, 58px);
  /* a familia so tem Book (400) e Medium (500) em woff2 — qualquer valor
     entre 401 e 499 cai no Medium. 400 e o Book, mesmo peso do h1 do hero. */
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: #f6f2ec;
  margin: 24px 0 26px;
  text-wrap: balance;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(240,235,227,.14);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(240,235,227,.5);
  white-space: nowrap;
  flex-wrap: wrap;
}
.post-meta .blog-card-dot { width: 3px; height: 3px; }

/* imagem de capa — metade dentro do navy, metade no creme.
   O trecho de cima e TRANSPARENTE de proposito: quem pinta ali e o proprio
   .blogtop (navy + brilho dourado + grao), senao aparece uma emenda de duas
   cores na altura em que a capa comeca. */
.post-cover-wrap {
  position: relative;
  padding: 54px 56px 0;
  display: flex;
  justify-content: center;
  background: linear-gradient(to bottom,
    rgba(23,29,36,0) 0%,
    rgba(23,29,36,0) 62%,
    var(--cream) 62%,
    var(--cream) 100%);
}
.post-cover {
  position: relative;
  width: 70%;
  max-width: 1400px;
  aspect-ratio: 21 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0f141a;
}
.post-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.62) contrast(1.03);
}
.post-cover-tint {
  position: absolute; inset: 0;
  background: var(--gold);
  opacity: .15;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.post-cover-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(23,29,36,0) 0%, rgba(23,29,36,.18) 55%, rgba(23,29,36,.42) 100%),
    rgba(23,29,36,.30);
  pointer-events: none;
}

/* =========================================================
   Post — corpo do artigo
   ========================================================= */
.post-body-wrap {
  background: var(--cream);
  padding: 76px 56px 96px;
  display: flex;
  justify-content: center;
}

/* a coluna de leitura fica centralizada na pagina (a capa segue no rail da
   esquerda). O texto dentro dela continua alinhado a esquerda. */
.post-body-inner {
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: center;
}

.post-body {
  width: 100%;
  max-width: 864px;
  font-size: 19px;
  line-height: 1.78;
  color: var(--body);
}

.post-body > p { margin-bottom: 26px; text-wrap: pretty; }

.post-body > p:first-of-type {
  font-size: 21px;
  line-height: 1.68;
  color: #2b323b;
}

.post-body h2 {
  font-size: clamp(26px, 2.1vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 58px 0 20px;
  text-wrap: balance;
  position: relative;
  padding-top: 22px;
}
.post-body h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 38px;
  height: 2px;
  background: var(--gold);
}

/* o h3 so tem 500 disponivel (as faces sao 400/500/700 — pedir 600 cai no bold
   e fica mais pesado que o h2). A hierarquia vem do tamanho e do respiro:
   com 19px ele empatava com o corpo no mobile e lia como paragrafo em negrito.
   Ao mexer no clamp, subir o vw junto com o maximo. */
.post-body h3 {
  font-size: clamp(23px, 1.63vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 54px 0 14px;
  text-wrap: balance;
}

.post-body strong { font-weight: 500; color: var(--ink); }
.post-body em { font-style: italic; }

.post-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .86em;
  color: #6f5730;
  background: rgba(200,169,126,.16);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.post-body a {
  color: #8a6c3e;
  text-decoration: underline;
  text-decoration-color: rgba(200,169,126,.55);
  text-underline-offset: 3px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.post-body a:hover { color: var(--ink); text-decoration-color: var(--gold); }

.post-body ul, .post-body ol { margin: 6px 0 30px; padding-left: 0; list-style: none; }
.post-body li { position: relative; padding-left: 30px; margin-bottom: 13px; text-wrap: pretty; }

.post-body ul > li::before {
  content: '';
  position: absolute;
  left: 6px; top: 14px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--gold);
}
.post-body ol { counter-reset: item; }
.post-body ol > li { counter-increment: item; }
.post-body ol > li::before {
  content: counter(item);
  position: absolute;
  left: 0; top: 1px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
  line-height: 1.55;
}

.post-body blockquote {
  margin: 44px 0;
  padding: 4px 0 4px 30px;
  border-left: 2px solid var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 1.95vw, 31px);
  font-style: italic;
  /* 400 do Cormorant italico e fino demais nesse tamanho e fica dificil de ler
     sobre o creme; 600 e a face seguinte carregada no Google Fonts */
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}
.post-body blockquote p { margin: 0; }

.post-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

/* assinatura no fim do texto */
.post-sign {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-sign-mark { color: var(--gold); font-size: 15px; line-height: 1; }

/* =========================================================
   Faixa de CTA
   ========================================================= */
.post-cta {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding: 88px 56px;
  /* mesmo rail das demais secoes */
  display: flex;
  justify-content: center;
  isolation: isolate;
}
.post-cta-grain {
  position: absolute; inset: 0;
  background-image: url('/noise.webp');
  background-size: 300px 300px;
  opacity: .34;
  pointer-events: none;
  z-index: 1;
}
.post-cta-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 70% at 50% 100%, rgba(200,169,126,.13) 0%, rgba(200,169,126,0) 70%);
  pointer-events: none;
  z-index: 1;
}
.post-cta-inner {
  position: relative;
  z-index: 2;
  width: 70%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}
.post-cta-text {
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 450;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #f6f2ec;
  max-width: 20ch;
  text-wrap: balance;
}
/* mesmo tratamento do "desejada" no titulo da home do blog: o 700 italico vem
   do link do Google Fonts no build-blog.mjs e o +4px sai do calc, sem tocar
   no clamp do pai */
.post-cta-text em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: calc(1em + 4px);
  color: var(--gold);
}
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  background: var(--gold);
  color: #171D24;
  text-decoration: none;
  /* px inteiro de proposito: .8rem dava 12,8px e o Chrome rasterizava umas
     letras 1px maiores que as outras */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 18px 38px;
  border-radius: 2px;
  white-space: nowrap;
  /* mesmo hover do .btn-primary do site (o "Diagnóstico de Marca" do hero):
     opacidade .82 + 2px de subida em .3s, sem troca de cor de fundo */
  transition:
    opacity .3s cubic-bezier(.4,0,.2,1),
    transform .3s cubic-bezier(.4,0,.2,1);
}
.btn-gold:hover { opacity: .82; transform: translateY(-2px); }
.btn-gold:active { opacity: 1; transform: translateY(0); }
.btn-gold:focus-visible { outline: 2px solid #f0ebe3; outline-offset: 3px; }

/* =========================================================
   Relacionados
   ========================================================= */
.related {
  background: var(--cream);
  padding: 86px 56px 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.related-inner { width: 70%; max-width: 1400px; }
.related-head {
  display: flex;
  align-items: flex-end;
  margin-bottom: 44px;
}
/* o titulo virou pill (mesmo desenho do botao da home), entao nao carrega
   mais tamanho de titulo — o .pill define fonte, borda e espacamento */
.related-title { margin: 0; }
/* =========================================================
   Rodape (igual ao do site)
   ========================================================= */
.site-footer {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 56px 48px;
  overflow: hidden;
  background: var(--navy);
  min-height: 220px;
  align-items: flex-end;
}
.footer-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 0;
}
.footer-bg-gradient { position: absolute; inset: 0; z-index: 1; background: rgba(23,29,36,0.55); }
.footer-inner { position: relative; z-index: 2; width: 70%; max-width: 1400px; }
.footer-divider { border: none; border-top: 1px solid rgba(240,235,227,0.12); margin-bottom: 32px; }
.footer-socials { display: flex; gap: 20px; align-items: center; }
.footer-socials a {
  color: var(--navy);
  text-decoration: none;
  transition: color .2s, background .2s;
  display: flex; align-items: center; justify-content: center;
  width: 33px; height: 33px;
  background: #ffffff;
  border-radius: 2px;
}
.footer-socials a:hover { background: #f0ebe3; }
.footer-socials a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* =========================================================
   Entrada suave
   ========================================================= */
.fade-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.fade-item.is-in { opacity: 1; transform: none; }
.fade-delay-1 { transition-delay: .09s; }
.fade-delay-2 { transition-delay: .18s; }

/* Quem liga "reduzir movimento" no sistema quer se livrar do que atravessa a
   tela: a entrada das secoes e o paralaxe (esse ja se desliga sozinho no JS).
   ⚠️ NAO zerar as transicoes com `* { transition-duration: .01ms !important }`
   — isso mata tambem os hovers, e com as animacoes desligadas no Windows o
   site inteiro fica seco, como se nao tivesse animacao nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .fade-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* O hover NAO e desligado aqui: os cards da home do site continuam levantando
     mesmo com "reduzir movimento" ligado, e desligar so no blog fazia os dois
     parecerem componentes diferentes. O que sai e a entrada, acima. */
}

/* =========================================================
   Telas medias
   ========================================================= */
@media (max-width: 1400px) {
  .nav-inner,
  .index-head-inner, .cards-inner, .post-cover,
  .post-cta-inner, .related-inner, .footer-inner { width: 84%; }
}

@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-inner,
  .index-head-inner, .cards-inner, .post-cover,
  .post-cta-inner, .related-inner, .footer-inner { width: 92%; }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 768px) {
  /* o recorte vertical joga uma area clara da pintura bem embaixo do
     subtitulo — sem reforcar a mascara o contraste cai para 3,5 */
  .blogtop-veil {
    background:
      linear-gradient(to bottom,
        rgba(23,29,36,.52) 0%,
        rgba(23,29,36,.42) 45%,
        rgba(23,29,36,.72) 100%),
      linear-gradient(95deg,
        rgba(23,29,36,.88) 0%,
        rgba(23,29,36,.82) 100%);
  }
  .blogtop-bg { object-position: 62% 34%; }

  nav { padding: 20px 24px; }
  .nav-inner { width: 100%; }
  .nav-logo img { height: 50px; }
  .nav-cta { font-size: .68rem; padding: 10px 18px; letter-spacing: .12em; }

  .index-head { padding: 40px 24px 64px; }
  .index-head-inner, .cards-inner,
  .post-cta-inner, .related-inner, .footer-inner { width: 100%; }
  /* fluido para fechar em DUAS linhas em qualquer celular: medindo o maior
     tamanho que ainda cabe em 2 linhas, o limite fica entre 8,44vw (320px) e
     8,84vw (430px) — 8,4vw passa por baixo de todos. O teto de 36px mantem o
     tamanho antigo nas telas maiores. Um valor fixo (34px) so resolvia de
     390px pra cima; em 360 e 375 voltava para tres linhas. */
  .index-title { font-size: min(8.4vw, 36px); max-width: none; margin: 20px 0 18px; }
  .index-sub { font-size: 17px; }
  /* a quebra manual do subtitulo so faz sentido na largura do desktop;
     o espaco vem depois do <br>, entao sumir com ele nao cola as palavras */
  .quebra-so-desktop { display: none; }

  .cards-section { padding: 44px 24px 76px; }
  .cards-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .blog-card { padding: 12px 12px 22px; border-radius: 16px; }
  .blog-card-title { font-size: 20px; }
  /* 5 no celular: com 4, em telas de 360px as descricoes mais longas
     precisavam de 5 linhas e cortavam com reticencias. Aqui os cards ficam
     em coluna unica, entao a altura extra nao desalinha nada. */
  .blog-card-desc { font-size: 17px; -webkit-line-clamp: 5; }
  .so-mobile { display: inline; }

  .post-head { padding: 32px 24px 0; }
  .post-head-top { margin-bottom: 26px; }
  .post-title { font-size: 31px; max-width: none; margin: 18px 0 18px; }
  .post-meta { font-size: 10px; gap: 8px; margin-top: 26px; padding-top: 20px; }

  .post-cover-wrap { padding: 34px 24px 0; }
  .post-cover { width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; }

  .post-body-wrap { padding: 44px 24px 64px; }
  .post-body { font-size: 18px; line-height: 1.72; }
  .post-body > p:first-of-type { font-size: 19px; }
  .post-body h2 { font-size: 25px; margin: 42px 0 16px; }
  .post-body h3 { font-size: 22px; margin: 40px 0 12px; }
  .post-body blockquote { font-size: 24px; margin: 34px 0; padding-left: 22px; }

  .post-cta { padding: 60px 24px; }
  .post-cta-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .post-cta-text { font-size: 26px; max-width: none; }
  .btn-gold { padding: 16px 28px; font-size: .74rem; }

  .related { padding: 56px 24px 72px; }
  .related-head { margin-bottom: 28px; }

  .site-footer { padding: 0 24px 32px; min-height: 180px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; font-size: 14px; }
}