/* Base de blog, comum aos dois sites.
   cpv e trocado pelo prefixo da marca (mg- para o Yan, cpv- para a Jessica) e
   os tokens de :root vem de _fonte/site.json. Nada aqui e servido direto:
   o arquivo publicado e o gerado em <site>/blog/assets/css/blog.css.
   Registro de namespaces: docs/css-namespaces.raia-b.md */

:root{
  /* fonte padrao ANTES dos tokens: um `fonte` em site.json sobrescreve esta */
  --cpv-fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji";
  --cpv-fundo: #000000;
  --cpv-superficie: #1d2025;
  --cpv-superficie-2: #2b2f36;
  --cpv-borda: rgba(255,255,255,.12);
  --cpv-borda-forte: rgba(255,255,255,.24);
  --cpv-texto: #ffffff;
  --cpv-texto-2: #b4b8bf;
  --cpv-texto-3: #8e939c;
  --cpv-acento: #ff0347;
  --cpv-acento-forte: #d40039;
  --cpv-acento-claro: #ff467a;
  --cpv-acento-contraste: #ffffff;
  --cpv-link: #00fffe;
  --cpv-sombra-titulo: 2px 0 0 rgba(255,3,71,.85), -2px 0 0 rgba(0,255,254,.7);
  --cpv-capa-secundaria: #00fffe;
  --cpv-fonte: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --cpv-largura:      1120px;
  --cpv-largura-texto: 720px;
  --cpv-raio:         14px;
  --cpv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cpv-fundo);
  color:var(--cpv-texto);
  font-family:var(--cpv-fonte);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.2; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; }

/* ---------------------------------------------------------------
   envelope: coluna de largura maxima, usada por todas as secoes
   --------------------------------------------------------------- */
.cpv-envelope{
  max-width:var(--cpv-largura);
  margin:0 auto;
  padding:0 20px;
}

/* ---------------------------------------------------------------
   atalho de acessibilidade
   --------------------------------------------------------------- */
/* O atalho fica recortado, e nao jogado para fora da tela com left:-9999px.
   Jogar para fora funciona, mas um elemento a 9999px da viewport e
   indistinguivel de conteudo cortado por defeito para qualquer verificador de
   overflow. Recortar no lugar mantem o atalho invisivel e o gate honesto. */
.cpv-saltar{
  position:absolute;
  top:8px;
  left:8px;
  z-index:20;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:var(--cpv-acento-forte);
  color:var(--cpv-acento-contraste);
  padding:10px 16px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
}
.cpv-saltar:focus{
  width:auto;
  height:auto;
  overflow:visible;
  clip-path:none;
}

/* ---------------------------------------------------------------
   cabecalho do site
   --------------------------------------------------------------- */
.cpv-cabecalho{
  border-bottom:1px solid var(--cpv-borda);
  background:var(--cpv-fundo);
  position:sticky;
  top:0;
  z-index:10;
}
.cpv-cabecalho .cpv-cabecalho__linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  min-height:64px;
  padding-top:10px;
  padding-bottom:10px;
}
.cpv-cabecalho__marca{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--cpv-acento);
}
.cpv-cabecalho__marca svg{
  width:34px;
  height:26px;
  display:block;
  fill:currentColor;
}
.cpv-cabecalho__marca img{ width:auto; height:26px; }
.cpv-cabecalho__nome{
  font-weight:800;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--cpv-texto);
}
.cpv-cabecalho__nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.cpv-cabecalho__nav a{
  text-decoration:none;
  color:var(--cpv-texto-2);
  font-size:14px;
  font-weight:600;
  padding:8px 12px;
  border-radius:999px;
}
.cpv-cabecalho__nav a:hover,
.cpv-cabecalho__nav a:focus-visible{
  color:var(--cpv-texto);
  background:var(--cpv-superficie);
}
.cpv-cabecalho__nav a.is-atual{
  color:var(--cpv-texto);
  background:var(--cpv-superficie);
}

/* ---------------------------------------------------------------
   trilha (breadcrumb)
   --------------------------------------------------------------- */
.cpv-trilha{ padding:18px 0 4px; }
.cpv-trilha__lista{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  font-size:13px;
  color:var(--cpv-texto-3);
}
.cpv-trilha__item + .cpv-trilha__item::before{
  content:"/";
  margin-right:6px;
  color:var(--cpv-texto-3);
}
.cpv-trilha__item a{ color:var(--cpv-texto-2); text-decoration:none; }
.cpv-trilha__item a:hover{ color:var(--cpv-link); text-decoration:underline; }

/* ---------------------------------------------------------------
   topo da listagem
   --------------------------------------------------------------- */
.cpv-blogtopo{ padding:8px 0 34px; }
.cpv-blogtopo__rotulo{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-acento-claro);
  margin-bottom:12px;
}
.cpv-blogtopo__titulo{
  font-size:clamp(30px, 6vw, 50px);
  max-width:18ch;
  text-shadow:var(--cpv-sombra-titulo);
}
.cpv-blogtopo__intro{
  margin-top:16px;
  max-width:62ch;
  color:var(--cpv-texto-2);
  font-size:18px;
}
.cpv-blogtopo__numeros{
  margin-top:14px;
  font-family:var(--cpv-mono);
  font-size:13px;
  color:var(--cpv-texto-3);
}

/* ---------------------------------------------------------------
   pilulas de categoria
   --------------------------------------------------------------- */
.cpv-pilulas{
  display:flex;
  gap:8px;
  margin-top:22px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.cpv-pilulas__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:var(--cpv-texto-2);
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:999px;
  padding:8px 14px;
}
.cpv-pilulas__item:hover{ border-color:var(--cpv-borda-forte); color:var(--cpv-texto); }
.cpv-pilulas__item.is-atual{
  background:var(--cpv-acento-forte);
  border-color:var(--cpv-acento-forte);
  color:var(--cpv-acento-contraste);
}
.cpv-pilulas__conta{
  font-family:var(--cpv-mono);
  font-size:12px;
  opacity:.75;
}

/* ---------------------------------------------------------------
   artigo em destaque
   --------------------------------------------------------------- */
.cpv-destaque{ padding-bottom:34px; }
.cpv-destaque__caixa{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  overflow:hidden;
}
.cpv-destaque__capa{ display:block; }
.cpv-destaque__capa img{ width:100%; height:auto; }
.cpv-destaque__texto{ padding:24px; }
.cpv-destaque__rotulo{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-acento-claro);
  margin-bottom:10px;
}
.cpv-destaque__titulo{ font-size:clamp(22px, 3.4vw, 30px); }
.cpv-destaque__titulo a{ text-decoration:none; }
.cpv-destaque__titulo a:hover{ color:var(--cpv-link); }
.cpv-destaque__resumo{
  margin-top:12px;
  color:var(--cpv-texto-2);
  max-width:62ch;
}
.cpv-destaque__meta{
  margin-top:16px;
  font-family:var(--cpv-mono);
  font-size:12.5px;
  color:var(--cpv-texto-3);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cpv-destaque__ponto{ opacity:.6; }

/* ---------------------------------------------------------------
   grade e cartao de artigo
   --------------------------------------------------------------- */
.cpv-listagem{ padding-bottom:46px; }
.cpv-listagem__rotulo{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-texto-3);
  margin-bottom:16px;
}
.cpv-colecao{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}
.cpv-resumo{
  display:flex;
  flex-direction:column;
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.cpv-resumo:hover{ border-color:var(--cpv-borda-forte); transform:translateY(-2px); }
.cpv-resumo__capa{ display:block; }
.cpv-resumo__capa img{ width:100%; height:auto; }
.cpv-resumo__texto{ padding:18px; display:flex; flex-direction:column; gap:10px; }
.cpv-resumo__meta{
  font-family:var(--cpv-mono);
  font-size:12px;
  color:var(--cpv-texto-3);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cpv-resumo__categoria{ color:var(--cpv-acento-claro); font-weight:700; }
.cpv-resumo__ponto{ opacity:.6; }
.cpv-resumo__titulo{ font-size:19px; line-height:1.3; }
.cpv-resumo__titulo a{ text-decoration:none; }
.cpv-resumo__titulo a:hover{ color:var(--cpv-link); }
.cpv-resumo__resumo{ color:var(--cpv-texto-2); font-size:15px; }

/* ---------------------------------------------------------------
   paginacao
   --------------------------------------------------------------- */
.cpv-paginacao{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}
.cpv-paginacao__link{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--cpv-borda-forte);
  color:var(--cpv-texto);
}
.cpv-paginacao__link:hover{ background:var(--cpv-superficie); }
/* Sem `opacity`, e o motivo e medido. O opacity:.35 multiplicava a cor JA
   apagada do texto-3 e o resultado efetivo virava #323337 sobre preto, com
   1,66:1 de contraste, contra os 4,5:1 do AA. Era o unico motivo da
   acessibilidade do blog estar em 95 no Lighthouse da URL publica, em
   08/09/2026. A cor sozinha ja marca o estado inativo: 6,80:1 na Jessica e
   5,73:1 no Yan, e a borda mais fraca reforca. */
.cpv-paginacao__link.is-inativo{
  border-color:var(--cpv-borda);
  color:var(--cpv-texto-3);
  cursor:default;
}
.cpv-paginacao__estado{
  font-family:var(--cpv-mono);
  font-size:13px;
  color:var(--cpv-texto-3);
}

/* ---------------------------------------------------------------
   artigo
   --------------------------------------------------------------- */
.cpv-artigo{ padding-bottom:40px; }
.cpv-artigo__cabeca{ padding-top:14px; max-width:var(--cpv-largura-texto); }
.cpv-artigo__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}
.cpv-artigo__categoria{
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cpv-acento-contraste);
  background:var(--cpv-acento-forte);
  border-radius:999px;
  padding:5px 12px;
}
.cpv-artigo__metatexto{
  font-family:var(--cpv-mono);
  font-size:12.5px;
  color:var(--cpv-texto-3);
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.cpv-artigo__ponto{ opacity:.6; }
.cpv-artigo__titulo{
  font-size:clamp(28px, 5.2vw, 44px);
  text-shadow:var(--cpv-sombra-titulo);
}
.cpv-artigo__resumo{
  margin-top:16px;
  font-size:19px;
  color:var(--cpv-texto-2);
}
.cpv-artigo__autor{
  margin-top:16px;
  font-size:14px;
  color:var(--cpv-texto-3);
}
/* a capa acompanha a largura da coluna de texto, e nao a do container:
   em 1120px uma imagem 1200x630 come quase 600px de altura antes do
   primeiro paragrafo, e o leitor comeca o artigo ja tendo que rolar */
.cpv-artigo__figura{
  margin:26px 0 0;
  max-width:var(--cpv-largura-texto);
  border-radius:var(--cpv-raio);
  overflow:hidden;
  border:1px solid var(--cpv-borda);
}
.cpv-artigo__grade{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  margin-top:34px;
}
.cpv-artigo__coluna{ min-width:0; }
.cpv-artigo__indicemovel{
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:26px;
}
.cpv-artigo__indicemovel summary{
  cursor:pointer;
  font-weight:700;
  font-size:14px;
}

/* corpo do artigo: seletores de elemento ancorados no componente */
.cpv-artigo__corpo{ max-width:var(--cpv-largura-texto); }
.cpv-artigo__corpo p{ margin:0 0 20px; }
.cpv-artigo__corpo h2{
  font-size:clamp(22px, 3.6vw, 30px);
  margin:40px 0 14px;
  scroll-margin-top:86px;
}
.cpv-artigo__corpo h3{
  font-size:20px;
  margin:28px 0 10px;
  scroll-margin-top:86px;
}
.cpv-artigo__corpo ul,
.cpv-artigo__corpo ol{ margin:0 0 20px; padding-left:22px; }
.cpv-artigo__corpo li{ margin-bottom:8px; }
.cpv-artigo__corpo a{ color:var(--cpv-link); text-underline-offset:3px; }
.cpv-artigo__corpo strong{ color:var(--cpv-texto); }
.cpv-artigo__corpo blockquote{
  margin:0 0 20px;
  padding:14px 18px;
  border-left:3px solid var(--cpv-acento);
  background:var(--cpv-superficie);
  border-radius:0 10px 10px 0;
  color:var(--cpv-texto-2);
}
.cpv-artigo__corpo code{
  font-family:var(--cpv-mono);
  font-size:.9em;
  background:var(--cpv-superficie-2);
  border-radius:5px;
  padding:2px 6px;
}
.cpv-artigo__corpo pre{
  margin:0 0 20px;
  padding:16px;
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:10px;
  overflow-x:auto;
}
.cpv-artigo__corpo pre code{ background:none; padding:0; }
.cpv-artigo__corpo table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 20px;
  font-size:15px;
}
.cpv-artigo__corpo th,
.cpv-artigo__corpo td{
  border:1px solid var(--cpv-borda);
  padding:9px 12px;
  text-align:left;
}
.cpv-artigo__corpo th{ background:var(--cpv-superficie); }
.cpv-artigo__corpo figure{ margin:0 0 20px; }
.cpv-artigo__corpo img{ border-radius:10px; }

/* ---------------------------------------------------------------
   indice lateral
   --------------------------------------------------------------- */
.cpv-indice{ min-width:0; }
.cpv-indice__caixa{
  position:sticky;
  top:86px;
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  padding:18px;
}
.cpv-indice__rotulo{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-texto-3);
  margin-bottom:12px;
}
.cpv-indice__lista{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.cpv-indice__item{ font-size:14px; line-height:1.4; }
.cpv-indice__item a{ color:var(--cpv-texto-2); text-decoration:none; }
.cpv-indice__item a:hover{ color:var(--cpv-link); text-decoration:underline; }

/* ---------------------------------------------------------------
   compartilhar
   --------------------------------------------------------------- */
.cpv-partilha{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--cpv-borda);
}
.cpv-partilha__rotulo{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-texto-3);
}
.cpv-partilha a{
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  color:var(--cpv-texto-2);
  border:1px solid var(--cpv-borda-forte);
  border-radius:999px;
  padding:7px 14px;
}
.cpv-partilha a:hover{ color:var(--cpv-texto); background:var(--cpv-superficie); }

/* ---------------------------------------------------------------
   navegacao entre artigos
   --------------------------------------------------------------- */
.cpv-vizinhos{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:38px;
}
.cpv-vizinhos__item{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  padding:18px;
}
.cpv-vizinhos__item:hover{ border-color:var(--cpv-borda-forte); }
.cpv-vizinhos__rotulo{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-acento-claro);
}
.cpv-vizinhos__titulo{ font-weight:700; font-size:16px; line-height:1.35; }

/* ---------------------------------------------------------------
   relacionados
   --------------------------------------------------------------- */
.cpv-relacionados{ padding:10px 0 50px; }
.cpv-relacionados__titulo{ font-size:26px; margin-bottom:20px; }

/* ---------------------------------------------------------------
   chamada para a pagina de venda
   --------------------------------------------------------------- */
.cpv-chamada{ padding:10px 0 50px; }
.cpv-chamada .cpv-chamada__caixa{
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda-forte);
  border-radius:var(--cpv-raio);
  padding:32px 24px;
  text-align:center;
  max-width:var(--cpv-largura);
}
.cpv-chamada__rotulo{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-acento-claro);
  margin-bottom:12px;
}
.cpv-chamada__titulo{ font-size:clamp(22px, 4vw, 32px); }
.cpv-chamada__texto{
  margin:14px auto 0;
  max-width:56ch;
  color:var(--cpv-texto-2);
}
.cpv-chamada__botao{
  display:inline-block;
  margin-top:22px;
  text-decoration:none;
  font-weight:800;
  font-size:19px;
  padding:15px 30px;
  border-radius:999px;
  background:var(--cpv-acento);
  color:var(--cpv-acento-contraste);
}
.cpv-chamada__botao:hover{ background:var(--cpv-acento-forte); }

/* ---------------------------------------------------------------
   rodape
   --------------------------------------------------------------- */
.cpv-rodapeblog{
  border-top:1px solid var(--cpv-borda);
  padding:38px 0 30px;
  background:var(--cpv-fundo);
}
/* flex, e nao grid de colunas fixas: a coluna de redes some quando a marca
   ainda nao tem perfil confirmado, e o rodape nao pode ficar com buraco */
.cpv-rodapeblog__topo{
  display:flex;
  flex-wrap:wrap;
  gap:26px 48px;
}
.cpv-rodapeblog__bloco{ display:flex; flex-direction:column; gap:8px; min-width:0; flex:1 1 190px; }
.cpv-rodapeblog__bloco:first-child{ flex:2 1 300px; }
.cpv-rodapeblog__marca{
  font-weight:800;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cpv-acento-claro);
}
.cpv-rodapeblog__texto{ color:var(--cpv-texto-3); font-size:14px; max-width:46ch; }
.cpv-rodapeblog__rotulo{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cpv-texto-3);
}
.cpv-rodapeblog__link{
  text-decoration:none;
  color:var(--cpv-texto-2);
  font-size:14px;
  width:fit-content;
}
.cpv-rodapeblog__link:hover{ color:var(--cpv-link); text-decoration:underline; }
.cpv-rodapeblog__base{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid var(--cpv-borda);
  font-size:13px;
  color:var(--cpv-texto-3);
}

/* ---------------------------------------------------------------
   foco visivel, em tudo
   --------------------------------------------------------------- */
a:focus-visible,
summary:focus-visible{
  outline:2px solid var(--cpv-link);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------------
   telas maiores
   --------------------------------------------------------------- */
@media (min-width:760px){
  .cpv-destaque__caixa{ grid-template-columns:1.15fr 1fr; align-items:stretch; }
  .cpv-destaque__capa{ height:100%; }
  /* ancorado a esquerda: a capa padrao tem o texto na metade esquerda da arte,
     e o corte centralizado comia as duas pontas dele */
  .cpv-destaque__capa img{ height:100%; object-fit:cover; object-position:left center; }
  .cpv-destaque__texto{ padding:34px; display:flex; flex-direction:column; justify-content:center; }
  .cpv-vizinhos{ grid-template-columns:1fr 1fr; }
  .cpv-chamada .cpv-chamada__caixa{ padding:44px 34px; }
}

@media (min-width:1000px){
  .cpv-artigo__grade{ grid-template-columns:minmax(0,1fr) 280px; gap:48px; }
  .cpv-artigo__indicemovel{ display:none; }
}

@media (max-width:999px){
  .cpv-indice{ display:none; }
}

/* ---------------------------------------------------------------
   movimento reduzido
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}