@font-face{font-family:"Arsenal";font-style:normal;font-weight:400;font-display:block;src:url(https://fonts.gstatic.com/s/arsenal/v13/wXKrE3kQtZQ4pF3D51jcAA.woff2) format("woff2")}@font-face{font-family:"Roboto";font-style:normal;font-weight:400 500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v51/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format("woff2")}500&display=swap");
/* ==========================================================================
   TEMA CR TREINAMENTOS · HOME (CAPA)
   Sem CDN. As familias do original entram por @font-face de reserva com
   local(), e caem na pilha do sistema quando nao estao instaladas.
   ========================================================================== */
@font-face{font-family:"Exo 2 R";src:local("Exo 2"),local("Exo2-Regular"),local("Exo 2 Regular");font-weight:400;font-display:swap}
@font-face{font-family:"Exo 2 R";src:local("Exo 2 SemiBold"),local("Exo2-SemiBold");font-weight:600;font-display:swap}
@font-face{font-family:"Exo 2 R";src:local("Exo 2 Bold"),local("Exo2-Bold");font-weight:700;font-display:swap}
@font-face{font-family:"Roboto R";src:local("Roboto"),local("Roboto-Regular");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto R";src:local("Roboto Medium"),local("Roboto-Medium");font-weight:500;font-display:swap}
@font-face{font-family:"Roboto R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:700;font-display:swap}
:root{
  /* --- grade: 1200 = 325 + 60 + 815 --- */
  --faixa:1200px;
  --lateral:325px;
  --vao:60px;
  --principal:815px;    /* documenta a conta; a coluna real e 1fr */
  --mini-l:214px;
  --mini-a:142px;
  --mini-vao:17px;      /* 214 + 17 + 584 = 815 */
  --arte:420px;         /* a arte do banner. 1200 = 732 + 48 + 420 */
  --texto-hero:640px;   /* titulo e subtitulo fecham na MESMA medida */

  /* --- cor medida --- */
  --branco:#ffffff;
  --tinta:#333333;
  --preto:#000000;
  --ouro:#DC9942;       /* o dourado do original. Vive sobre PRETO. */
  --ouro-tx:#9A6413;    /* o mesmo dourado escurecido, para texto e fio sobre BRANCO */
  /* --ouro-tx-2, o estado de passagem do mouse, mora no bloco de baixo:
     tinha o marrom da era dourada aqui e o azul la, e valor repetido em
     dois lugares e a doenca que este tema ja pagou cinco vezes. */
  --creme:#F5EFE4;
  --vermelho:#C81E1E;
  --vermelho-b:#7A1212;
  --azul:#2F5A3C;
  /* AS SEIS VARIAVEIS ROXAS FICARAM SEM LEITOR na spec 0104, e o nome fica de
     proposito, como o `--ouro-antigo`: quem procurar por "roxo" nesta base acha
     esta nota e entende que a era acabou, em vez de reintroduzir a cor achando
     que ela some do desenho. Elas eram lidas em 38 lugares. */
  --roxo:#5B2A86;
  --regua:#EAEAEA;
  --regua-fina:#EFEFEF;  /* o fio do vao entre as duas colunas */

  /* --- tipografia --- */
  --corpo:"Roboto R",Roboto,"Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;
  --display:"Exo 2 R","Exo 2",Exo,"Trebuchet MS","Segoe UI",Candara,system-ui,sans-serif;

  /* --- ritmo vertical: tudo multiplo do 24 do corpo --- */
  --r1:8px; --r2:12px; --r3:16px; --r4:24px; --r5:32px; --r6:40px; --r7:48px; --r8:60px;

  --r-cartao:10px;
  --r-botao:5px;
  --toque:44px;

  /* --- camadas nomeadas: nada de numero solto no z-index --- */
  --z-base:1;
  --z-marca:8;
  --z-topo:30;
  --z-fundo-gaveta:40;
  --z-gaveta:50;
  --z-busca:80;
  --z-pular:90;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none!important}
body{
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:var(--f-base);
  line-height:24px;
  -webkit-text-size-adjust:100%;
}
body a{color:inherit}
body h1,body h2,body h3,body h4{font-family:var(--display);margin:0}
body p{margin:0}
body ul{list-style:none;margin:0;padding:0}
/* O `height:auto` e OBRIGATORIO ao lado do `max-width`, e a falta dele foi o
   defeito da spec 0121: o HtmlOptimizer carimba `width` e `height` de verdade
   na tag (e faz certo, e o que reserva a caixa e evita o pulo de pagina), o
   `max-width:100%` encolhe a largura para caber na coluna, e a altura fica
   presa no numero do atributo. Uma foto de 1440x1440 saia desenhada em 770x1080
   no corpo do artigo: proporcao 1,0000 virando 0,7130, achatada de lado. O tema
   padrao em `blog-templates/cabecalho.css` sempre teve as duas linhas; esta
   folha nasceu dele e perdeu esta no caminho. */
body img,body svg{display:block;max-width:100%;height:auto}
/* Titulo longo nunca empurra a caixa: o risco real no piso de 360. */
body h1,body h2,body h3,body a,body p{overflow-wrap:anywhere}
/* faixa de conteudo: 1200px */
.faixa{width:min(var(--faixa),100% - 40px);margin-inline:auto}
/* --------- foco: preto carrega o contraste, o dourado carrega a marca ------ */
body :focus-visible{outline:2px solid var(--superficie-preta);outline-offset:2px;box-shadow:0 0 0 5px rgba(var(--ouro-antigo-rgb),.85);border-radius:2px}
body .escuro :focus-visible,.top :focus-visible,.rodape :focus-visible,.gaveta :focus-visible,.busca-tela :focus-visible{outline:2px solid var(--branco);box-shadow:0 0 0 5px var(--ouro)}
.pular{position:fixed;left:-9999px;top:0;z-index:var(--z-pular);background:var(--ouro);color:var(--preto);font:700 var(--f-txt)/1 var(--display);padding:12px 18px}
.pular:focus{left:12px;top:12px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  body *{transition:none!important;animation:none!important}
}
/* ------------------------------ 1. BARRA DO TOPO -------------------------- */
.top{background:var(--preto);color:var(--branco);position:relative;z-index:var(--z-topo)}
/* A ALTURA DO CABECALHO E UMA VARIAVEL, e a hero LE dela (spec 0106).
   O cabecalho e `position:absolute` e flutua sobre a hero. Enquanto os dois
   numeros eram escritos separados, eles saiam de sincronia sem avisar: no
   celular o cabecalho media 72px (56 de altura + 8+8 de respiro) e a hero
   abria com 44px de padding, entao o selo "Metafisica aplicada" comecava 28px
   DENTRO do cabecalho e aparecia cortado. No computador nunca apareceu porque
   la a conta dava 96 contra 80, e sobrava.
   Amarrados, mudar a altura do cabecalho move a hero junto, de graca. */
.top-in{display:flex;align-items:center;gap:20px;min-height:var(--topo-altura)}
/* A LOGO CENTRADA DENTRO DO ALVO DE TOQUE (spec 0104, o outro lado do 8.3).
   Medido no iPhone depois de corrigir as dimensoes da imagem: a caixa
   reservada passou a bater com a imagem (folga de 0,03px, era 11), mas o LINK
   tem 44px de alvo de toque e a imagem, em `display:block`, ficava colada no
   topo dele. O centro dela caia 11px acima do centro do cabecalho, e a marca
   continuava desalinhada com o hamburguer, que e a queixa original do dono.
   No computador nao muda nada: la o link tem a altura da imagem, e centrar
   uma coisa que ja ocupa tudo e no-op. Medido: desvio 0 nos dois. */
.marca{flex:none;display:flex;align-items:center}
.marca-cx{width:186px;height:46px;background:var(--superficie-preta);border:1px solid rgba(var(--ouro-antigo-rgb),.5);display:grid;place-items:center;
  font:700 var(--f-min)/1 var(--display);letter-spacing:.14em;color:var(--ouro);text-transform:uppercase}
.nav-desk{margin-left:auto}
.nav-desk>ul{display:flex;align-items:center;gap:22px}
.nav-desk a,.nav-desk .bt-sub{
  display:inline-flex;align-items:center;gap:6px;color:var(--branco);text-decoration:none;
  /* PESO 500, e nao 600: o menu do topo estava em semibold e o dono pediu sem
     negrito. Navegacao nao disputa atencao com o titulo da tela; quem marca a
     pagina atual e a cor e o fio embaixo, nao a espessura da letra. */
  font:500 var(--f-txt)/1 var(--display);padding:12px 2px;border:0;background:none;cursor:pointer;
  border-bottom:2px solid transparent;font-family:var(--display)}
.nav-desk a:hover,.nav-desk a:focus-visible,.nav-desk .bt-sub:hover,.nav-desk li.aberto>.bt-sub{color:var(--ouro);border-bottom-color:var(--ouro)}
.tem-sub{position:relative}
.sub{position:absolute;top:100%;left:-16px;min-width:252px;background:var(--fundo-preto);border:1px solid rgba(var(--ouro-antigo-rgb),.4);padding:6px 0;display:none}
.tem-sub:hover>.sub,.tem-sub:focus-within>.sub,.tem-sub.aberto>.sub{display:block}
.sub a{display:block;width:100%;padding:9px 18px;font:400 var(--f-txt)/20px var(--corpo);color:var(--fio);border-bottom:0}
.sub a:hover,.sub a:focus-visible{color:var(--ouro);background:var(--superficie-preta);border-bottom-color:transparent}
.bt-membros{flex:none;display:inline-grid;place-items:center;width:224px;height:39px;background:var(--ouro);color:var(--preto);
  font:700 var(--f-txt)/1 var(--display);border:0;border-radius:var(--r-botao);text-decoration:none;letter-spacing:.01em}
/* o hover dourado deste botao tambem saiu. Aqui ele ja estava coberto pelo
   hover novo, que declara `background` (o da busca nao declarava), mas a regra
   ficava de armadilha para o proximo que mexesse. */
.bt-busca,.bt-hamb{flex:none;width:var(--toque);height:var(--toque);display:none;place-items:center;background:none;border:0;color:var(--branco);cursor:pointer;border-radius:4px}
.bt-busca{display:grid}
.bt-busca:hover,.bt-hamb:hover{color:var(--ouro)}
.bt-acesse{display:inline-grid;place-items:center;min-height:48px;padding:0 34px;background:var(--vermelho);
  border:2px solid var(--vermelho-b);color:var(--branco);border-radius:var(--r-botao);text-decoration:none;font:700 var(--f-base)/1 var(--display)}
.bt-acesse:hover{background:var(--vermelho-vivo)}
/* ------------------------------ 3. DUAS COLUNAS --------------------------- */
/* align-items:stretch (o padrao) e o que faz as DUAS colunas terem a altura da
   linha inteira. Sem isso cada coluna encolhe ate o proprio conteudo e o
   involucro grudento nao tem para onde andar. */
.miolo{display:grid;gap:var(--vao);align-items:stretch;padding:var(--r7) 0 var(--r7)}
body.v-lista   .miolo{grid-template-columns:var(--lateral) minmax(0,1fr)}
body.v-lista   .lat{order:1}
body.v-lista   .principal{order:2}
body:not(.v-lista) .miolo{grid-template-columns:minmax(0,1fr) var(--lateral)}
body:not(.v-lista) .principal{order:1}
body:not(.v-lista) .lat{order:2}
body.v-lista   .grade{display:none}
body:not(.v-lista) .lista{display:none}
.principal,.lat{min-width:0}
/* O fio do vao. Ele corre a altura inteira da linha, entao a coluna que acaba
   primeiro deixa MARGEM delimitada, e nao um retalho branco solto. Vem de
   background, e nao de border, para nao roubar largura da lateral de 325. */
.miolo{background-repeat:no-repeat;background-size:1px 100%;
  background-origin:content-box;background-clip:content-box;
  background-image:linear-gradient(var(--regua-fina),var(--regua-fina))}
body.v-lista   .miolo{background-position:calc(var(--lateral) + var(--vao)/2) 0}
body:not(.v-lista) .miolo{background-position:calc(100% - var(--lateral) - var(--vao)/2) 0}
/* ---------- so a LATERAL gruda ----------
   Quem grudava era `.col-in`, a classe das DUAS colunas, e com sticky quem
   engata e a que tiver curso, ou seja, a mais curta. Isso fazia o dono de quem
   gruda mudar de tela para tela: medido na capa em 29/08/2026, a lateral (1098)
   tinha curso zero e a LISTAGEM (422) grudava a 97px do topo. Conteudo parado e
   lateral deslizando, o contrario do que qualquer site faz.
   A coluna principal nunca gruda. So a lateral, e so no desktop: abaixo de 1080
   ela empilha. O offset e ponto de partida: a lateral e mais alta que a janela
   e o script do cabecalho o move conforme o sentido da rolagem, para o fim dela
   aparecer descendo e o topo voltar subindo. */
@media (min-width:1080px){
  .lat .col-in{position:sticky;top:var(--col-gruda)}
}
/* quem pede menos movimento fica com a lateral parada */
@media (prefers-reduced-motion:reduce){
  .lat .col-in{position:static}
}
/* --- 3a. a lateral --- */
.lat-in{display:flex;flex-direction:column;gap:var(--r4);min-width:0}
.lat-ofertas{display:flex;flex-direction:column;gap:var(--r4);min-width:0}
.cartao{border-radius:var(--r-cartao);overflow:hidden}
.cartao--preto{background:var(--preto);color:var(--branco)}
.cartao--ouro{background:var(--ouro);color:var(--preto)}
.cab{display:flex;align-items:center;gap:9px;padding:14px 16px;font:700 var(--f-peq)/1 var(--display);
  text-transform:uppercase;letter-spacing:.09em}
.cartao--preto .cab{color:var(--ouro);border-bottom:1px solid rgba(var(--ouro-antigo-rgb),.3)}
.cartao--ouro .cab{color:var(--preto);border-bottom:1px solid rgba(var(--preto-rgb),.2)}
.cartao-corpo{padding:16px}
.autor-foto{width:100%;height:auto;border-radius:6px}
.autor-nome{font:600 var(--f-xl)/30px var(--display);color:var(--ouro);margin:var(--r3) 0 var(--r1)}
.autor-bio{font:400 var(--f-txt)/21px var(--corpo);color:var(--fio)}
.video{position:relative;display:block;border-radius:6px;overflow:hidden}
.video img,.video svg{width:100%;height:auto}
.video-play{position:absolute;inset:0;display:grid;place-items:center;color:var(--branco)}
.video-play span{width:56px;height:56px;border-radius:50%;background:rgba(var(--preto-rgb),.6);border:2px solid var(--branco);display:grid;place-items:center}
.bt-inscreva{display:grid;place-items:center;width:100%;min-height:var(--toque);margin-top:var(--r2);
  background:var(--vermelho);border:2px solid var(--vermelho-b);color:var(--branco);border-radius:var(--r-botao);
  text-decoration:none;font:700 var(--f-base)/1 var(--display);text-transform:lowercase}
.bt-inscreva:hover{background:var(--vermelho-vivo)}
.bt-larga{display:grid;place-items:center;width:100%;min-height:52px;border-radius:var(--r-botao);
  color:var(--branco);text-decoration:none;font:700 var(--f-base)/20px var(--display);text-align:center;padding:8px 14px}
.bt-larga--azul{background:var(--azul)}
.bt-larga--azul:hover{background:var(--azul-2)}
.lista-lat li+li{border-top:1px solid}
.cartao--preto .lista-lat li+li{border-color:rgba(var(--branco-rgb),.15)}
.cartao--ouro .lista-lat li+li{border-color:rgba(var(--preto-rgb),.2)}
.lista-lat a{display:block;padding:12px 16px;text-decoration:none;font:600 var(--f-base)/22px var(--display)}
.cartao--preto .lista-lat a{color:var(--branco)}
.cartao--preto .lista-lat a:hover{color:var(--ouro);background:var(--fundo-preto)}
.cartao--ouro .lista-lat a{color:var(--preto)}
.cartao--ouro .lista-lat a:hover{background:rgba(var(--preto-rgb),.08)}
/* --- 3b. VARIACAO 1: a lista em linhas --- */
.lista{min-width:0}
.artigo{display:grid;grid-template-columns:var(--mini-l) minmax(0,1fr);gap:var(--mini-vao);
  padding:var(--r4) 0;border-bottom:1px solid var(--regua)}
.artigo:first-child{padding-top:0}
/* Spec 0122 item 7a — sem capa, a linha da lista fecha so com o texto. Nesta
   variacao a foto e enfeite de 214px, entao o artigo NAO some: some o cinza. */
.artigo--sem-foto,.artigo:not(:has(.mini)){grid-template-columns:minmax(0,1fr)}
.mini{border-radius:0;width:var(--mini-l);height:var(--mini-a);flex:none}
.artigo-corpo{min-width:0}
.artigo h2{font:600 var(--f-gd)/24px var(--display);color:var(--preto);margin:0}
.artigo h2 a{text-decoration:none;color:var(--preto)}
.artigo h2 a:hover{color:var(--ouro-tx);text-decoration:underline;text-underline-offset:3px}
.artigo time{display:block;font:400 var(--f-txt)/24px var(--corpo);color:var(--preto);margin-top:var(--r1)}
.artigo-resumo{font:400 var(--f-txt)/21px var(--corpo);color:var(--preto);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden}
.continue{display:inline-flex;align-items:center;margin-top:var(--r2);
  font:700 var(--f-base)/24px var(--display);color:var(--ouro-tx);text-decoration:none}
.continue:hover{color:var(--ouro-tx-2);text-decoration:underline;text-underline-offset:4px}
/* --- 3c. VARIACAO 2: a grade de cartoes, capa de video --- */
/* 815 de coluna com vao de 24 da tres cartoes de 255,6px. A capa e 16:9. */
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r5) var(--r4)}
.cart{display:flex;flex-direction:column;min-width:0;background:var(--branco);border:1px solid var(--regua);
  border-radius:var(--r-cartao);overflow:hidden;transition:box-shadow .16s ease,border-color .16s ease}
.cart:hover{border-color:var(--tinta-sobre-preto);box-shadow:0 6px 18px rgba(var(--preto-rgb),.10)}
.ca-capa{display:block;background:var(--regua-fina)}
/* A CAPA DO CARTAO E 16:9, E ISTO NAO E ESCOLHA DE DESENHO.
   E a mesma proporcao do recortador do editor de artigo
   (ImageCropService::PROPORCOES, onde 16:9 esta anotado como "vem do tema").
   Quem trocar este numero passa a cortar no painel numa proporcao e a exibir
   noutra. aspect-ratio reserva a caixa antes de a imagem chegar, entao o
   cartao nao pula; object-fit:cover faz a imagem PREENCHER sem deformar, e
   object-position:center guarda o miolo, que e o que o dono enquadrou. */
.ca-img{width:100%;height:auto;aspect-ratio:16/9;display:block;
  object-fit:cover;object-position:center}
.ca-corpo{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px;min-width:0}
/* --- a escala do cartao ---
   O cartao tem 255,6px no computador. A escala de dentro dele e propria, e
   nao herdada da linha de lista: 16 titulo / 14 resumo / 12 data / 11 chapeu.
   O degrau e curto de proposito; quem separa e o PESO (600 contra 400), a
   FAMILIA (display contra corpo) e a COR (preto contra #333). Com o titulo em
   17 o cartao tinha duas linhas de titulo do tamanho do resumo, e nao havia
   hierarquia dentro de 224px de largura util. */
/* O CHAPEU DA CATEGORIA. Nao e mais pastilha.
   Referencia: o chapeu (kicker) do cartao de artigo do blog da Stripe e do
   blog da Vercel, e o mesmo recurso do NYT acima da manchete: rotulo curto,
   caixa alta, entrelinha curta, na cor da marca, SEM fundo e SEM capsula.
   Motivo: num cartao de 255px a capsula dourada era o objeto mais pesado do
   bloco e competia com o titulo. Como texto, ela informa e sai da frente.
   Cor #9A6413 sobre o branco do cartao: 4,99:1, passa AA como texto normal.
   Passagem do mouse #7A4E0F: 7,18:1. */
/* align-self:flex-start porque o corpo do cartao e uma coluna flex: sem isto o
   chapeu estica na largura toda e vira uma area clicavel que atravessa o
   cartao, com o texto num canto e o alvo no resto. */
.pastilha{display:inline-block;align-self:flex-start;margin:0 0 6px;
  color:var(--ouro-tx);background:none;border:0;
  font:700 var(--f-micro)/16px var(--display);text-transform:uppercase;letter-spacing:.09em;
  text-decoration:none;max-width:100%}
.pastilha:hover{color:var(--ouro-tx-2);text-decoration:underline;text-underline-offset:3px}
/* O corte em duas linhas NAO depende do tamanho do texto:
   line-clamp corta o que passa, min-height reserva o que falta.
   42 = 2 x 21. O titulo nunca passa de duas linhas, nem no mais longo
   deste blog (121 caracteres). */
.ca-tit{font:600 var(--f-base)/21px var(--display);color:var(--preto);margin:0 0 var(--r1);min-height:42px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden}
.ca-tit a{color:var(--preto);text-decoration:none}
.ca-tit a:hover{color:var(--ouro-tx);text-decoration:underline;text-underline-offset:3px}
.ca-resumo{font:400 var(--f-txt)/20px var(--corpo);color:var(--tinta);margin:0 0 var(--r2);min-height:40px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden}
/* O PE DO CARTAO: data a esquerda, Continue lendo a direita, com um fio em
   cima. margin-top:auto prende o pe embaixo, entao a linha inteira de cartoes
   fecha alinhada seja qual for o tamanho do resumo. Juntar data e chamada numa
   linha so devolveu uma linha inteira de altura ao cartao. */
.ca-pe{margin:auto 0 0;display:flex;align-items:center;justify-content:space-between;
  gap:var(--r2);padding-top:var(--r2);border-top:1px solid var(--regua)}
.ca-pe time{font:400 var(--f-min)/16px var(--corpo);color:var(--tinta);white-space:nowrap}
.ca-pe .continue{margin:0;font:700 var(--f-txt)/20px var(--display)}
/* --- 4. paginacao --- */
.pag{padding:var(--r5) 0 0}
.pag ul{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pag a,.pag .atual{display:grid;place-items:center;min-width:40px;min-height:40px;padding:0 12px;
  font:600 var(--f-base)/1 var(--display);text-decoration:none;color:var(--preto);border-radius:var(--r-botao)}
.pag a:hover{background:var(--regua-fina);color:var(--ouro-tx)}
.pag .atual{color:var(--ouro-tx);position:relative}
.pag .atual::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:3px;background:var(--ouro)}
/* ------------------------------ 5. RODAPE PRETO --------------------------- */
.rodape{background:var(--preto);color:var(--branco);padding:var(--r8) 0 var(--r5)}
.redes{margin-left:auto;display:flex;gap:6px}
.redes a{width:var(--toque);height:var(--toque);display:grid;place-items:center;color:var(--branco);border:1px solid rgba(var(--branco-rgb),.25);border-radius:50%}
.redes a:hover{color:var(--preto);background:var(--ouro);border-color:var(--ouro)}
.rod-menu ul{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.rod-menu a{display:inline-block;padding:10px 10px;font:400 var(--f-txt)/24px var(--corpo);color:var(--tinta-sobre-preto);text-decoration:none}
.rod-menu a:hover{color:var(--ouro);text-decoration:underline;text-underline-offset:3px}
.rod-menu li+li::before{content:"·";color:var(--tinta-4);margin-right:2px}
/* ------------------------------ 6. FAIXA CREME ---------------------------- */
.creme{background:var(--creme);color:var(--tinta);padding:var(--r4) 0}
.creme ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--r2) var(--r5)}
.creme li{display:flex;align-items:center;gap:8px;font:400 var(--f-txt)/24px var(--corpo)}
.creme a{color:var(--tinta);text-decoration:none;min-height:var(--toque);display:inline-flex;align-items:center}
.creme a:hover{color:var(--ouro-tx-2);text-decoration:underline;text-underline-offset:3px}
.creme svg{color:var(--ouro-antigo-2)}
/* O CANAL VAZIO APARECE EM CINZA, E NUNCA COMO LINK (spec 0172 D2). E-mail e
   WhatsApp em branco sao decisao do dono, nao pendencia: a faixa mostra um
   exemplo apagado e nao oferece mailto: nem wa.me para lugar nenhum. */
/* ==========================================================================
   7. A GAVETA DO CELULAR
   Filha direta do corpo, position:fixed. Regra .claude/rules/ui-overlay-e-popup
   ========================================================================== */
.fundo-gaveta{position:fixed;inset:0;background:rgba(var(--preto-rgb),.6);z-index:var(--z-fundo-gaveta);display:none}
body.menu-on .fundo-gaveta{display:block}
/* A GAVETA COBRE A TELA INTEIRA (wireframe 0225). Ela media 320px e deixava
   uma faixa do site aparecendo atras: menu espremido no canto, com o conteudo
   competindo pela atencao. Aberta, ela E a tela. */
.gaveta{position:fixed;inset:0;z-index:var(--z-gaveta);width:100%;overflow:auto;
  background:var(--fundo-preto);border-left:0;padding:var(--r3);display:none;
  flex-direction:column}
body.menu-on .gaveta{display:flex}
.gaveta-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--r2);margin-bottom:var(--r2)}
.gaveta-topo b{font:700 var(--f-min)/1 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--ouro)}
.bt-fechar{width:var(--toque);height:var(--toque);display:grid;place-items:center;background:none;border:0;color:var(--branco);cursor:pointer}
/* O BOTAO DE ACAO MORA NO PE (wireframe 0225), e nao mais no topo da gaveta.
   Ele e o ultimo que o polegar alcanca depois de percorrer o menu, e o unico
   da tela. Preto sobre o dourado: 8,68:1.

   `margin-top:auto` empurra o pe para baixo dentro da coluna, entao ele fica no
   fim mesmo quando o menu e curto — e nao no meio da tela. */
.gaveta-pe{margin-top:auto;padding-top:var(--r4)}
.gaveta .bt-membros{width:100%;height:52px;margin:0;font-size:var(--f-base);letter-spacing:.03em}
.gaveta-redes{display:flex;justify-content:center;gap:var(--r4);padding:var(--r3) 0 0}
.gaveta-redes a{display:grid;place-items:center;width:var(--toque);height:var(--toque);
  min-height:var(--toque);padding:0;color:var(--fio)}
.gaveta-redes a:hover{color:var(--ouro)}
.gaveta > ul > li{border-top:1px solid rgba(var(--branco-rgb),.12)}
.gaveta a,.gaveta .bt-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:48px;padding:12px 4px;color:var(--branco);text-decoration:none;font:600 var(--f-base)/22px var(--display);
  background:none;border:0;cursor:pointer;text-align:left}
.gaveta a:hover,.gaveta .bt-sub:hover{color:var(--ouro)}
.gaveta .sub{position:static;display:none;border:0;min-width:0;padding:0 0 8px 12px;background:none}
.gaveta .tem-sub.aberto>.sub{display:block}
.gaveta .sub a{font:400 var(--f-txt)/22px var(--corpo);color:var(--fio);min-height:var(--toque);padding:8px 4px}
/* ==========================================================================
   8. A TELA DE BUSCA
   Camada em cima de tudo, FILHA DIRETA DO CORPO, inset:0. O retangulo dela
   fecha com a viewport deste documento.
   ========================================================================== */
.busca-tela{position:fixed;inset:0;z-index:var(--z-busca);display:flex;flex-direction:column}
/* Spec 0123 item 3 — a camada vestia um retangulo preto chapado, e o dono
   disse, com razao, que ela estava "fora da paleta,fora do novo design". A
   referencia e a PAGINA de busca, que ja tem a marca, a luz de fundo e a
   tipografia do tema. A luz aqui e a mesma linguagem da hero. */
.busca-fundo{position:absolute;inset:0;background:
    radial-gradient(60% 44% at 78% 12%,rgba(var(--ouro-rgb),.16),transparent 70%),
    radial-gradient(46% 38% at 12% 84%,rgba(var(--brilho-azul-rgb),.12),transparent 72%),
    rgba(var(--preto-quase-rgb),.95);
  backdrop-filter:blur(6px);
  animation:bs-fundo .16s ease-out both}
.busca-painel{position:relative;z-index:var(--z-base);display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;
  animation:bs-sobe .16s ease-out both}
@keyframes bs-fundo{from{opacity:0}to{opacity:1}}
@keyframes bs-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .busca-fundo,.busca-painel{animation:none}
}
.busca-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--r3);
  padding:var(--r4) 0 0;flex:none}
.busca-marca{display:inline-flex;align-items:center;text-decoration:none;color:var(--branco)}
.busca-marca img{display:block;height:30px;width:auto}
.busca-marca .marca-cx{font:700 var(--f-base)/1 var(--display);color:var(--branco)}
.busca-x{width:var(--toque);height:var(--toque);display:grid;place-items:center;background:none;
  border:1px solid rgba(var(--branco-rgb),.3);border-radius:50%;color:var(--branco);cursor:pointer}
.busca-x:hover{background:var(--ouro);border-color:var(--ouro);color:var(--preto)}
.busca-miolo{width:min(760px,100% - 40px);margin:0 auto;padding:var(--r7) 0 var(--r8);flex:1}
.busca-tit{font:600 var(--f-d1)/38px var(--display);color:var(--branco);margin:0 0 var(--r4);text-align:center}
.busca-form{position:relative;display:flex;align-items:center;gap:var(--r2)}
.busca-lupa{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--tinta-fraca-2);pointer-events:none;display:grid}
/* 16px no campo NAO e estilo: abaixo disso o iOS da zoom sozinho ao focar. */
.busca-campo{flex:1;min-width:0;height:62px;padding:0 18px 0 54px;background:var(--superficie-preta);color:var(--branco);
  border:1px solid var(--tinta-4);border-radius:8px;font:400 var(--f-md)/1 var(--corpo)}
.busca-campo::placeholder{color:var(--tinta-fraca-2)}
.busca-campo:focus{border-color:var(--ouro)}
.busca-ok{flex:none;height:62px;padding:0 26px;background:var(--ouro);color:var(--preto);border:0;border-radius:8px;
  font:700 var(--f-base)/1 var(--display);cursor:pointer}
/* o hover da era dourada saiu daqui: ele nao morreu quando o botao virou azul,
   porque o hover NOVO (bem mais abaixo) declara `filter`, `color` e `transform`
   e NAO declara `background`. Cascata nao apaga o que ninguem reescreve: o
   fundo continuava vindo desta linha, e o botao ficava amarelo ao passar o
   mouse. Foi o dono quem viu, em 2026-08-28. */
.busca-dica{margin:var(--r3) 0 0;font:400 var(--f-txt)/22px var(--corpo);color:var(--tinta-fraca-2)}
.busca-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--r2)}
.chip{background:var(--superficie-preta);border:1px solid var(--tinta-4);color:var(--branco);border-radius:999px;padding:9px 16px;
  font:600 var(--f-txt)/1 var(--display);cursor:pointer;min-height:var(--toque)}
.chip:hover{background:var(--ouro);border-color:var(--ouro);color:var(--preto)}
.busca-res{margin-top:var(--r5);border-top:1px solid rgba(var(--branco-rgb),.15)}
.busca-res li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r3);
  border-bottom:1px solid rgba(var(--branco-rgb),.15)}
.busca-res a{flex:1;min-width:0;display:block;padding:var(--r3) 8px;text-decoration:none;
  font:600 var(--f-base)/23px var(--display);color:var(--branco)}
.busca-res li:hover{background:var(--superficie-preta)}
.busca-res li small{flex:none;padding-right:8px;font:400 var(--f-peq)/18px var(--corpo);color:var(--tinta-fraca-3)}
/* mesmo chapeu do cartao, para a categoria ter UMA cara so no tema inteiro.
   #DC9942 sobre #0F0F0F da 7,92:1, e 7,61:1 sobre o #141414 do estado de
   passagem do mouse. */
.res-cat{color:var(--ouro);font:700 var(--f-micro)/16px var(--display);
  text-transform:uppercase;letter-spacing:.09em}
.busca-vazio{margin-top:var(--r5);padding:var(--r5) 0;font:400 var(--f-base)/24px var(--corpo);color:var(--tinta-fraca-3);text-align:center}
@media (max-width:1239px){
  body{--arte:340px}
}
/* ==========================================================================
   OS CORTES DO RESPONSIVO
   ========================================================================== */
/* 1239: a faixa deixa de ter folga e passa a ser fluida. A arte cai de 420
   para 340 e o vao volta a 40. Nada muda de forma. */
@media (max-width:1079px){
  body.v-lista .miolo,body:not(.v-lista) .miolo{display:flex;flex-direction:column;gap:var(--r7);
    padding-top:var(--r5);background-image:none}
  body.v-lista .principal,body:not(.v-lista) .principal{order:1}
  body.v-lista .lat,body:not(.v-lista) .lat{order:2}
  .col-in{position:static}
  .lat-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r4);align-items:start}
  .lat-in>.autor-cartao{grid-column:1/-1}
  /* Dois cartoes por linha ja aqui, e nao em 899: com a faixa do tablet
     centrada em 720/860, tres cartoes cairiam para 224/264px. */
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 1079: A LATERAL DESCE, nas duas variacoes.
   Conta do texto da linha de artigo: largura - 40 - 325 - 60 - 214 - 17.
   Em 1080 sao 424px e a linha ainda e uma linha. Abaixo de 415 o titulo de
   20px vira tres linhas e a linha fica mais alta que a miniatura.
   Empilhado nao existem duas colunas, entao o fio do vao e o grudento saem. */
@media (min-width:768px) and (max-width:1079px){
  .faixa{width:min(720px,100% - 56px)}
}
/* ==========================================================================
   768 a 1079: O TABLET TEM DIAGRAMACAO PROPRIA
   O tablet nao e um computador estreito nem um celular largo. A faixa deixa
   de ser "tudo menos 40" e passa a ser uma medida centrada, com respiro real
   nas laterais: 720 ate 899, e 860 de 900 para cima.
   ========================================================================== */
@media (min-width:900px) and (max-width:1079px){
  .faixa{width:min(860px,100% - 64px)}
}
@media (min-width:560px) and (max-width:1079px){
  /* O CARTAO DO AUTOR VIRA TIRA HORIZONTAL.
     Era o pior bloco do tablet: a foto de 293x220 tem width:100%, e como o
     cartao atravessa as duas colunas da lateral, ela esticava para 780px de
     largura e 586px de altura no iPad de 820. Um retrato de meia tela para
     uma bio de tres linhas. Em tira, a foto fica em 200px e o texto ao lado. */
  .autor-cartao .cartao-corpo{display:grid;grid-template-columns:200px minmax(0,1fr);
    gap:var(--r1) var(--r4);align-items:start}
  .autor-cartao .autor-foto{grid-column:1;grid-row:1/3;aspect-ratio:4/3;object-fit:cover}
  .autor-nome{grid-column:2;align-self:end;margin:0}
  .autor-bio{grid-column:2;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;line-clamp:5;overflow:hidden}
}
/* A tira do autor comeca em 560, e nao em 768: entre 560 e 767 a lateral ja e
   de uma coluna com a faixa inteira, e a foto esticava do mesmo jeito. */
@media (max-width:959px){
  .nav-desk{display:none}
  .bt-hamb{display:grid}
  .top-in{gap:12px}
  .bt-membros{width:auto;padding:0 18px;margin-left:auto}
}
/* 959: O MENU VIRA GAVETA. Logo 186 + cinco itens 428 + Membros 224 +
   lupa 44 + vaos 82 = 964. Abaixo disso a barra quebra em duas linhas. */
@media (max-width:899px){
  .busca-tit{font-size:var(--f-tit);line-height:34px}
}
/* 899: o banner empilha e o rodape vai a duas colunas.
   Empilhado, a arte deixa de ser uma placa de 340 perdida no canto e passa a
   ser uma faixa de 21:9 na largura inteira: e o lugar da imagem do dono. */
@media (max-width:767px){
  body{--mini-l:180px;--mini-a:120px}
  .lat-in{grid-template-columns:minmax(0,1fr)}
  .artigo{grid-template-columns:var(--mini-l) minmax(0,1fr)}
  .artigo:not(:has(.mini)){grid-template-columns:minmax(0,1fr)}
}
/* 767: tablet em pe estreito. A lateral volta a uma coluna, a miniatura encolhe. */
@media (max-width:559px){
  .faixa{width:calc(100% - 32px)}
  .top-in{min-height:calc(var(--topo-altura) - 16px);gap:var(--r1);flex-wrap:nowrap;padding:var(--r1) 0}
  .marca-cx{width:150px;height:38px;font-size:var(--f-micro)}
  .top .bt-membros{display:none}
  .bt-busca{margin-left:auto}
  .artigo,.artigo--sem-foto{grid-template-columns:minmax(0,1fr);gap:var(--r2)}
  .mini{width:100%;height:auto;aspect-ratio:214/142;object-fit:cover;object-position:center}
  .artigo h2{font-size:var(--f-md);line-height:24px}
  /* UM CARTAO POR LINHA. A dois, o cartao caia para 152px no piso de 360 e o
     titulo virava cinco linhas. A um, ele ganha a largura inteira e muda de
     desenho: capa grande, titulo de 18, e o resumo deixa de disputar espaco.
     O corte em duas linhas continua, mas o min-height sai: com um por linha
     nao existe vizinho para alinhar, e reservar altura vira buraco. */
  .grade{grid-template-columns:minmax(0,1fr);gap:var(--r4)}
  .ca-corpo{padding:14px 16px 16px}
  .ca-tit{font-size:var(--f-md);line-height:24px;min-height:0}
  .ca-resumo{font-size:var(--f-txt);line-height:21px;min-height:0}
  .ca-pe time{font-size:var(--f-peq)}
  /* No celular o Continue lendo e alvo de dedo, e nao so texto: com um cartao
     por linha ele vira a chamada principal do bloco. Especificidade (0,2,0)
     ganha do .continue{min-height:0} logo abaixo, que existe para o caso do
     link dentro de titulo. */
  .ca-pe .continue{font-size:var(--f-txt);min-height:var(--toque)}
  /* O RODAPE.
     Tres colunas empilhadas viravam um paredao de texto de 12 linhas seguidas.
     Agora: as redes sobem para o topo, centradas (e o que a pessoa procura),
     e as paginas institucionais viram duas colunas, sem o ponto separador,
     que so fazia sentido em linha corrida. */
  .rodape{padding:var(--r7) 0 var(--r4)}
  .redes{order:-1;margin:0;gap:var(--r2)}
  .rod-menu ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--r3)}
  .rod-menu li+li::before{content:none}
  .rod-menu a{padding:11px 0;font-size:var(--f-txt);line-height:20px}
  .creme{padding:var(--r4) 0}
  .creme ul{flex-direction:column;align-items:center;gap:var(--r1);text-align:center}
  .creme li{justify-content:center}
  .busca-miolo{width:calc(100% - 32px);padding:var(--r5) 0 var(--r6)}
  .busca-tit{font-size:var(--f-lg);line-height:30px;margin-bottom:var(--r3)}
  .busca-form{flex-wrap:wrap}
  .busca-campo{height:54px;font-size:var(--f-base);padding-left:48px}
  /* o form quebra em duas linhas aqui: centrar em 50% jogaria a lupa para o meio
     do conjunto campo mais botao. Ela passa a ancorar na altura do campo. */
  .busca-lupa{left:15px;top:27px;transform:none}
  .busca-ok{height:48px;width:100%}
  .busca-res a{grid-template-columns:88px minmax(0,1fr);gap:var(--r2)}
  /* O alvo de toque tambem por LARGURA, e nao so por pointer:coarse: no
     emulador do notebook o ponteiro continua sendo mouse, e sem isto o alvo
     de 44px nao apareceria na prova. */
  body a,body button{min-height:var(--toque)}
  .lista-lat a,.rod-menu a,.sub a{display:flex;align-items:center;min-height:var(--toque)}
  .artigo h2 a,.ca-tit a,.continue,.pastilha,.creme li a{min-height:0}
}
/* ==========================================================================
   559: CELULAR
   O topo volta a ser UMA linha: logo, lupa e hamburguer. O botao Membros sai
   da barra e vai para dentro da gaveta, em destaque. Na barra ele ocupava uma
   segunda linha inteira e empurrava o site inteiro para baixo em toda tela.
   ========================================================================== */
@media (max-width:399px){
  .faixa{width:calc(100% - 24px)}
  .cartao-corpo,.cab{padding-left:12px;padding-right:12px}
  .lista-lat a{padding-left:12px;padding-right:12px}
  .ca-corpo{padding:12px 14px 14px}
}
/* 399: o piso. Nada de novo, so o respiro final. */
@media (pointer:coarse){
  body a,body button{min-height:var(--toque)}
  .lista-lat a,.rod-menu a,.sub a{display:flex;align-items:center;min-height:var(--toque)}
  .artigo h2 a,.ca-tit a,.continue,.pastilha{min-height:0}
  .tem-sub:hover>.sub{display:none}
  .tem-sub.aberto>.sub{display:block}
}
/* ==========================================================================
   AS MARCAS DO SISTEMA (nao fazem parte do tema; nascem DESLIGADAS)
   ouro = vem do motor · cinza = arte fixa do modelo · vermelho = nao existe
   ========================================================================== */
.mk{position:relative;outline:1px dashed rgba(var(--ouro-antigo-rgb),.9);outline-offset:3px}
.mk::before{content:attr(data-n);position:absolute;top:-9px;left:-9px;z-index:var(--z-marca);
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font:700 var(--f-micro)/1 ui-monospace,Consolas,monospace;color:var(--preto);background:var(--ouro);
  box-shadow:0 0 0 1px rgba(var(--preto-rgb),.5);pointer-events:none}
.mk--fixo{outline-color:rgba(var(--cinza-rgb),.95)}
.mk--fixo::before{background:var(--tinta-sobre-preto)}
.mk--falta{outline-color:rgba(var(--vermelho-rgb),.95)}
.mk--falta::before{background:var(--vermelho);color:var(--branco);box-shadow:0 0 0 1px var(--branco)}
body.sem-marcas .mk{outline:none}
body.sem-marcas .mk::before{display:none}
@media (min-width:560px) and (max-width:1079px){
  .grade>.cart:nth-child(9){grid-column:1/-1;flex-direction:row;align-items:stretch}
  .grade>.cart:nth-child(9) .ca-capa{flex:0 0 38%;max-width:340px;display:flex}
  .grade>.cart:nth-child(9) .ca-img{aspect-ratio:auto;height:100%;width:100%;min-height:180px}
  .grade>.cart:nth-child(9) .ca-corpo{padding:18px 22px 18px 24px;justify-content:center}
  .grade>.cart:nth-child(9) .ca-tit{font-size:var(--f-gd);line-height:27px;min-height:0;
    -webkit-line-clamp:2;line-clamp:2}
  .grade>.cart:nth-child(9) .ca-resumo{min-height:0;font-size:var(--f-txt);line-height:23px;
    -webkit-line-clamp:3;line-clamp:3}
}
/* ==========================================================================
   REFINO 2026-08-24 · OS QUATRO DEFEITOS MEDIDOS NA PAGINA 16
   Vem no fim do arquivo de proposito: cada regra aqui corrige uma anterior de
   mesma especificidade, e quem vem depois vence. Nenhuma delas usa !important.
   ========================================================================== */
/* --------------------------------------------------------------------------
   2. O CARTAO ORFAO DO TABLET
   Nove cartoes em duas colunas dao quatro linhas cheias e UM sozinho, com meia
   linha vazia ao lado. Esconder o nono resolveria o buraco e mentiria sobre a
   paginacao (o rodape diz nove). Entao o nono ATRAVESSA as duas colunas e muda
   de desenho: capa a esquerda, texto a direita. Nao sobra buraco e nao some
   conteudo. Vale so onde a grade tem duas colunas: abaixo de 560 ela tem uma
   e o problema nao existe.
   -------------------------------------------------------------------------- */
@media (min-width:560px) and (max-width:899px){
  .banner-txt .bt-acesse{display:inline-flex;margin-left:auto;margin-right:auto}
}
/* --------------------------------------------------------------------------
   3. O HERO DO TABLET
   Empilhado, o texto continuava alinhado a esquerda e a arte, que e 420x287,
   esticava para 709px: 69% maior que o desenho. Na faixa em que o banner
   empilha e ainda e tablet, o conjunto passa a ser centrado e a arte ganha
   teto. A proporcao volta para 16:9, que e a do arquivo que o dono sobe.
   -------------------------------------------------------------------------- */
@media (max-width:559px){
  .rodape{padding:var(--r6) 0 var(--r3)}
  .rod-menu a{padding:9px 0;font-size:var(--f-peq)}
  .creme{padding:var(--r3) 0}
  .creme ul{gap:8px}
}
/* --------------------------------------------------------------------------
   6. O RODAPE DO CELULAR
   Media: 788px de altura numa tela de 844. Quase uma tela inteira de rodape,
   e o visitante rolava seis recomendados antes de chegar no contato. Passam a
   ser QUATRO (o suficiente para dar saida sem virar segunda capa), e o respiro
   dos tres blocos cai um degrau. O corte e por CSS porque a lista vem do
   motor: nada e removido do HTML, so deixa de ser desenhado no celular.
   -------------------------------------------------------------------------- */
@media (max-width:559px){
  .autor-cartao .cartao-corpo{display:grid;grid-template-columns:104px minmax(0,1fr);
    gap:4px var(--r2);align-items:start}
  .autor-cartao .autor-foto{grid-column:1;grid-row:1/3;width:104px;height:104px;
    aspect-ratio:1/1;object-fit:cover;border-radius:8px}
  .autor-cartao .autor-nome{grid-column:2;align-self:end;margin:0;font-size:var(--f-base);line-height:22px}
  .autor-cartao .autor-bio{grid-column:2;margin:0;font-size:var(--f-peq);line-height:20px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-clamp:4;overflow:hidden}
}
/* --------------------------------------------------------------------------
   7. O CARTAO DO AUTOR NO CELULAR
   Media: 476px de altura, mais da metade da tela. A causa e a mesma que o
   tablet ja tinha resolvido: a foto de 293x220 com width:100% estica junto com
   a coluna. No celular ela vira um retrato quadrado de 104px e o texto senta
   ao lado, como no tablet. A bio corta em quatro linhas.
   -------------------------------------------------------------------------- */
/* ==========================================================
   REFINO 2026-08-24 · HERO ALTA + HEADER EM DOIS ESTADOS
   1. A hero toma quase a tela do desktop e convida a rolagem.
      O teto em pixel e de proposito: no estudio, com o quadro
      esticado, o vh infla, e o clamp segura a altura.
   2. O header nasce transparente por cima da hero (absoluto),
      some com a rolagem e volta fixo e compacto depois de 1000px
      (classe top--fixa, posta pelo script). No compacto, Sobre e
      Contato saem do menu para nao atrapalhar a leitura.
   3. Fundo da hero preparado para imagem futura; por ora um
      brilho dourado discreto (.hero-brilho, criado pelo script).
   ========================================================== */
.top{position:absolute;top:0;left:0;right:0;z-index:var(--z-topo);background:transparent}
.banner > .faixa{position:relative;z-index:1;width:min(var(--faixa),100% - 40px);margin-left:auto;margin-right:auto}
.hero-brilho{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(48% 42% at 78% 26%,rgba(var(--ouro-rgb),.15),transparent 70%),radial-gradient(40% 36% at 12% 80%,rgba(var(--brilho-azul-rgb),.1),transparent 72%),radial-gradient(30% 26% at 50% 55%,rgba(var(--ouro-rgb),.05),transparent 75%)}
.hero-brilho::before,.hero-brilho::after{content:"";position:absolute;inset:-60px;background-repeat:repeat}
.hero-brilho::before{background-image:radial-gradient(1px 1px at 22px 34px,rgba(var(--branco-rgb),.9),transparent 60%),radial-gradient(1px 1px at 132px 92px,rgba(var(--brilho-claro-rgb),.8),transparent 60%),radial-gradient(1.4px 1.4px at 212px 162px,rgba(var(--branco-rgb),.7),transparent 60%),radial-gradient(1px 1px at 72px 208px,rgba(var(--brilho-claro-2-rgb),.6),transparent 60%);background-size:260px 260px;opacity:.75}
.hero-brilho::after{background-image:radial-gradient(1.8px 1.8px at 60px 120px,rgba(var(--brilho-claro-3-rgb),.8),transparent 60%),radial-gradient(1.4px 1.4px at 300px 40px,rgba(var(--branco-rgb),.55),transparent 60%),radial-gradient(2.2px 2.2px at 200px 260px,rgba(var(--brilho-claro-4-rgb),.5),transparent 60%);background-size:420px 420px;opacity:.5}
.rolar-convite{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;text-decoration:none;opacity:.7;transition:opacity .25s}
.rolar-convite:hover{opacity:1}
.rolar-convite .seta-v{width:12px;height:12px;border-right:2px solid var(--realce);border-bottom:2px solid var(--realce);border-radius:1px;transform:rotate(45deg)}
.rolar-convite .seta-v2{margin-top:-9px;opacity:.4}
/* o header compacto e fixo */
.top.top--fixa{position:fixed;height:auto;background:rgba(var(--preto-quase-rgb),.95);border-bottom:1px solid rgba(var(--realce-rgb),.25);box-shadow:0 8px 26px rgba(var(--preto-rgb),.45)}
@supports (backdrop-filter:blur(10px)){.top.top--fixa{background:rgba(var(--preto-quase-rgb),.8);backdrop-filter:blur(10px)}}
.top--fixa .top-in{min-height:0;height:56px}
.top--fixa .marca-cx{height:34px;width:150px;font-size:var(--f-micro)}
.top--fixa .nav-desk > ul > li:nth-child(4),
.top--fixa .nav-desk > ul > li:nth-child(5){display:none}
.top--fixa .bt-membros{height:32px;font-size:var(--f-min)}
.top--fixa .bt-busca{height:36px;width:36px}
@media (prefers-reduced-motion:no-preference){
  .hero-brilho{animation:pg-hero-brilho 9s ease-in-out infinite alternate}
  .rolar-convite .seta-v{animation:pg-seta-desce 2s ease-in-out infinite}
  .rolar-convite .seta-v2{animation:pg-seta-desce 2s .25s ease-in-out infinite}
  .hero-brilho::before{animation:pg-estrelas-cintila 5.5s ease-in-out infinite alternate}
  .hero-brilho::after{animation:pg-estrelas-deriva 90s linear infinite}
  .bt-acesse::after{animation:pg-bt-brilho 4.5s ease-in-out infinite}
  .top.top--fixa{animation:pg-topo-desce .38s cubic-bezier(.22,.8,.3,1) both}
  .top.top--saindo{animation:pg-topo-sai .24s ease-in both}
}
/* as animacoes respeitam quem pediu menos movimento */
@keyframes pg-hero-brilho{from{opacity:.5}to{opacity:1}}
@keyframes pg-hero-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pg-hero-surge{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pg-hero-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pg-seta-desce{0%,100%{opacity:.2;transform:rotate(45deg) translate(0,0)}45%{opacity:1;transform:rotate(45deg) translate(5px,5px)}}
@keyframes pg-estrelas-cintila{from{opacity:.45}to{opacity:.9}}
@keyframes pg-estrelas-deriva{from{background-position:0 0}to{background-position:420px 0}}
@keyframes pg-bt-brilho{0%,55%{left:-80%}80%,100%{left:130%}}
@keyframes pg-topo-desce{from{transform:translateY(-100%)}to{transform:none}}
@keyframes pg-topo-sai{from{transform:none}to{transform:translateY(-100%)}}
/* O BOTAO DE ACAO DO TEMA (spec 0094). Ele deixou de ser azul-para-roxo e
   passou a ser a luz da hero: a paleta nao tem mais roxo.
   A TINTA E ESCURA POR NECESSIDADE: branco sobre este azul da 1,5:1 e some.
   As duas animacoes tem papeis diferentes e nao sao enfeite: o anel respira
   devagar e diz que aquilo esta vivo; o brilho varre e diz que aquilo e
   clicavel. As duas ficam dentro de `prefers-reduced-motion:no-preference`. */
.bt-acesse{display:inline-grid;place-items:center;min-height:54px;padding:0 34px;
  background:linear-gradient(135deg,var(--brilho) 0%,var(--ouro) 100%);
  color:var(--fundo-preto);border:0;border-radius:var(--r-botao);
  font:700 var(--f-base)/1 var(--corpo);letter-spacing:.005em;
  box-shadow:0 14px 34px rgba(var(--ouro-rgb),.32),inset 0 1px 0 rgba(var(--branco-rgb),.32);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s}
.bt-acesse::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(var(--brilho-rgb),.55)}
.bt-acesse::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(var(--branco-rgb),.5) 50%,transparent 64%);
  transform:translateX(-130%)}
@media (prefers-reduced-motion:no-preference){
  .bt-acesse::before{animation:pg-bt-anel 3.4s ease-out 1.6s infinite}
  .bt-acesse::after{animation:pg-bt-varre 5s cubic-bezier(.4,0,.2,1) 2.4s infinite}
  .bt-acesse:hover::after{animation:pg-bt-varre 1.1s cubic-bezier(.4,0,.2,1)}
}
@keyframes pg-bt-anel{
  0%{box-shadow:0 0 0 0 rgba(var(--brilho-rgb),.5)}
  70%{box-shadow:0 0 0 14px rgba(var(--brilho-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--brilho-rgb),0)}
}
@keyframes pg-bt-varre{0%{transform:translateX(-130%)}22%,100%{transform:translateX(130%)}}
/* O HOVER PRECISA DECLARAR O `background`, mesmo mantendo a mesma cor.
   Sem ele, o `.bt-acesse:hover{background:var(--vermelho-vivo)}` da PRIMEIRA
   era do botao, la no topo deste arquivo, volta a valer e o botao fica
   VERMELHO ao passar o mouse. Foi o que aconteceu em producao em 2026-08-27,
   e o dono viu. Nao e ordem nem especificidade: e uma propriedade que eu
   simplesmente nao declarei, e a cascata foi buscar a ultima que existia.
   Quinto caso da mesma familia nesta semana. */
.bt-acesse:hover{
  background:linear-gradient(135deg,var(--brilho) 0%,var(--ouro) 100%);
  color:var(--fundo-preto);
  transform:translateY(-2px);
  box-shadow:0 20px 48px rgba(var(--ouro-rgb),.52),inset 0 1px 0 rgba(var(--branco-rgb),.4)}
.bt-acesse:active{transform:translateY(0)}
.bt-acesse:focus-visible{outline:2px solid var(--realce);outline-offset:3px}
/* O brilho ANTERIOR deste botao saiu daqui (spec 0094): a varredura nova, 130
   linhas acima, tem geometria propria (`inset:0`, translateX), e esta regra
   vinha depois e mandava na faixa e na inclinacao. Duas varreduras no mesmo
   pseudo-elemento nao somam: a de baixo vence, e o desenho aprovado nao era o
   que aparecia. */
.marca-cx{border-color:rgba(var(--realce-rgb),.6);color:var(--realce)}
.top .nav-desk a:hover,.top .bt-sub:hover,.top .sub a:hover{color:var(--realce)}
.top .bt-busca:hover{color:var(--realce);border-color:rgba(var(--realce-rgb),.5)}
.top a:focus-visible,.top button:focus-visible,.banner a:focus-visible{outline-color:var(--realce)}
.marca-cx:hover{border-color:var(--realce);color:var(--realce-2)}
/* o cartao de artigo premium: tag sobre a capa, data, titulo, resumo */
.grade .cart{position:relative;display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--superficie);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(var(--sombra-rgb),.03);transition:transform .25s ease,box-shadow .25s ease}
.grade .cart:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(var(--sombra-rgb),.12)}
.grade .ca-capa{display:block;overflow:hidden}
.grade .ca-img{transition:transform .45s ease}
.grade .cart:hover .ca-img{transform:scale(1.04)}
.grade .cart .pastilha{position:absolute;top:9px;left:9px;z-index:2;margin:0;display:inline-flex;align-items:center;height:15px;padding:1px 6px 0;background:rgba(var(--fundo-escuro-2-rgb),.8);color:var(--branco);font:600 var(--f-mini)/1 var(--corpo);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;border:1px solid rgba(var(--realce-rgb),.3)}
@supports (backdrop-filter:blur(4px)){.grade .cart .pastilha{background:rgba(var(--fundo-escuro-2-rgb),.65);backdrop-filter:blur(4px)}}
.grade .cart .pastilha:hover{background:var(--ouro-tx);color:var(--branco);border-color:transparent}
.grade .ca-corpo{display:flex;flex-direction:column;flex:1;padding:16px 18px 14px}
.grade .ca-meta{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.grade .ca-meta time,.grade .ca-meta .leitura{color:var(--tinta-2);font:500 var(--f-min)/1 var(--corpo);margin:0}
.lista .art-meta .leitura{color:var(--tinta-2);font:500 var(--f-min)/1 var(--corpo)}
.ca-meta .mico,.art-meta .mico{width:12px;height:12px;color:var(--tinta-marca-dagua);flex:none}
.ca-meta .mico + time,.art-meta .mico + time{margin-left:-1px}
.art-meta .mico:first-of-type{margin-left:2px}
.grade .ca-tit{margin:0 0 8px}
.grade .ca-tit a{transition:color .2s}
.grade .cart:hover .ca-tit a{color:var(--ouro-tx)}
.grade .ca-resumo{color:var(--tinta-3);font-size:var(--f-peq);line-height:1.6;margin:0 0 14px}
.grade .ca-pe{margin-top:auto;border-top:1px solid var(--art-superficie-2);padding-top:12px;display:flex;justify-content:flex-end}
.grade .ca-pe .continue{color:var(--ouro-tx);font-weight:600;transition:transform .2s,color .2s}
.grade .ca-pe .continue:hover{color:var(--ouro);transform:translateX(3px)}
/* a lista com a mesma anatomia do cartao: tag e data, titulo, resumo, continue */
.pastilha,.pastilha:hover{text-decoration:none}
.lista .art-meta{display:flex;align-items:center;gap:8px;margin:0 0 7px}
.lista .artigo .pastilha{display:inline-flex;align-items:center;height:15px;padding:1px 6px 0;background:rgba(var(--fundo-escuro-2-rgb),.85);color:var(--branco);font:600 var(--f-mini)/1 var(--corpo);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;border:1px solid rgba(var(--realce-rgb),.3)}
.lista .artigo .pastilha:hover{background:var(--ouro-tx);color:var(--branco);border-color:transparent}
.lista .art-meta time{color:var(--tinta-2);font:500 var(--f-min)/1 var(--corpo);margin:0}
.lista .artigo-corpo h2{margin-top:0}
/* PADRAO DO PROJETO: arredondamento de 8px em TUDO (decisao do PO, 2026-08-24).
   Os tokens do tema passam a valer 8px, entao qualquer elemento que use
   var(--r-cartao) ou var(--r-botao) ja obedece. Os casos com valor cravado
   entram aqui embaixo. A excecao unica e a pilula (tag, chip), que e redonda
   por natureza. Tudo que nascer daqui pra frente usa var(--r-padrao). */
:root{--r-cartao:8px;--r-botao:8px;--r-padrao:8px}
/* a altura do cabecalho, lida pela hero. Ver a nota em `.top-in`. */
:root{--topo-altura:80px}
/* onde a coluna gruda: os 56px do cabecalho compacto (`.top--fixa .top-in`)
   mais 16 de respiro. O script do cabecalho le este mesmo numero. */
:root{--col-gruda:72px}
@media (max-width:559px){:root{--topo-altura:72px}}
/* sem o traco vertical entre a listagem e a sidebar (decisao do PO):
   era um linear-gradient de fundo no miolo, posicionado para a grade antiga,
   e ficava atras dos cards na visao de lista */
body .faixa.miolo{background:none}
/* a paleta nao tem mais laranja: os tokens de ouro do tema passam a valer azul.
   --ouro e o acento sobre fundo escuro (azul diamante); --ouro-tx e o texto
   sobre branco (azul eletrico, com contraste de sobra) */
/* AS CORES SAEM DA MARCA, e nao de um azul escolhido a olho (spec 0089).
   O dono apontou a imagem oficial do blog e as cores foram TIRADAS dela, nao
   estimadas: o fundo dela e #00040A e o brilho ciano e #C9A45C.

   Sao duas cores porque uma so nao serve nos dois fundos, e a conta e essa:
     #C9A45C sobre o fundo escuro  = 8,05:1  (acento excelente)
     #C9A45C sobre o branco        = 2,55:1  (reprova; texto pede 4,5)
   Entao o ciano fica para o escuro, e o mesmo tom escurecido, #8C6D2C, carrega
   texto e fio sobre branco, com 5,93:1. Nenhum dos dois foi inventado: sao a
   mesma familia de cor da imagem que o dono usa na marca. */
:root{--ouro:#C9A45C;--ouro-tx:#8C6D2C}
/* E AS DA HERO SAIRAM DA MESMA IMAGEM, amostrando os pixels do nucleo
   luminoso (spec 0094): `--brilho` e a cor MAIS REPETIDA ali e
   `--brilho-nucleo-rgb` e o ponto mais claro. Nenhuma foi escolhida a olho, e
   e por isso que o botao e o titulo brilham na cor da propria hero.
   Contraste do botao, medido: tinta escura sobre `--brilho` da 13,71:1 e
   sobre `--ouro` da 8,05:1. Branco em cima daria 1,5:1 e sumiria, entao a
   tinta escura do botao e necessidade, e nao gosto. */
:root{
  --brilho:#E3CB95;
  --brilho-rgb:201,164,92;
  --brilho-claro:#F0E2BF;
  --brilho-nucleo-rgb:176,255,255;
  /* o degrau de titulo da hero, que nao existia: a escala parava no --f-d2 */
  --f-hero:clamp(32px,5.2vw,58px);
  /* E O DEGRAU DO TABLET, que tambem nao existia. Ele mora aqui, e nao cravado
     na media query da capa, porque a regua do tema recusa tamanho de letra
     escrito fora do :root: o valor mora na escala e o seletor so aponta. */
  --f-hero-tablet:clamp(30px,4.4vw,42px);
  --hero-altura:clamp(540px,76vh,720px);
}
/* a grade do wireframe ATUAL (pagina 16 do sistema): 1200 = 290 + 60 + 850.
   O :root la em cima ainda tem a conta antiga (325 + 60 + 815) porque o bloco
   inteiro veio do arquivo .specs/0064, que e a versao anterior do desenho.
   Estas duas linhas sao a atualizacao, e ja existiam: foram removidas em
   2026-08-26 por engano meu (comparei a capa contra o arquivo velho em vez da
   pagina 16) e estao de volta. Ver
   docs/decisoes/2026-08-26-comparei-contra-o-wireframe-errado.md */
:root{--lateral:290px;--principal:850px}
/* O SELO AUTOR dos comentarios (spec 0076, do outro arquiteto). Ele nasceu com
   style= inline no modelo, e com #DC9942: o dourado do wireframe ANTIGO, que
   sairia laranja num tema azul. Nao foi descuido dele, foi limite de escopo: o
   CSS do tema e deste agente, e classe nova exigiria mexer aqui. Fica aqui,
   entao, na cor de destaque do proprio tema. */
.cmt-quem .cmt-autor{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:var(--ouro);color:var(--superficie-preta);font:800 var(--f-micro)/1.6 var(--corpo);letter-spacing:.05em}
/* Sobe para (0,2,0) e vence `.cmt-quem span` (0,1,1), que pinta a data de cinza
   e alcançava o selo por ele ser um `<span>` irmão. Achado pelo Dev na medição
   de 2026-08-26: o fundo saía azul, certo, e o texto cinza, errado, e o selo
   ficava legível o bastante para o defeito passar despercebido. A cor escura
   aqui existe para contrastar com o azul do fundo. Nas telas escuras o mesmo
   par vale, porque o fundo do selo não muda. */
/* O BOTAO DA OFERTA e gradiente azul->roxo, nao chapado (wireframe da pagina 16,
   medido em 2026-08-26: linear-gradient(135deg,#2B5FE8,#2F5A3C), texto branco).
   O bloco la em cima veio do arquivo .specs/0064, a versao anterior do desenho,
   e por isso tem o topo em amarelo com texto preto e o do banner em VERMELHO com
   borda. Com a paleta ja trocada para azul, o vermelho ficou orfao: nao existe em
   lugar nenhum do tema atual. Estas regras atualizam os dois, e ficam aqui embaixo
   junto das outras atualizacoes, sem reescrever o bloco de origem. */
/* O `.bt-acesse` SAIU DESTE SELETOR, e isso e o conserto de um defeito medido
   (spec 0094). Este bloco veio de 2026-08-26 para atualizar a era VERMELHA la
   de cima, e ficou reivindicando `.bt-acesse` depois que a spec 0094 lhe deu
   desenho proprio 130 linhas acima. Vindo DEPOIS na cascata, ele vencia: o
   botao da hero nascia no gradiente azul-para-roxo, com tinta branca e sem as
   animacoes, e nada acusava. Medido no ar: `linear-gradient(135deg, rgb(3,105,161)...)`
   com `color: rgb(255,255,255)` e `animation-name: none`.

   E a terceira era do mesmo botao no mesmo arquivo, e o retrato disso ja
   estava escrito no commit da regua (spec 0085): "o hover do botao Acesse aparece com TRES cores diferentes,com a de baixo vencendo em silencio".
   Uma era a menos.

   O `.bt-membros`, que e o botao do CABECALHO, vai junto para a luz da marca:
   ele e o mesmo chamado da hero, e lado a lado na mesma tela um azul-ciano e um
   azul-violeta so parecem descuido. Sem o anel e sem a varredura, que sao da
   peca principal: cabecalho e moldura, nao chamada. */
.bt-membros{
  background:linear-gradient(135deg,var(--brilho) 0%,var(--ouro) 100%);
  color:var(--fundo-preto);border:0}
.bt-membros:hover,.bt-membros:focus-visible{
  background:linear-gradient(135deg,var(--brilho-claro) 0%,var(--brilho) 100%);
  color:var(--fundo-preto)}
.lista .artigo > a{border-radius:var(--r-padrao);overflow:hidden}
.lista .artigo > a > *{transition:transform .45s ease}
.lista .artigo:hover > a > *{transform:scale(1.04)}
.lista .artigo:hover h2 a{color:var(--ouro-tx)}
.autor-foto,.arte-placa,.marca-cx{border-radius:var(--r-padrao)}
.pag a,.pag .atual{border-radius:var(--r-padrao)}
.busca-campo,.busca-ok{border-radius:var(--r-padrao)}
/* paginacao premium: centralizada, botoes no padrao de 8px, atual em degrade */
.pag{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:36px;border:0;padding:0}
.pag a,.pag .atual{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 13px;border:1px solid var(--fio);border-radius:var(--r-padrao);background:var(--branco);color:var(--tinta-forte-2);font:600 var(--f-peq)/1 var(--corpo);text-decoration:none;transition:border-color .2s,color .2s,background .2s,transform .2s}
.pag a:hover{border-color:var(--ouro-tx);color:var(--ouro-tx);background:var(--art-superficie-2);transform:translateY(-1px);text-decoration:none}
.pag .atual{background:var(--ouro-tx);border-color:transparent;color:var(--branco)}
/* o rodape na identidade galaxia: tres colunas na faixa, base escura */
.rodape{background:linear-gradient(180deg,var(--fundo-escuro-2) 0%,var(--fundo-escuro) 55%,var(--fundo-preto) 100%);border-top:1px solid rgba(var(--realce-rgb),.2);padding:56px 0 44px}
.rod-grid{display:grid;grid-template-columns:1.15fr 1fr .75fr .85fr;gap:48px;align-items:start}
.rod-col h2{display:flex;align-items:center;gap:8px;color:var(--branco);font:700 var(--f-min)/1 var(--corpo);letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;padding:0;border:0;background:none}
.rod-col h2::before{content:"";width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ouro-tx),var(--ouro))}
.rod-col h2 svg{width:14px;height:14px;color:var(--ouro)}
/* Sem moldura em volta da logo do rodapé (spec 0082, palavra do dono: "está feio demais"). A borda existia para dar corpo ao FALLBACK de texto, quando o
   blog não tem imagem; com imagem, ela vira um retângulo azul em volta da
   marca. A borda passa a valer só quando não há imagem. */
.rod-logo{display:inline-grid;place-items:center;min-height:44px;color:var(--realce);font:600 var(--f-min)/1 var(--mono, monospace);letter-spacing:.14em;text-transform:uppercase}
.rod-logo:not(:has(img)){padding:0 22px;border:1px solid rgba(var(--realce-rgb),.5);border-radius:var(--r-padrao)}
.rod-logo img{display:block;height:auto;width:auto;max-height:38px;max-width:180px;object-fit:contain}
.rod-desc{color:var(--tinta-sobre-escuro);font:400 var(--f-peq)/1.7 var(--corpo);margin:16px 0 18px;max-width:300px}
.rodape .redes{display:flex;gap:10px;margin:0}
.rodape .redes a{display:grid;place-items:center;width:38px;height:38px;background:rgba(var(--branco-rgb),.05);border:1px solid rgba(var(--realce-rgb),.25);border-radius:var(--r-padrao);color:var(--tinta-sobre-escuro-2);transition:background .2s,color .2s,transform .2s,border-color .2s}
.rodape .redes a:hover{background:var(--ouro-tx);border-color:transparent;color:var(--branco);transform:translateY(-2px)}
.rodape .redes svg{width:16px;height:16px}
.rodape .rod-menu{display:block;border:0;padding:0;margin:0}
.rodape .rod-menu ul{display:block;margin:0;padding:0;gap:0}
.rodape .rod-menu li::before,.rodape .rod-menu li::after{content:none}
.rodape .rod-menu a{display:block;padding:7px 0;color:var(--tinta-sobre-escuro);font:500 var(--f-peq)/1.5 var(--corpo);text-decoration:none;transition:color .15s}
.rodape .rod-menu a:hover{color:var(--realce);text-decoration:none;border:0}
.rodape .rod-menu li{background:none;border:0;padding:0;margin:0;list-style:none}
.rodape .rod-menu li::after,.rodape .rod-menu a::after{content:none}
/* a base final: sai o creme, entra a faixa escura de assinatura */
.creme{background:var(--fundo-preto);border-top:1px solid rgba(var(--realce-rgb),.12)}
.creme .faixa{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;padding:18px 0;margin:0;list-style:none}
.creme .faixa li{display:flex;align-items:center;gap:7px;color:var(--tinta-sobre-escuro-4);font:500 var(--f-min)/1.4 var(--corpo);background:none;padding:0}
.creme .faixa a,.creme .faixa li a{color:var(--tinta-sobre-escuro-4);text-decoration:none}
.creme .faixa a:hover{color:var(--realce)}
.creme .faixa svg{width:13px;height:13px;color:var(--ouro)}
@media (max-width:899px){
  .rod-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:559px){
  /* a grade do celular saiu daqui: era a PRIMEIRA das tres eras (uma coluna
     empilhada), e o dono ja reprovou esse arranjo. Ela mora no bloco do rodape
     novo, no fim da folha. */
  .rodape{padding:44px 0 36px}
}
/* a sidebar nova: busca, redes, autor e listas claras */
.lat .lat-bloco{position:relative;background:var(--branco);border:1px solid var(--regua);border-radius:8px;padding:18px;margin-bottom:20px}
.lat .lat-bloco .cab{display:flex;align-items:center;gap:8px;background:none;color:var(--tinta-titulo);font:700 var(--f-min)/1 var(--corpo);letter-spacing:.08em;text-transform:uppercase;padding:0;margin:0 0 14px;border:0}
.lat .lat-bloco .cab::before{content:"";width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ouro-tx),var(--ouro))}
.lat .lat-bloco .cab svg{width:14px;height:14px;color:var(--ouro-tx)}
.lat-busca{padding:12px}
.lat-busca-form{display:flex;align-items:center;gap:10px;background:var(--art-superficie-2);border:1px solid var(--regua);border-radius:8px;padding:0 12px;transition:border-color .2s,box-shadow .2s}
.lat-busca-form:focus-within{border-color:var(--ouro-tx);box-shadow:0 0 0 3px rgba(var(--ouro-tx-rgb),.12)}
.lat-busca-form svg{width:15px;height:15px;color:var(--tinta-legenda);flex:none}
.lat-busca-form input{border:0;background:none;outline:none;width:100%;min-height:44px;font:400 var(--f-txt) var(--corpo);color:var(--tinta-titulo)}
/* ============ AS REDES SE ORGANIZAM PELO QUANTO EXISTEM (spec 0105) =======
   A grade era fixa em duas colunas. Com TRES redes, que e o caso do dono, a
   terceira caia sozinha na segunda linha ocupando metade da largura, e ficava
   torta. Ele descreveu exatamente assim: "fica feio com tres elemento ali,ele deveria ter um padrao".

   Agora o numero de filhos decide, e a conta e o proprio CSS que faz:
   `a:first-child:nth-last-child(N)` so casa quando existem exatamente N.

     1 rede  -> uma coluna, largura cheia
     2 redes -> duas colunas
     3 redes -> TRES colunas, uma ao lado da outra, e o rotulo vira so o icone
                (o nome continua no `aria-label`, entao leitor de tela nao perde
                nada; e o que cabe em 290px de lateral com tres botoes)
     4 redes -> duas por duas, que ja era o desenho

   E se nao houver NENHUMA, a secao inteira some, titulo junto: bloco com
   cabecalho e nada embaixo e pior que bloco nenhum. */
.lat-social-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lat-social-grade:has(a:first-child:nth-last-child(1)){grid-template-columns:1fr}
.lat-social-grade:has(a:first-child:nth-last-child(3)){grid-template-columns:repeat(3,1fr)}
.lat-social-grade:has(a:first-child:nth-last-child(3)) .lat-rede{justify-content:center;padding:11px 6px}
.lat-social-grade:has(a:first-child:nth-last-child(3)) .lat-rede span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap
}
.lat-social:not(:has(.lat-rede)){display:none}
.lat-rede{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:8px;color:var(--branco);text-decoration:none;font:600 var(--f-min) var(--corpo);box-shadow:inset 0 1px 0 rgba(var(--branco-rgb),.2);transition:transform .2s,filter .2s,box-shadow .2s}
.lat-rede svg{width:16px;height:16px;flex:none}
.lat-rede--yt{background:linear-gradient(135deg,var(--rede-youtube),var(--rede-youtube-2))}
.lat-rede--ig{background:linear-gradient(45deg,var(--rede-instagram-1),var(--rede-instagram-2) 55%,var(--rede-instagram-3))}
.lat-rede--fb{background:linear-gradient(135deg,var(--rede-facebook-2),var(--rede-facebook-3))}
.lat-rede--tk{background:linear-gradient(135deg,var(--rede-tiktok),var(--rede-tiktok-2))}
.lat-rede--tg{background:linear-gradient(135deg,var(--rede-telegram-2),var(--rede-telegram-3))}
.lat-rede:hover{color:var(--branco);transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 18px rgba(var(--sombra-azul-rgb),.25),inset 0 1px 0 rgba(var(--branco-rgb),.2)}
.lat .autor-nome{color:var(--tinta-titulo);font-size:var(--f-base);margin:12px 0 6px}
.lat .autor-bio{color:var(--tinta-4);font-size:var(--f-peq);line-height:1.6;margin:0}
.lat .lat-bloco .lista-lat{list-style:none;margin:0;padding:0}
.lat .lat-bloco .lista-lat li{background:none;padding:0;margin:0}
.lat .lat-bloco .lista-lat a{display:flex;gap:10px;padding:10px 0;font:500 var(--f-peq)/1.45 var(--corpo);text-decoration:none;background:none;transition:color .15s}
.lat .lat-bloco.lat-pop{background:linear-gradient(160deg,var(--fundo-escuro-2) 0%,var(--fundo-escuro) 70%);border-color:rgba(var(--realce-rgb),.3)}
.lat .lat-bloco.lat-pop .cab{color:var(--branco)}
.lat .lat-bloco.lat-pop .cab svg{color:var(--ouro)}
.lat-pop .lista-lat{counter-reset:pop}
.lat-pop .lista-lat li{border-bottom:1px solid rgba(var(--branco-rgb),.08)}
.lat-pop .lista-lat li:last-child{border-bottom:0}
.lat-pop .lista-lat a{color:var(--tinta-sobre-escuro-2)}
.lat-pop .lista-lat a:hover{color:var(--realce)}
.lat-pop .lista-lat a::before{counter-increment:pop;content:counter(pop,decimal-leading-zero);font:700 var(--f-min)/1.5 var(--corpo);color:var(--ouro);flex:none}
/* TETO DE 6, com "ver mais" (spec 0122, item 3). O blog tem 15 categorias e o
   dono pediu teto; com 50 a barra viraria um quilometro. Sem biblioteca: o
   `details` e so o interruptor, e a lista responde a ele pelo `:has`, que este
   tema ja usa. Item escondido nao incrementa o contador, entao a numeracao
   continua 01, 02, 03 e segue quando o resto aparece. */
.lat-cats > li:nth-child(n+7){display:none}
.lat-cats:has(+ .lat-mais[open]) > li{display:list-item}
.lat-cats:not(:has(+ .lat-mais[open])) > li:nth-child(6){border-bottom:0}
/* sem uma setima categoria nao ha o que revelar, e o interruptor some */
.lat-pop:not(:has(.lat-cats > li:nth-child(7))) .lat-mais{display:none}
.lat-mais{margin-top:2px}
.lat-mais summary{list-style:none;cursor:pointer;padding:10px 0 0;
  font:600 var(--f-min)/1.4 var(--corpo);color:var(--ouro);
  border-top:1px solid rgba(var(--branco-rgb),.08)}
.lat-mais summary::-webkit-details-marker{display:none}
.lat-mais summary:hover,.lat-mais summary:focus-visible{color:var(--realce)}
.lat-mais:not([open]) .lat-mais-b{display:none}
.lat-mais[open] .lat-mais-a{display:none}
.lat .lat-bloco.lat-rec{background:linear-gradient(160deg,var(--art-superficie-2) 0%,var(--superficie-campo) 80%);border-color:var(--fio-claro)}
.lat-rec .lista-lat li{border-bottom:1px solid rgba(var(--ouro-tx-rgb),.12)}
.lat-rec .lista-lat li:last-child{border-bottom:0}
.lat-rec .lista-lat a{color:var(--tinta-5)}
.lat-rec .lista-lat a:hover{color:var(--ouro-tx)}
.lat-rec .lista-lat a::before{content:"";width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,var(--ouro-tx),var(--ouro));flex:none;margin-top:7px}
.lat-busca-res{margin-top:10px;border-top:1px solid var(--superficie);padding-top:6px}
.lat-busca-item{display:block;padding:9px 6px;border-radius:8px;text-decoration:none;background:none;transition:background .15s}
.lat-busca-item b{display:block;color:var(--tinta);font:600 var(--f-peq)/1.4 var(--corpo)}
.lat-busca-item span{color:var(--tinta-2);font:500 var(--f-micro)/1.4 var(--corpo);text-transform:uppercase;letter-spacing:.04em}
.lat-busca-item:hover{background:var(--art-superficie-2)}
.lat-busca-item:hover b{color:var(--ouro-tx)}
.lat-busca-vazio{color:var(--tinta-legenda);font:400 var(--f-peq) var(--corpo);margin:6px 6px 2px}
/* forca da identidade contra as regras gerais do tema:
   texto e icone das redes sempre brancos, e o anel dourado
   do tema nao entra no campo de busca (o foco ja e mostrado
   pela borda azul do proprio campo) */
.lat .lat-social-grade a.lat-rede,.lat .lat-social-grade a.lat-rede span{color:var(--branco)}
.lat .lat-social-grade a.lat-rede svg{color:var(--branco);fill:currentColor}
.lat .lat-busca-form input:focus,.lat .lat-busca-form input:focus-visible{outline:0;outline-offset:0;box-shadow:none;border:0}
@media (min-width:1080px){
  body.v-lista .faixa.miolo{grid-template-columns:var(--principal) var(--lateral)}
  body.v-lista .faixa.miolo .lat{order:2}
  body.v-lista .faixa.miolo .principal{order:1}
}
/* na lista, a sidebar fica no MESMO lado dos cartoes (pedido do PO):
   o tema de fabrica invertia a lateral entre as duas variacoes, e isso
   confundia quem trocava o modo. So no desktop; o empilhamento do
   tablet e do celular nao muda. */
/* a barra da listagem: ordenar e modo de exibicao (nasce em cartoes) */
.lst-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding:10px 12px 10px 16px;background:var(--branco);border:1px solid var(--regua);border-radius:8px}
.lst-total{font:500 var(--f-peq)/1 var(--corpo);color:var(--tinta-2)}
.lst-controles{display:flex;align-items:center;gap:10px}
.lst-ordem{display:flex;align-items:center;gap:8px;font:500 var(--f-peq)/1 var(--corpo);color:var(--tinta-fraca-6)}
.lst-ordem select{appearance:none;border:1px solid var(--fio);border-radius:8px;background:var(--branco);color:var(--tinta);font:500 var(--f-peq)/1 var(--corpo);padding:9px 30px 9px 12px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--tinta-fraca-4) 50%),linear-gradient(135deg,var(--tinta-fraca-4) 50%,transparent 50%);background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;background-size:5px 5px;background-repeat:no-repeat;transition:border-color .2s}
.lst-ordem select:hover{border-color:var(--ouro-tx)}
.lst-ordem select:focus-visible{outline:2px solid var(--ouro-tx);outline-offset:2px}
/* O "Aplicar" existe para quem esta SEM JavaScript: com ele ligado, os dois
   selects enviam sozinhos e o botao e escondido pelo script. Sem ele, e o unico
   jeito de a escolha chegar ao servidor. Nasce visivel de proposito: o que
   depende de script para APARECER pode aparecer tarde; o que depende de script
   para SUMIR nunca deixa a tela quebrada. */
.lst-aplicar{border:1px solid var(--fio);border-radius:8px;background:var(--branco);color:var(--tinta);font:500 var(--f-peq)/1 var(--corpo);padding:9px 14px;cursor:pointer;transition:border-color .2s,color .2s}
.lst-aplicar:hover{border-color:var(--ouro-tx);color:var(--ouro-tx)}
.lst-aplicar:focus-visible{outline:2px solid var(--ouro-tx);outline-offset:2px}
.lst-visao{display:inline-flex;border:1px solid var(--fio);border-radius:8px;overflow:hidden}
.lst-visao button{width:38px;height:36px;display:grid;place-items:center;background:var(--branco);border:0;color:var(--tinta-fraca-2);cursor:pointer;transition:background .2s,color .2s}
.lst-visao button + button{border-left:1px solid var(--fio)}
.lst-visao button:hover{color:var(--ouro-tx)}
.lst-visao button[aria-pressed="true"]{background:var(--art-superficie-2);color:var(--ouro-tx)}
.lst-visao svg{width:16px;height:16px}
@media (prefers-reduced-motion:no-preference){
  .lst-anim{animation:lst-surge .3s ease-out}
}
@keyframes lst-surge{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:559px){
  .lst-barra{padding:10px 12px}
  .lst-total{display:none}
  .lst-aplicar{min-height:44px}
  .lst-controles{width:100%;justify-content:space-between}
}
@media (pointer:coarse){
  .lst-visao button{width:44px;height:44px}
  .lst-ordem select{min-height:44px}
}
/* a tela de busca na identidade galaxia */
.busca-tela .busca-fundo{background:radial-gradient(120% 100% at 70% 8%,var(--fundo-escuro-2) 0%,var(--fundo-escuro) 52%,var(--fundo-preto) 100%)}
.busca-topo{color:var(--tinta-sobre-escuro)}
.busca-x{width:40px;height:40px;border-radius:var(--r-padrao);background:rgba(var(--branco-rgb),.05);border:1px solid rgba(var(--realce-rgb),.2);color:var(--tinta-sobre-escuro-5);display:grid;place-items:center;transition:color .2s,border-color .2s,background .2s}
.busca-x:hover{color:var(--branco);border-color:rgba(var(--realce-rgb),.5);background:rgba(var(--realce-rgb),.12)}
.busca-tit{color:var(--branco)}
.busca-campo{background:rgba(var(--branco-rgb),.05);border:1px solid rgba(var(--realce-rgb),.2);border-radius:var(--r-padrao);color:var(--branco);min-height:54px}
.busca-campo:focus,.busca-campo:focus-visible{outline:0;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(var(--ouro-rgb),.15)}
.busca-form .busca-lupa{color:var(--tinta-sobre-escuro)}
.busca-ok{background:var(--ouro-tx);color:var(--branco);border:0;border-radius:var(--r-padrao);font-weight:700;min-height:54px;padding:0 28px;transition:transform .2s,background .2s,box-shadow .2s;box-shadow:0 10px 26px rgba(var(--ouro-tx-rgb),.3)}
/* O `background` E DECLARADO AQUI DE PROPOSITO, mesmo sendo igual ao repouso.
   Hover que muda so `filter` deixa o fundo por conta da cascata, e foi assim
   que a era dourada sobreviveu neste botao. Estado que pinta, declara a tinta
   dele. Vale para todo `:hover` deste tema. */
.busca-ok:hover{background:var(--ouro-tx);filter:brightness(1.12);color:var(--branco);transform:translateY(-1px)}
.busca-dica{color:var(--tinta-sobre-escuro)}
.busca-chips .chip{background:rgba(var(--branco-rgb),.03);border:1px solid rgba(var(--realce-rgb),.3);color:var(--realce);border-radius:999px}
.busca-chips .chip:hover{background:var(--ouro-tx);border-color:transparent;color:var(--branco)}
.busca-res .res-cat{color:var(--ouro)}
.busca-vazio{color:var(--tinta-sobre-escuro)}
/* refino de UI da busca: coluna central enxuta, respiro, campo discreto,
   e raio de 8px preservado em todos os estados (nada de quadrado no hover) */
.busca-tela .busca-miolo{max-width:680px;width:100%;margin:0 auto}
.busca-tela .busca-tit{font-size:var(--f-tit);margin:0 0 24px}
.busca-tela .busca-form{gap:10px}
.busca-tela .busca-form .busca-campo{min-height:52px;font-size:var(--f-txt);background:rgba(var(--branco-rgb),.05);border:1px solid rgba(var(--realce-rgb),.2);border-radius:var(--r-padrao);box-shadow:none}
.busca-tela .busca-form .busca-campo:focus,.busca-tela .busca-form .busca-campo:focus-visible{outline:0;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(var(--ouro-rgb),.15);border-radius:var(--r-padrao)}
.busca-tela .busca-form .busca-ok,.busca-tela .busca-form .busca-ok:hover,.busca-tela .busca-form .busca-ok:focus-visible{min-height:52px;border-radius:var(--r-padrao)}
.busca-tela .busca-x,.busca-tela .busca-x:hover{border-radius:var(--r-padrao)}
.busca-tela .busca-dica{margin:22px 0 12px;font-size:var(--f-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-sobre-escuro-6)}
.busca-tela .busca-chips{display:flex;flex-wrap:wrap;gap:10px}
.busca-tela .busca-chips .chip{padding:9px 16px;font-size:var(--f-peq);line-height:1;border-radius:999px}
.busca-tela .busca-chips .chip:hover,.busca-tela .busca-chips .chip:focus-visible{border-radius:999px}
.busca-tela .busca-res{margin-top:26px}
@media (max-width:559px){
  .busca-tela .busca-miolo{padding:24px 16px 40px}
  .busca-tela .busca-tit{font-size:var(--f-gd);margin:0 0 18px}
  .busca-tela .busca-form{gap:10px}
  .busca-tela .busca-form .busca-campo,.busca-tela .busca-form .busca-ok{min-height:48px}
  .busca-tela .busca-dica{margin:18px 0 10px;font-size:var(--f-micro)}
  .busca-tela .busca-res{margin-top:18px}
  .busca-tela .busca-res a{gap:12px;padding:12px 0}
}
/* a busca no celular: respiro lateral e escala certa */
/* o menu suspenso de Artigos na identidade galaxia */
.top .sub{background:linear-gradient(160deg,var(--fundo-escuro-2) 0%,var(--fundo-escuro) 70%);border:1px solid rgba(var(--realce-rgb),.2);border-radius:var(--r-padrao);box-shadow:0 20px 50px rgba(var(--preto-rgb),.55),0 0 0 1px rgba(var(--ouro-rgb),.05);padding:8px;min-width:216px}
.top .sub li{background:none;border:0;margin:0;padding:0}
.top .sub a{display:block;color:var(--tinta-sobre-escuro-2);font:500 var(--f-peq)/1.3 var(--corpo);padding:9px 12px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s}
.top .sub a:hover{background:rgba(var(--realce-rgb),.1);color:var(--realce);text-decoration:none}
/* a gaveta do celular e tablet na identidade galaxia */
.gaveta{background:linear-gradient(170deg,var(--fundo-escuro-2) 0%,var(--fundo-escuro) 58%,var(--fundo-preto) 100%);border-left:1px solid rgba(var(--realce-rgb),.2);box-shadow:-24px 0 60px rgba(var(--preto-rgb),.55)}
.gaveta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 26% at 82% 0%,rgba(var(--ouro-rgb),.12),transparent 70%),radial-gradient(1px 1px at 42px 96px,rgba(var(--branco-rgb),.55),transparent 60%),radial-gradient(1px 1px at 210px 210px,rgba(var(--brilho-claro-rgb),.45),transparent 60%),radial-gradient(1.4px 1.4px at 120px 330px,rgba(var(--branco-rgb),.35),transparent 60%),radial-gradient(1px 1px at 260px 430px,rgba(var(--brilho-claro-2-rgb),.4),transparent 60%)}
.gaveta > *{position:relative}
.gaveta-topo{border-bottom:1px solid rgba(var(--branco-rgb),.08)}
.gaveta-topo span,.gaveta-topo b{color:var(--tinta-sobre-escuro);font-size:var(--f-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.bt-fechar{width:38px;height:38px;display:grid;place-items:center;background:rgba(var(--branco-rgb),.05);border:1px solid rgba(var(--realce-rgb),.2);border-radius:var(--r-padrao);color:var(--tinta-sobre-escuro-5);transition:color .2s,border-color .2s,background .2s}
.bt-fechar:hover{color:var(--branco);border-color:rgba(var(--realce-rgb),.5);background:rgba(var(--realce-rgb),.12)}
.gaveta .bt-membros{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brilho),var(--ouro));color:var(--fundo-preto);border-radius:var(--r-padrao);min-height:50px;font-weight:700;margin:16px;width:auto;box-shadow:0 10px 26px rgba(var(--ouro-tx-rgb),.35),inset 0 1px 0 rgba(var(--branco-rgb),.2)}
.gaveta .bt-membros:hover{background:linear-gradient(135deg,var(--brilho-claro),var(--brilho));color:var(--fundo-preto)}
.gaveta li{border-color:rgba(var(--branco-rgb),.08);background:none}
.gaveta a:not(.bt-membros),.gaveta .bt-sub{color:var(--tinta-sobre-escuro-2);transition:color .15s,background .15s}
.gaveta a:not(.bt-membros):hover,.gaveta .bt-sub:hover{color:var(--realce);background:rgba(var(--realce-rgb),.08);text-decoration:none}
.gaveta .sub{background:rgba(var(--preto-rgb),.25);border-radius:var(--r-padrao)}
.gaveta .sub a{color:var(--tinta-sobre-escuro);font-size:var(--f-txt)}
.gaveta .sub a:hover{color:var(--realce)}
.fundo-gaveta{background:rgba(var(--preto-quase-rgb),.7);backdrop-filter:blur(4px)}
@media (max-width:559px){
  .grade .cart .pastilha,.lista .artigo .pastilha{min-height:0;height:16px;padding:1px 7px 0;font-size:var(--f-mini);line-height:1}
  /* cards alinhados a esquerda (a centralizacao foi reprovada pelo PO) */
  /* a lista no celular e um CARTAO horizontal fechado: imagem colada na borda
     esquerda em altura total, texto com limites de 2 linhas, meta compacta */
  /* lista no celular, compacta e preenchida: capa 16:9 a ESQUERDA, e ao lado
     so a regua (tag, data, leitura) e o titulo pequeno em 2 linhas. Sem resumo,
     sem quebra: o card fecha rente ao conteudo. */
  .lista .artigo{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;background:var(--branco);border:1px solid var(--superficie);border-radius:var(--r-padrao);padding:10px;margin:0 0 10px;box-shadow:0 2px 8px rgba(var(--sombra-rgb),.03)}
  .lista .artigo > a{width:118px;aspect-ratio:16/9;height:auto;margin:0;border-radius:6px;overflow:hidden;display:grid;place-items:center;background:var(--regua)}
  /* A CAPA PREENCHE A CAIXA (spec 0249 A).
     Aqui morava `> a > *{width:22px;height:22px}`, escrito para o icone de
     moldura vazia. O curinga tambem pega a IMAGEM, que e filha direta do
     mesmo link, e ela ia para 22x22 no meio de uma caixa cinza de 118. O
     `.mini` que manda o `object-fit` pesa (0,1,0) e perdia para os (0,2,1)
     daquele seletor, entao a regra certa existia e nunca valia.
     Nenhum dos tres modelos de lista (capa, listagem, busca) desenha icone
     dentro desse link: sem capa, o proprio link some duas linhas abaixo. */
  .lista .artigo > a > img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;object-position:center}
  /* Spec 0122 item 7a — no celular a moldura tem fundo e tamanho proprios,
     entao ela some inteira: sem isso sobrava um quadrado cinza de 118px. */
  .lista .artigo:not(:has(.mini)){grid-template-columns:minmax(0,1fr)}
  .lista .artigo:not(:has(.mini)) > a{display:none}
  .lista .artigo-corpo{padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
  .lista .art-meta{display:flex;align-items:center;gap:6px;margin:0;flex-wrap:nowrap;overflow:hidden;min-width:0}
  .lista .art-meta .mico{display:none}
  .lista .artigo .pastilha{flex:none;display:inline-flex;align-items:center;height:12px;padding:1px 5px 0;font-size:var(--f-mini);line-height:1;letter-spacing:.04em}
  .lista .art-meta time{font:500 var(--f-micro)/1 var(--corpo);color:var(--tinta-2);margin:0;white-space:nowrap;flex:none}
  .lista .art-meta .leitura{font:500 var(--f-micro)/1 var(--corpo);color:var(--tinta-2);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .lista .artigo-corpo h2{font-size:var(--f-peq);font-weight:500;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lista .artigo-corpo h2 a{font-weight:500}
  .lista .artigo-resumo{display:none}
  .lista .continue{display:none}
  /* cards quadrados no celular: sem resumo, titulo em ate 3 linhas */
  .top--fixa .faixa{width:calc(100% - 32px)}
  .top--fixa .top-in{height:46px;min-height:0;gap:8px;align-items:center}
  .top--fixa .marca{display:flex;align-items:center;height:100%;margin:0;padding:0}
  .top--fixa .marca-cx{height:26px;width:104px;font-size:var(--f-mini);letter-spacing:.1em}
  .top--fixa .bt-busca,.top--fixa .bt-hamb{width:36px;height:36px;min-height:36px;padding:0;display:grid;place-items:center;margin:0;align-self:center}
  .top--fixa .bt-busca{margin-left:auto}
  .grade .ca-resumo{display:none}
  .grade .ca-tit{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 10px}
  /* paginacao compacta numa linha: setas nas pontas, numeros no meio */
  .pag{gap:6px;flex-wrap:nowrap}
  .pag a,.pag .atual{min-height:42px;min-width:42px;padding:0 10px}
  .pag ul{display:flex;gap:6px;flex-wrap:nowrap;justify-content:center;margin:0;padding:0;list-style:none}
  .pag li{background:none;border:0;margin:0;padding:0}
  .pag li:first-child a{font-size:0;padding:0 13px}
  .pag li:last-child a{font-size:0;padding:0 13px}
  .pag li:first-child a::before{content:"\00AB";font-size:var(--f-base);font-weight:700;line-height:1}
  .pag li:last-child a::before{content:"\00BB";font-size:var(--f-base);font-weight:700;line-height:1}
  .lst-barra{padding:8px 10px}
  .lst-controles{width:100%;justify-content:space-between;gap:10px}
  .lst-ordem{flex:1;min-width:0}
  .lst-ordem > span{display:none}
  .lst-ordem select{width:100%;min-height:44px;background-position:calc(100% - 14px) 19px,calc(100% - 9px) 19px}
  .lst-visao{flex:none}
  .lst-visao button{width:46px;height:44px}
  /* O ARRANJO DO RODAPE NO CELULAR MORA NUM LUGAR SO, e ele fica no fim da
     folha, junto do resto do rodape novo. Aqui viviam SEIS regras da era em que
     a coluna da marca era centralizada, e elas nao morreram sozinhas quando a
     era nova chegou: as duas versoes disputavam o mesmo `max-width:559px`, e o
     resultado nao foi uma vencer, foi cada propriedade escolher a sua.
     `justify-self:center` e `text-align:center` da coluna sobreviveram porque a
     regra nova nao os mencionava; `.rod-col--marca .rod-desc{margin:auto}`
     sobreviveu por PESO (0,2,0 contra 0,1,0); e as redes foram para a esquerda
     porque ali houve empate e venceu a de baixo. Ficou uma coluna centralizada
     com o conteudo alinhado a esquerda dentro dela. Era isso o "esta feio,esta esquisito". Sobra aqui so o que a era nova nao repete. */
  .rod-col h2{font-size:var(--f-micro)}
  .rodape .rod-menu a{display:flex;align-items:center;gap:7px;font-size:var(--f-min);padding:8px 0}
  .rodape .rod-menu a::before{content:"\203A";color:var(--ouro);font-weight:700;font-size:var(--f-txt);line-height:1;flex:none}
  .lat-social-grade{grid-template-columns:1fr 1fr}
}
/* MOBILE (ate 559): o principal. Tag pequena de verdade (o piso de toque de
   44px do tema nao vale para o selo, que e informativo), conteudo centrado
   nos cartoes e na hero, paginacao com alvo de toque, rodape centrado. */
/* O CSS DO POPUP PROPRIO DO TEMA SAIU (spec 0081, item 4): eram 62 linhas de
   `.com-*` para um modal que o tema montava em JS e cujo submit jogava o lead
   fora. Quem abre o botao agora e o popup do blog (`data-pg-popup="cta"`), que
   traz o proprio estilo. CSS sem dono e armadilha para a proxima pessoa. */
@media (min-width:960px) and (max-width:1079px){
  .top-in{gap:12px}
  .marca-cx{width:150px;height:40px;font-size:var(--f-micro)}
  .nav-desk > ul{gap:14px}
  .nav-desk a,.nav-desk .bt-sub{white-space:nowrap;font-size:var(--f-peq)}
  .bt-membros{font-size:var(--f-peq);min-height:38px;height:38px;padding:0 16px;width:auto}
  .bt-busca{width:40px;height:40px}
}
/* consertos do tablet (medidos em 1024): o menu nao quebra palavra,
   e o cartao do autor vira tira horizontal, como no desenho original */
@media (min-width:768px) and (max-width:1079px){
  .lat .lat-bloco .cartao-corpo{display:grid;grid-template-columns:200px 1fr;gap:6px 16px;align-items:start}
  .lat .lat-bloco .cartao-corpo .autor-foto{width:200px;height:150px;grid-row:1 / span 2}
  .lat .lat-bloco .cartao-corpo .autor-nome{margin-top:0}
  .lat .lat-bloco .cartao-corpo .autor-bio{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  /* a hero mais baixa no tablet */
  /* a sidebar organizada em grade: busca, autor e redes de ponta a ponta,
     populares e recentes lado a lado, sem buracos */
  .lat .col-in{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .lat .lat-bloco{margin-bottom:0}
  .lat .lat-busca{grid-column:1 / -1}
  .lat .lat-bloco:has(.cartao-corpo){grid-column:1 / -1}
  .lat .lat-social{grid-column:1 / -1}
  .lat .lat-social .lat-social-grade{grid-template-columns:repeat(4,1fr)}
}
/* a hero no celular */
/* ==========================================================
   TELA DO ARTIGO (2026-08-24) · reaproveita casca, sidebar,
   rodape, busca e paleta da Home. O miolo e trocado pelo
   montador (corpoDaTela), e os relacionados sao CLONES dos
   cartoes da Home, para uma anatomia so.
   ========================================================== */
.art-hero{background:radial-gradient(120% 100% at 72% 18%,var(--fundo-escuro-2) 0%,var(--fundo-escuro) 46%,var(--fundo-preto) 100%);border-bottom:1px solid rgba(var(--realce-rgb),.3);padding:130px 0 46px;position:relative;overflow:hidden}
.art-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(48% 42% at 78% 26%,rgba(var(--ouro-rgb),.15),transparent 70%),radial-gradient(40% 36% at 12% 80%,rgba(var(--brilho-azul-rgb),.1),transparent 72%),radial-gradient(1px 1px at 132px 92px,rgba(var(--brilho-claro-rgb),.8),transparent 60%),radial-gradient(1px 1px at 260px 40px,rgba(var(--branco-rgb),.5),transparent 60%),radial-gradient(1.4px 1.4px at 200px 180px,rgba(var(--branco-rgb),.4),transparent 60%)}
.art-hero .faixa{position:relative}
/* ================= A IDENTIDADE DA HERO NAS PAGINACOES (spec 0099) ========
   Mesma imagem da capa, mais discreta e SEM o retrato: repetir a foto do dono
   em toda categoria cansa, e ela nao diz nada sobre "Metafisica" ou
   "Resultados da busca". O que amarra as telas e o fundo e o fio de luz, e nao
   a pessoa.

   A classe `--marca` existe porque `.art-hero` e a MESMA caixa em seis telas,
   e tres delas sao artigo e paginas do dono: o topo do artigo continua como
   estava, de proposito. Sem a classe, mexer aqui repintaria o topo de todo
   artigo publicado.

   `background-image` com duas camadas: a foto por baixo, e o degrade original
   por cima com transparencia, que e o que mantem o texto legivel sem escurecer
   a onda. A ordem importa: em CSS a PRIMEIRA camada fica na frente. */
.art-hero--marca{
  background-image:
    linear-gradient(90deg,
      var(--fundo-preto) 0%,
      rgba(var(--preto-rgb),.92) 30%,
      rgba(var(--preto-rgb),.62) 58%,
      rgba(var(--preto-rgb),.78) 100%),
    linear-gradient(180deg,
      rgba(var(--preto-rgb),.42) 0%,
      rgba(var(--preto-rgb),0) 38%,
      var(--fundo-preto) 100%),
    linear-gradient(transparent,transparent);
  background-size:auto,auto,cover;
  background-position:center,center,right 28%;
  background-repeat:no-repeat;
  border-bottom:0;
}
/* O CONTEUDO DO TOPO FICA CENTRALIZADO (spec 0104), decisao do dono.
   A hero da CAPA continua alinhada a esquerda, e de proposito: la existe o
   retrato dele ocupando a direita, e o texto tem para onde ir. Aqui nao ha
   figura, e texto curto encostado na esquerda de uma faixa de 1200 fica solto
   no meio do nada. */
.art-hero--marca .faixa{text-align:center}

/* OS NOMES SAO OS DO HTML, e isto custou uma entrega inteira ao dono.
   A primeira versao desta regra mirava `.art-hero-tit`, `.art-hero-sub`,
   `.art-hero-desc` e `.art-hero-meta`. NENHUMA dessas quatro classes existe em
   HTML nenhum do tema: os nomes reais sao `.art-titulo`, `.art-sub` e
   `.art-meta-hero`. As quatro regras eram letra morta, passaram na revisao e
   passaram na suite, porque CSS que nao casa com nada nao da erro em lugar
   nenhum: ele simplesmente nao faz nada, em silencio. O dono viu no ar.
   Regra que nasce daqui pra frente: `grep` do nome da classe nos .html do tema
   ANTES de escrever o seletor.

   E MIRAR `.art-hero-in > *` ALCANCAVA SO O ARTIGO. Esse wrapper existe em
   `single-padrao.html` e em mais nenhum: nas outras cinco telas o filho da
   secao e so `.faixa`. Por isso a centralizacao "funcionava" no artigo e nao
   nas paginacoes, que foi a segunda queixa. Os seletores abaixo miram as pecas
   pelo nome delas, e as seis telas usam as mesmas pecas.

   POR QUE MARGEM AUTOMATICA E NAO SO `text-align`: `.art-titulo` tem
   `max-width:820px` e `.art-sub` tem 720. Numa faixa de 1200 o `text-align`
   centraliza o TEXTO dentro da caixa, e a caixa continua encostada na
   esquerda, com `margin-right` zero. Medido: o titulo saia 190px a esquerda do
   centro da pagina e o subtitulo 240px, cada um por uma distancia diferente.
   Era isso o "esta no lugar errado,nao esta no centro". A tela de erro ja
   tinha tropecado nisso antes e resolvido no proprio bloco (`.erro-in`), o que
   mostra que o defeito e da dupla max-width + text-align, e nao desta tela. */
.art-hero--marca .art-titulo,
.art-hero--marca .art-sub,
.art-hero--marca .busca-pag-form{margin-left:auto;margin-right:auto}
/* As duas linhas que sao `flex` centralizam pelo eixo, nao pelo texto.
   A trilha so entra aqui no computador: no celular ela vira `display:block`
   com reticencias, logo abaixo, e ai quem centraliza e o `text-align` do pai.
   `center` num flex que rola na horizontal poderia esconder o comeco quando
   transborda, e e justamente no celular que ela transborda. */
.art-hero--marca .art-trilha,
.art-hero--marca .art-meta-hero{justify-content:center}

/* ============== O TOPO NO CELULAR: tres coisas, e as tres sao ar ==========
   1. O BREADCRUMB NAO QUEBRA MAIS. Ele terminava com o titulo do artigo, que
      aparece inteiro no `h1` logo abaixo: repetir custava duas ou tres linhas
      e nao informava nada. No celular ele vira UMA linha, cortada com
      reticencias; o porque de nao ser por classe esta na regra, mais abaixo.
   2. TITULO COLADO NO AUTOR. O respiro entre eles dobra.
   3. ALTURA DE MENOS, que era o que dava a sensacao de amontoado.
   Medido com o dono em 2026-08-28, na previa da 0103. */
@media (max-width:559px){
  .art-hero--marca{padding:96px 0 34px}
  /* Uma linha, com reticencias. NAO por classe no ultimo nivel: a trilha e uma
     lista dinamica (`{{#migalhas}}`) e o numero de niveis varia de dois a
     quatro, entao esconder "o ultimo" por `:last-of-type` deixa um separador
     orfao numa profundidade e come a categoria em outra. Cortar com
     `text-overflow` funciona em qualquer profundidade, e o que se perde no fim
     e o titulo do artigo, que aparece inteiro no `h1` logo abaixo. */
  .art-hero--marca .art-trilha{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin-bottom:12px;display:block
  }
  .art-hero--marca .art-titulo{line-height:1.2;margin-bottom:16px}
  .art-hero--marca .art-meta-hero{gap:7px 10px;line-height:1.5}
}

/* a camada de particulas roxa da era anterior nao entra aqui, pela mesma razao
   da capa: ela soma roxo (a cor que a paleta deixou de ter) e particula em
   cima das particulas da propria imagem */
.art-hero--marca::before{display:none}
/* o fio de luz na base, o mesmo da capa: e ele que diz que as telas sao da
   mesma familia */
.art-hero--marca::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--ouro) 0%,rgba(var(--ouro-rgb),.3) 40%,transparent 72%);
  transform-origin:left;
}
/* O FIO NASCE INTEIRO E A ANIMACAO SO O FAZ CRESCER.
   Escrito com `transform:scaleX(0)` na regra base, ele dependeria da animacao
   para aparecer, e a animacao mora numa folha que estas telas NAO carregam: o
   `@keyframes` da capa vive no `capa.css`. O fio sumiria para sempre nas
   paginacoes, em silencio. E o mesmo defeito da barra lateral na 0085, e por
   isso o quadro de cima diz que tudo nasce visivel.
   Por isso o keyframe tambem e declarado AQUI, na folha comum, e nao emprestado
   da capa. */
@keyframes pg-fio-cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .art-hero--marca::after{animation:pg-fio-cresce 1.5s cubic-bezier(.22,.61,.36,1) .35s both}
}
/* A TRILHA CABE EM UMA LINHA (spec 0082, segunda queixa do B2).
   Ela era `flex` sem controle de largura: com categoria e titulo compridos,
   quebrava em tres ou quatro linhas no celular e empurrava o H1 para baixo da
   dobra. Agora e uma linha que ROLA na horizontal quando nao cabe, com o
   ultimo degrau (o titulo do artigo) encurtado por reticencia. Rolagem
   horizontal aqui e a saida certa: cortar degrau esconderia de onde a pessoa
   veio, e quebrar linha empurra o titulo. `scrollbar-width:none` porque a
   barra sobre a faixa escura fica pior que a rolagem por gesto. */
.art-trilha{display:flex;align-items:center;gap:8px;font:500 var(--f-min)/1 var(--corpo);color:var(--tinta-sobre-escuro);margin:0 0 4px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.art-trilha::-webkit-scrollbar{display:none}
.art-trilha > *{flex:none}
/* O ultimo degrau e o titulo do artigo: e o unico que pode encolher, porque a
   pessoa ja esta nele. */
.art-trilha > a:last-of-type{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-trilha a{color:var(--tinta-sobre-escuro);text-decoration:none;white-space:nowrap}
.art-trilha a:hover{color:var(--realce);text-decoration:none}
.art-hero a.art-hero-tag,.art-hero span.art-hero-tag{display:inline-flex;align-items:center;height:15px;padding:0 6px;background:rgba(var(--fundo-escuro-2-rgb),.85);border:1px solid rgba(var(--realce-rgb),.3);color:var(--branco);border-radius:999px;font:600 var(--f-mini)/1 var(--corpo);letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px;text-decoration:none;padding-top:1px}
.art-hero a.art-hero-tag:hover{background:var(--ouro-tx);color:var(--branco);border-color:transparent;text-decoration:none}
.art-titulo{font-family:var(--display);color:var(--branco);font-size:var(--f-d3);line-height:1.2;margin:0 0 12px;max-width:820px}
.art-sub{color:var(--tinta-sobre-escuro-2);font-size:var(--f-base);line-height:1.6;margin:0 0 20px;max-width:720px}
.art-meta-hero{display:flex;flex-wrap:wrap;align-items:center;gap:16px;color:var(--tinta-sobre-escuro);font:500 var(--f-peq)/1 var(--corpo)}
/* O autor virou link (spec 0082) e precisa parecer um: herda a cor da linha,
   ganha sublinhado só na passagem do mouse e mantém o alvo de toque de 44px em
   altura, que é o piso do WCAG para dedo. */
.art-meta-hero .art-autor{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  color:inherit;text-decoration:none;transition:color .18s}
.art-meta-hero .art-autor:hover,.art-meta-hero .art-autor:focus-visible{color:var(--branco);text-decoration:underline;text-underline-offset:3px}
.art-m{display:flex;align-items:center;gap:6px}
.art-m .mico{width:13px;height:13px;color:var(--tinta-sobre-escuro)}
.blog--single .faixa.miolo{padding-top:36px}
.art-capa{margin:0 0 26px;border-radius:var(--r-padrao);overflow:hidden;background:var(--regua);aspect-ratio:16/9;display:grid;place-items:center;position:relative}
.art-capa svg{width:34px;height:34px;color:var(--tinta-fraca-3)}
/* A FOTO PREENCHE A MOLDURA SEM DEFORMAR (spec 0082).
   A moldura é 16/9 com `overflow:hidden`, mas a imagem entrava sem regra
   própria: o navegador aplicava os atributos `width=1600 height=900` do HTML,
   a largura virava 850 e a altura ficava 900, e o `object-fit` padrão (`fill`)
   ESTICAVA a foto para esse retângulo antes de o overflow cortar. Medido em
   2026-08-26: exibida 850x900 sobre um original 1600x900. O dono viu isso como
   "a qualidade ficou péssima" e a leitura estava certa: era distorção somada a
   corte, e nenhum recorte da biblioteca sobrevive a isso. */
.art-capa img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.art-capa figcaption{position:absolute;bottom:8px;right:10px;font:500 var(--f-micro)/1 var(--mono,monospace);color:var(--tinta-legenda)}
/* O TAMANHO DO TEXTO DO ARTIGO E ESCOLHA DO DONO, e ate aqui nao era.
   Personalizar tema tem o campo "tamanho do texto do artigo", o BlogThemeCss
   declara `--blog-texto-artigo` com o valor escolhido, e NENHUMA folha de
   NENHUM tema lia essa variavel. O dono tinha escolhido 17px e o site servia o
   que estava cravado nesta linha. O controle existia na tela e nao fazia nada.
   A reserva e o degrau base da escala, para o dia em que a variavel faltar. */
.art-conteudo{font:400 var(--blog-texto-artigo,var(--f-base))/1.75 var(--corpo);color:var(--tinta)}
.art-conteudo p{margin:0 0 20px}
.art-conteudo h2{font-family:var(--display);font-size:var(--f-xl);line-height:1.3;margin:34px 0 14px;display:flex;align-items:center;gap:10px}
.art-conteudo h2::before{content:"";width:20px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ouro-tx),var(--ouro));flex:none}
.art-conteudo h3{font-family:var(--display);font-size:var(--f-md);margin:26px 0 10px}
/* O reset do topo (`body ul{list-style:none}`) apaga o marcador do documento
   inteiro, e aqui so voltava o recuo: sobrava o espaco vazio, que foi o que o
   dono viu. Medido no ar em 29/08/2026: `list-style-type:none` com
   `padding-left:22px`. A `ol` nao tinha regra nenhuma e ficava com o recuo do
   navegador, desalinhada da outra. O editor e o tema padrao sempre mostraram
   certo; a regressao era so deste tema. */
.art-conteudo ul,.art-conteudo ol{margin:0 0 20px;padding-left:22px}
.art-conteudo ul{list-style:disc}
.art-conteudo ol{list-style:decimal}
.art-conteudo li{margin-bottom:8px}
/* O ITEM DE LISTA VEM COM PARAGRAFO DENTRO, e isso nao e escolha de quem
   escreve: o `listItem` do editor de blocos e `paragraph block*`, entao TODA
   lista escrita no painel sai como `<li><p>...</p></li>`. Sem esta linha, o
   `margin-bottom:20px` do paragrafo de cima entra dentro de cada item e a
   lista abre um vao de paragrafo entre um marcador e outro. */
.art-conteudo li>p{margin:0}
.art-conteudo li>p+p{margin-top:8px}
.art-conteudo li::marker{color:var(--ouro-tx)}
/* lista dentro de lista: marcador proprio, e sem repetir a margem de baixo */
.art-conteudo ul ul{list-style:circle}
.art-conteudo ul ul ul{list-style:square}
.art-conteudo ol ol{list-style:lower-alpha}
.art-conteudo ol ol ol{list-style:lower-roman}
.art-conteudo li>ul,.art-conteudo li>ol{margin:8px 0 0}
/* CITAÇÃO MINIMALISTA (spec 0082, pedido do dono: "está muito estilizado").
   Era um cartão escuro com degradê, borda azul e itálico, dentro de um artigo
   de fundo claro: chamava mais atenção que o próprio texto. O padrão editorial
   de quem faz leitura longa é o oposto disto — sem fundo, um fio fino à
   esquerda, texto um pouco maior e mais claro que o corpo, sem itálico. A
   citação deve pesar pela pausa, não pela cor. */
.art-conteudo blockquote{margin:30px 0;padding:2px 0 2px 22px;border-left:2px solid var(--regua);
  background:none;border-radius:0;color:var(--yt-tinta);font-size:var(--f-md);line-height:1.6;font-style:normal}
.art-conteudo blockquote p{margin:0 0 10px}
.art-conteudo blockquote p:last-child{margin:0}
.art-conteudo blockquote cite{display:block;margin-top:10px;font:600 var(--f-peq)/1.4 var(--corpo);
  font-style:normal;color:var(--yt-tinta-fraca)}
.art-figura{margin:26px 0;border-radius:var(--r-padrao);overflow:hidden;background:var(--regua);aspect-ratio:16/9;display:grid;place-items:center;position:relative}
.art-figura svg{width:30px;height:30px;color:var(--tinta-fraca-3)}
.art-figura figcaption{position:absolute;bottom:0;left:0;right:0;background:rgba(var(--fundo-escuro-2-rgb),.75);color:var(--tinta-sobre-escuro-2);font:500 var(--f-min)/1.4 var(--corpo);padding:8px 12px}
.art-vizinhos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 34px}
.art-viz{display:block;padding:14px 16px;border:1px solid var(--superficie);border-radius:var(--r-padrao);background:var(--branco);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.art-viz:hover{border-color:var(--ouro-tx);box-shadow:0 8px 22px rgba(var(--sombra-rgb),.08);text-decoration:none}
.art-viz span{display:block;font:600 var(--f-micro)/1 var(--corpo);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px}
.art-viz b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 var(--f-txt)/1.4 var(--corpo);color:var(--tinta-titulo)}
.art-viz--prox{text-align:right}
.art-leia-tit{font-family:var(--display);font-size:var(--f-gd);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.art-leia-tit::before{content:"";width:20px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ouro-tx),var(--ouro))}
.aut-cabeca{display:flex;align-items:center;gap:26px}
.aut-avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--ouro-tx),var(--ouro));flex:none;box-shadow:0 0 0 3px rgba(var(--realce-rgb),.25)}
.aut-textos{min-width:0}
.blog--search .lst-total{display:none}
/* a pagina larga: sem lateral, faixa inteira; exemplo de Contato */

.ct-grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.ct-tit{font-family:var(--display);font-size:var(--f-xl);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.ct-tit::before{content:"";width:20px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ouro-tx),var(--ouro))}
.ct-txt{color:var(--tinta-3);font:400 var(--f-txt)/1.7 var(--corpo);margin:0 0 20px}
.ct-canais{list-style:none;margin:0 0 26px;padding:0}
.ct-canais li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--regua-fina);color:var(--tinta);font:500 var(--f-txt)/1.4 var(--corpo)}
.ct-canais li:last-child{border-bottom:0}
.ct-canais svg{width:16px;height:16px;color:var(--ouro-tx);flex:none}
.ct-sub{font:700 var(--f-min)/1 var(--corpo);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin:0 0 12px}
.ct-redes{max-width:340px}
.ct-form{background:var(--branco);border:1px solid var(--superficie);border-radius:var(--r-padrao);padding:26px;box-shadow:0 2px 10px rgba(var(--sombra-rgb),.05)}
.ct-campo{margin-bottom:16px}
/* O FORMULARIO DO CRM ENTRA AQUI, e nao numa secao propria.
   O bloco `data-bloco="formulario"` do editor gera `.pg-crm-form` com o markup
   do BlogFormEmbedRenderer: `p > label > br > input`, sem classe nenhuma nos
   campos. Sem uma regra, o campo sai CRU do navegador (borda inset cinza,
   fonte de 13,3px, padding de 1px) no meio de um artigo desenhado.
   Conferido em producao em 2026-08-27, no popup "Acessar Comunidade".
   O desenho do campo neste tema mora num lugar SO: escrever um terceiro aqui
   daria duas verdades para a mesma coisa, que e a doenca que ja custou duas
   rodadas nesta base. O seletor e `.art-conteudo` porque as tres telas que
   imprimem conteudo do dono (single, pagina padrao e pagina larga) usam essa
   classe. */
.ct-campo label{display:block;font:600 var(--f-micro)/1 var(--corpo);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px}
.art-conteudo .pg-crm-form label{display:block;font:600 var(--f-micro)/1 var(--corpo);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px}
.ct-campo input,.ct-campo textarea,
.art-conteudo .pg-crm-form input,
.art-conteudo .pg-crm-form select,
.art-conteudo .pg-crm-form textarea{width:100%;min-height:46px;padding:12px 14px;border:1px solid var(--fio);border-radius:var(--r-padrao);background:var(--superficie-campo);color:var(--tinta-titulo);font:400 var(--f-txt)/1.4 var(--corpo);outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}
.ct-campo input:focus,.ct-campo textarea:focus,
.art-conteudo .pg-crm-form input:focus,
.art-conteudo .pg-crm-form select:focus,
.art-conteudo .pg-crm-form textarea:focus{border-color:var(--ouro-tx);box-shadow:0 0 0 3px rgba(var(--ouro-tx-rgb),.12)}
.ct-campo input::placeholder,.ct-campo textarea::placeholder,
.art-conteudo .pg-crm-form input::placeholder,
.art-conteudo .pg-crm-form textarea::placeholder{color:var(--tinta-marca-dagua)}
/* O `<br>` do gerador separava rotulo e campo; o respiro agora e margem, que
   se mede e se ajusta. E `box-sizing` porque o gerador escreve
   `style="width:100%"` INLINE no campo: sem isto o padding estoura a caixa. */
.art-conteudo .pg-crm-form{display:flex;flex-direction:column;gap:var(--r2);margin:var(--art-ritmo) 0}
.art-conteudo .pg-crm-form>p{margin:0}
.art-conteudo .pg-crm-form label br{display:none}
.art-conteudo .pg-crm-form input,
.art-conteudo .pg-crm-form select,
.art-conteudo .pg-crm-form textarea{box-sizing:border-box}
.art-conteudo .pg-crm-form textarea{min-height:96px}
.ct-campo.invalido input,.ct-campo.invalido textarea{border-color:rgba(var(--vermelho-erro-rgb),.6);box-shadow:0 0 0 3px rgba(var(--vermelho-erro-rgb),.08)}
.ct-erro{display:block;min-height:0;font:400 var(--f-min)/1.4 var(--corpo);color:var(--vermelho-vivo);margin-top:4px}
.ct-enviar,
.art-conteudo .pg-crm-form button{width:100%;min-height:50px;background:var(--ouro-tx);color:var(--branco);border:0;border-radius:var(--r-padrao);font:700 var(--f-txt)/1 var(--corpo);cursor:pointer;box-shadow:0 12px 30px rgba(var(--ouro-tx-rgb),.3),inset 0 1px 0 rgba(var(--branco-rgb),.2);transition:transform .2s,background .2s}
.ct-enviar:hover,
.art-conteudo .pg-crm-form button:hover{filter:brightness(1.12);transform:translateY(-2px)}
.art-conteudo .pg-crm-form button:focus-visible{outline:2px solid var(--ouro-tx);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .ct-enviar,.art-conteudo .pg-crm-form button{transition:none}
  .ct-enviar:hover,.art-conteudo .pg-crm-form button:hover{transform:none}
}
.ct-nota{text-align:center;color:var(--tinta-marca-dagua);font:400 var(--f-min)/1.4 var(--corpo);margin:12px 0 0}
.ct-ok{background:var(--branco);border:1px solid var(--superficie);border-radius:var(--r-padrao);padding:34px;text-align:center}
.ct-ok .ct-tit{justify-content:center}
@media (min-width:768px) and (max-width:1079px){
  .ct-grade{gap:28px}
}
@media (max-width:767px){
  .ct-grade{grid-template-columns:1fr;gap:30px}
  .ct-form{padding:20px}
}
.erro-in .art-titulo{max-width:none}
.erro-in .art-sub{max-width:none;margin-left:auto;margin-right:auto}
.ml-bt .mico{width:13px;height:13px}
.ml-progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none}
.ml-progresso span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ouro-tx),var(--ouro),var(--ouro))}
body.modo-leitura aside.lat{display:none}
body.modo-leitura .faixa.miolo{display:block}

/* ═══ C1 (spec 0157): O CABECALHO NAO VOLTA EM MODO LEITURA ═══
   Era o incomodo que o dono relatou: ele rolava, o topo reaparecia e cobria o
   texto que ele estava lendo. Em leitura, o unico elemento fixo no topo e a
   barra de progresso de 3px, que informa e nao atrapalha. Fora da leitura o
   cabecalho continua voltando ao rolar, de proposito — la ele e navegacao.

   SAO DOIS ESTADOS DO MESMO ELEMENTO, E A PRIMEIRA VERSAO MATOU OS DOIS
   (spec 0162 item 3). O `header.top` no seletor escondia o cabecalho TAMBEM no
   alto da pagina: clicar em modo leitura fazia a capa do artigo perder o topo de
   80px de uma vez, e a pagina parecia ter quebrado no clique. So o FLUTUANTE
   incomoda quem le, e ele e o mesmo elemento com a classe `top--fixa`, que o
   script poe ao rolar. Escondendo so a classe, o cabecalho existe uma vez, no
   comeco, e nunca mais volta — que e o que foi pedido. */
body.modo-leitura .top--fixa{display:none}

/* ═══ C2: O TEXTO CRESCE, EM VEZ DE ENCOLHER ═══
   O modo leitura estreitava a coluna de 850 para 760 e mantinha a letra: quem
   liga "modo leitura" espera ler MELHOR, e o que acontecia era o texto ficar
   mais apertado. Agora sao 880px e 20px, com a entrelinha proporcional (1.9),
   que e a medida do wireframe da pagina 33. A familia da fonte nao muda: trocar
   a letra no meio da leitura e mais desorientador do que o ganho. */
body.modo-leitura main.principal .col-in{max-width:880px;margin:0 auto}
body.modo-leitura .art-conteudo{font-size:var(--f-leitura);line-height:1.9}
body.modo-leitura .art-conteudo p{font-size:var(--f-leitura);line-height:1.9}

/* ═══ C3: O BOTAO DE LEITURA NA BARRA LATERAL ═══
   No topo, separado por um traco dos icones de compartilhar, e com o rotulo
   ESCRITO embaixo do icone. Palavra do dono: "que a pessoa entenda que e pra modo leitura,ate escrito se possivel". Sem a separacao ele vira o setimo
   icone de uma fileira de seis. */
.art-fixa .ml-bt{display:grid;place-items:center;gap:3px;width:40px;padding:6px 0;
  border:0;background:none;color:var(--tinta-2);cursor:pointer;font:inherit;border-radius:10px}
.art-fixa .ml-bt:hover,.art-fixa .ml-bt:focus-visible{color:var(--ouro-tx);background:var(--superficie)}
.art-fixa .ml-bt .mico{width:18px;height:18px}
/* UMA PALAVRA, UM DEGRAU ACIMA DO MINIMO (spec 0163).
   Era "Modo leitura" em --f-mini (8px), quebrado em DUAS linhas dentro de 40px.
   Oito pixels e o degrau do "selo minusculo": nao e tamanho de rotulo que
   alguem le.

   E A CAIXA ALTA SAIU JUNTO, POR MEDICAO. Ela era parte do tratamento de selo
   dos 8px. Em 11px, "LEITURA" rende 49px num botao de 40: vazava 2px para FORA
   da barra e ficava torto, porque com `nowrap` o texto so cresce para a direita.
   Em caixa normal, "Leitura" ocupa 38 dos 40 e "Sair" ocupa 22 — os dois em uma
   linha, e o `nowrap` impede que um fallback de fonte devolva a quebra pela
   porta de tras. Alargar a barra nao era saida: cada pixel a mais empurraria a
   borda esquerda de volta para fora da janela. */
.art-fixa .ml-bt-rot{font:700 var(--f-micro)/1.15 var(--corpo);letter-spacing:.02em;text-align:center;white-space:nowrap}
/* LIGADO, A TINTA E BRANCA — E ELA ERA AZUL SOBRE AZUL (spec 0166 A).
   Medido em producao: fundo rgb(3,105,161), icone rgb(3,105,161), rotulo
   rgb(3,105,161). Contraste 1:1. O icone e a palavra "Sair" estavam la, com
   tamanho e opacidade normais, e a tela mostrava um quadrado azul liso.

   As duas metades vinham de arquivos diferentes, e nenhuma estava errada
   sozinha: o FUNDO azul vem da regra .ml-bt[aria-pressed="true"] do
   single-padrao.css, e a TINTA azul vinha desta linha, com especificidade
   maior (0,3,0 contra 0,2,0). A de maior peso venceu, como manda o CSS, e
   pintou a tinta da mesma cor do fundo que a outra tinha posto. E a quinta
   vez que este tema perde uma declaracao para uma homonima em outro arquivo.

   O branco sobre este azul da 5,9:1, bem acima dos 4,5:1 do AA. */
.art-fixa .ml-bt[aria-pressed="true"]{color:var(--branco)}
/* E o passar o mouse NAO pode apagar de novo: a regra de hover pinta o fundo
   de --superficie, que e claro, e a tinta branca sumiria ali. Com o modo
   ligado, o botao mantem o azul embaixo do branco. */
.art-fixa .ml-bt[aria-pressed="true"]:hover,
.art-fixa .ml-bt[aria-pressed="true"]:focus-visible{color:var(--branco);background:var(--ouro-tx)}
.art-fixa-traco{display:block;height:1px;background:var(--superficie);margin:2px 6px 4px}

/* C5 — no celular a letra sobe para 21px e o respiro lateral aumenta. O
   cabecalho ja saiu pela regra do C1, que nao tem media query de proposito: o
   topo que volta ao rolar incomoda nas duas larguras. */
@media (max-width:767px){
  body.modo-leitura .art-conteudo,
  body.modo-leitura .art-conteudo p{font-size:var(--f-leitura-mob);line-height:1.86}
  body.modo-leitura main.principal .col-in{max-width:none;padding-left:20px;padding-right:20px}
}
@media (min-width:768px) and (max-width:1079px){
  .art-hero{padding:110px 0 40px}
  .art-titulo{font-size:var(--f-d1)}
}
@media (max-width:559px){
  .art-hero{padding:92px 0 30px}
  .art-titulo{font-size:var(--f-xl)}
  .art-sub{font-size:var(--f-txt)}
  .art-conteudo{font-size:var(--blog-texto-artigo,var(--f-base))}
  .art-conteudo h2{font-size:var(--f-gd)}
  .art-vizinhos{grid-template-columns:1fr}
  .art-viz--prox{text-align:left}
  .aut-cabeca{gap:14px}
  .aut-avatar{width:60px;height:60px}
  .art-hero a.art-hero-tag,.art-hero span.art-hero-tag{min-height:0;height:15px;padding:1px 6px 0;line-height:1}
  .art-hero .art-trilha a{min-height:0;min-width:0;padding:0}
}
/* rodape escuro nas telas do YouTube */
/* comentarios (fundo claro: artigo padrao) */
.cmt{margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--regua)}
/* O `.cmt-tit` era declarado AQUI E no single-padrao.css, e o segundo vencia
   por ordem de arquivo. Os dois sairam na 0162, junto com o titulo "Conversa". */
.cmt-form{background:var(--art-superficie-2);border:1px solid var(--regua);border-radius:var(--r-padrao);padding:18px}
.cmt-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 12px}
.cmt-campo{display:flex;flex-direction:column;gap:6px}
.cmt-campo>span{font:600 var(--f-min)/1 var(--corpo);color:var(--tinta-3);letter-spacing:.02em}
/* O ASTERISCO DE CAMPO OBRIGATORIO passa a usar o vermelho DO TEMA (spec 0088).
   Em --vermelho-campo (#D24B4B) ele media 4,0:1 sobre a superficie clara do
   campo, abaixo dos 4,5:1 do AA. O tema ja tinha um vermelho que passa:
   --vermelho (#C81E1E) da 5,3:1 no mesmo fundo. Usar o que existe e melhor do
   que inventar um tom novo, e tira do tema um vermelho quase igual a outro. */
.cmt-campo i{font-style:normal;color:var(--vermelho)}
.cmt-campo input,.cmt-campo textarea{width:100%;border:1px solid var(--fio);border-radius:var(--r-padrao);background:var(--branco);padding:11px 12px;font:400 var(--f-txt)/1.5 var(--corpo);color:var(--fundo-escuro-3)}
.cmt-campo input:focus,.cmt-campo textarea:focus{outline:none;border-color:var(--ouro-tx);box-shadow:0 0 0 3px rgba(var(--ouro-tx-rgb),.15)}
.cmt-campo textarea{resize:vertical;min-height:96px}
.cmt-rodape{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 0;flex-wrap:wrap}
.cmt-aviso{margin:0;display:flex;align-items:center;gap:7px;font:400 var(--f-min)/1.5 var(--corpo);color:var(--tinta-2)}
.cmt-aviso svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.cmt-enviar{border:0;border-radius:var(--r-botao);padding:0 22px;height:44px;background:var(--ouro-tx);color:var(--branco);font:600 var(--f-txt)/1 var(--corpo);cursor:pointer;transition:filter .15s ease}
.cmt-enviar:hover{filter:brightness(1.12)}
.cmt-lista{list-style:none;margin:24px 0 0;padding:0}
.cmt-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:0 0 18px}
.cmt-filho{margin-left:52px}
.cmt-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--ouro-tx),var(--ouro))}
.cmt-quem{margin:0 0 5px;display:flex;align-items:baseline;gap:8px}
.cmt-quem b{font:600 var(--f-txt)/1.2 var(--corpo);color:var(--fundo-escuro-3)}
.cmt-quem span{font:400 var(--f-min)/1.2 var(--corpo);color:var(--tinta-2)}
.cmt-txt{margin:0 0 6px;font:400 var(--f-txt)/1.7 var(--corpo);color:var(--tinta)}
.cmt-resp{border:0;background:none;padding:0;font:600 var(--f-min)/1 var(--corpo);color:var(--ouro-tx);cursor:pointer}
.cmt-resp:hover{text-decoration:underline}
/* comentarios na single do YouTube (fundo preto) */
.ytw-main .cmt{margin:26px 0 0;padding:22px 0 0;border-top:1px solid rgba(var(--branco-rgb),.1)}
.ytw-main .cmt-tit{color:var(--regua-fina)}
.ytw-main .cmt-tit span{background:rgba(var(--branco-rgb),.08);color:var(--tinta-sobre-preto)}
.ytw-main .cmt-form{background:rgba(var(--branco-rgb),.05);border-color:rgba(var(--branco-rgb),.1)}
.ytw-main .cmt-campo>span{color:var(--tinta-sobre-preto)}
.ytw-main .cmt-campo input,.ytw-main .cmt-campo textarea{background:var(--superficie-preta);border-color:rgba(var(--branco-rgb),.2);color:var(--regua-fina)}
.ytw-main .cmt-campo input::placeholder,.ytw-main .cmt-campo textarea::placeholder{color:var(--yt-marca-dagua)}
.ytw-main .cmt-aviso{color:var(--tinta-fraca-5)}
.ytw-main .cmt-quem b{color:var(--regua-fina)}
.ytw-main .cmt-quem span{color:var(--tinta-fraca-5)}
.ytw-main .cmt-txt{color:var(--tinta-sobre-preto)}
.ytw-main .cmt-resp{color:var(--yt-link)}
@media (max-width:767px){
  .cmt-campos{grid-template-columns:1fr}
  .cmt-rodape{align-items:stretch}
  .cmt-enviar{width:100%}
  .cmt-filho{margin-left:24px}
}
/* vitrine de cursos (CPT produtos) */
.cur-wrap{background:linear-gradient(180deg,var(--fundo-escuro-2),var(--fundo-preto) 60%);padding:0 0 56px}
.cur-destaque{position:relative;min-height:clamp(380px,52vh,520px);display:flex;align-items:flex-end;padding:150px 0 44px;background:radial-gradient(120% 100% at 78% 30%,rgba(var(--ouro-tx-rgb),.35),transparent 62%),radial-gradient(80% 80% at 20% 10%,rgba(var(--botao-rgb),.2),transparent 60%)}
.cur-destaque::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,transparent,var(--fundo-preto))}
.cur-dtxt{position:relative;z-index:1;width:min(1200px,100% - 48px);margin:0 auto}
.cur-selo{display:inline-flex;align-items:center;height:22px;padding:1px 10px 0;border-radius:999px;background:rgba(var(--fundo-escuro-2-rgb),.85);border:1px solid rgba(var(--realce-rgb),.3);color:var(--realce);font:600 var(--f-micro)/1 var(--corpo);letter-spacing:.08em;text-transform:uppercase}
.cur-dtit{margin:14px 0 10px;max-width:640px;font:700 clamp(28px,4vw,44px)/1.12 var(--display);color:var(--branco)}
.cur-dsub{margin:0 0 22px;max-width:560px;font:400 var(--f-base)/1.7 var(--corpo);color:var(--tinta-sobre-escuro-3)}
.cur-dacoes{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cur-bt{display:inline-flex;align-items:center;height:50px;padding:0 28px;border-radius:var(--r-botao);background:var(--ouro-tx);color:var(--branco);font:600 var(--f-txt)/1 var(--corpo);text-decoration:none;box-shadow:0 12px 30px rgba(var(--ouro-tx-rgb),.3);transition:filter .15s ease,transform .15s ease}
.cur-bt:hover{filter:brightness(1.12);transform:translateY(-1px)}
.cur-dmeta{font:500 var(--f-peq)/1.4 var(--corpo);color:var(--tinta-sobre-escuro)}
.cur-faixa{width:min(1200px,100% - 48px);margin:0 auto}
.cur-fila{margin:0 0 34px}
.cur-fcab{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.cur-ftit{margin:0;font:700 var(--f-md)/1.2 var(--display);color:var(--art-superficie-2)}
.cur-setas{display:flex;gap:8px}
.cur-seta{width:34px;height:34px;border-radius:var(--r-botao);border:1px solid rgba(var(--realce-rgb),.2);background:rgba(var(--branco-rgb),.05);color:var(--yt-tinta-clara);font:400 var(--f-gd)/1 var(--corpo);cursor:pointer;transition:background .15s ease}
.cur-seta:hover{background:rgba(var(--realce-rgb),.15);color:var(--branco)}
.cur-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:186px;gap:16px;overflow-x:auto;padding:4px 2px 6px;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.cur-trilho::-webkit-scrollbar{display:none;height:0}
.cur-card{scroll-snap-align:start;text-decoration:none;display:block}
.cur-capa{position:relative;display:grid;place-items:center;aspect-ratio:2/3;border-radius:var(--r-padrao);background:linear-gradient(160deg,var(--yt-fundo),var(--fundo-escuro));border:1px solid rgba(var(--realce-rgb),.15);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cur-capa svg{width:26px;height:26px;opacity:.3}
.cur-lupa{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;justify-content:center;height:34px;border-radius:var(--r-botao);background:var(--ouro-tx);color:var(--branco);font:600 var(--f-min)/1 var(--corpo);opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.cur-card:hover .cur-capa{transform:translateY(-4px);border-color:rgba(var(--realce-rgb),.4);box-shadow:0 16px 34px rgba(var(--preto-rgb),.45)}
.cur-card:hover .cur-lupa{opacity:1;transform:none}
.cur-card b{display:block;margin:10px 0 3px;font:600 var(--f-peq)/1.4 var(--corpo);color:var(--superficie)}
.cur-meta{display:block;font:400 var(--f-min)/1.4 var(--corpo);color:var(--tinta-sobre-escuro)}
.cur-wrap a.cur-card,.cur-wrap a.cur-card b,.cur-wrap a.cur-bt{text-decoration:none}
.cur-wrap a.cur-card b{color:var(--superficie)}
.cur-wrap a.cur-bt{color:var(--branco)}
@media (prefers-reduced-motion:reduce){
  .cur-capa,.cur-lupa,.cur-bt{transition:none}
}
@media (min-width:768px) and (max-width:1079px){
  .cur-destaque{padding:120px 0 36px;min-height:340px}
  .cur-dtxt,.cur-faixa{width:calc(100% - 48px)}
  .cur-trilho{grid-auto-columns:168px}
}
@media (max-width:767px){
  .cur-destaque{padding:104px 0 28px;min-height:0}
  .cur-dtxt,.cur-faixa{width:calc(100% - 28px)}
  .cur-dsub{font-size:var(--f-txt)}
  .cur-bt{width:100%;justify-content:center}
  .cur-setas{display:none}
  .cur-trilho{grid-auto-columns:142px;gap:12px}
  .cur-fila{margin:0 0 26px}
}
.av-barra{position:absolute;left:12px;right:64px;bottom:14px;height:4px;border-radius:2px;background:rgba(var(--branco-rgb),.25)}
.av-barra i{display:block;width:34%;height:100%;border-radius:2px;background:var(--nota-barra)}
.av-tempo{position:absolute;right:12px;bottom:8px;font:500 var(--f-min)/1.4 var(--corpo);color:var(--branco)}

/* ======================================================================
   PONTE PARA O QUE O SISTEMA GERA (spec 0072)
   Menu e paginacao nao sao escritos no modelo: o motor os injeta prontos,
   com as classes dele (`blog-menu*`, `blog-paginacao`).
   ====================================================================== */
.nav-desk>.blog-menu>ul,.gaveta .blog-menu ul{list-style:none;margin:0;padding:0}
.nav-desk>.blog-menu>ul{display:flex;align-items:center;gap:22px}
.nav-desk .blog-menu__item--tem-filhos{position:relative}
.nav-desk .blog-menu__nivel--2{position:absolute;top:100%;left:-16px;display:none;min-width:216px;padding:8px;
  background:linear-gradient(160deg,var(--fundo-escuro-2) 0%,var(--fundo-escuro) 70%);border:1px solid rgba(var(--realce-rgb),.2);
  border-radius:var(--r-padrao);box-shadow:0 20px 50px rgba(var(--preto-rgb),.55);z-index:30}
.nav-desk .blog-menu__item--tem-filhos:hover>.blog-menu__nivel--2,
.nav-desk .blog-menu__item--tem-filhos:focus-within>.blog-menu__nivel--2,
.nav-desk .blog-menu__item--tem-filhos.aberto>.blog-menu__nivel--2{display:block}
.nav-desk .blog-menu__nivel--2 a{display:block;padding:9px 12px;border-radius:6px;border-bottom:0;
  font:500 var(--f-peq)/1.3 var(--corpo);color:var(--tinta-sobre-escuro-2)}
.nav-desk .blog-menu__nivel--2 a:hover{background:rgba(var(--realce-rgb),.1);color:var(--realce);text-decoration:none}
.gaveta .blog-menu__nivel--2{display:none;padding:0 0 8px 12px;background:rgba(var(--preto-rgb),.25);border-radius:var(--r-padrao)}
.gaveta .blog-menu__item--tem-filhos.aberto>.blog-menu__nivel--2{display:block}
.gaveta .blog-menu__nivel--2 a{font-size:var(--f-txt);color:var(--tinta-sobre-escuro)}

.blog-paginacao{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:36px}
.blog-paginacao ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.blog-paginacao a,.blog-paginacao .atual{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border:1px solid var(--yt-tinta-clara);border-radius:var(--r-botao);
  font:600 var(--f-txt)/1 var(--corpo);color:var(--tinta-3);text-decoration:none}
.blog-paginacao a:hover{border-color:var(--ouro-tx);color:var(--ouro-tx);background:var(--art-superficie-2)}
.blog-paginacao .atual{background:var(--ouro-tx);border-color:transparent;color:var(--branco)}

/* ------------------------------------------- pecas que o wireframe nao tinha */
.vazio-tela{text-align:center;padding:56px 24px;border:1px dashed var(--fio);border-radius:var(--r-padrao);background:var(--superficie-campo)}
.vazio-tela h2{margin:0 0 8px;font:700 var(--f-gd)/1.25 var(--display);color:var(--fundo-escuro-3)}
.vazio-tela p{margin:0 0 18px;font:400 var(--f-txt)/1.6 var(--corpo);color:var(--tinta-2)}
/* `.erro-sugestoes` saiu junto com o bloco "Talvez voce procure por" da tela de
   nao encontrada (29/08/2026, decisao do dono: a 404 e seca). */
/* A LOGO TEM TETO NOS DOIS EIXOS (spec 0082).
   O teto era só de altura (44px), e logo comprida cresce na LARGURA sem
   esbarrar em nada: a do dono ficou com 251px, quase um quinto da faixa de
   1200, e no celular ela espremia o resto do cabeçalho. Altura manda no
   ritmo vertical; largura manda no espaço que sobra para o menu. Precisa
   das duas. */
/* A CAIXA DA LOGO PRECISA TER A PROPORCAO DA IMAGEM (spec 0106).
   O `width`/`height` do HTML nao dimensiona nada aqui (quem manda sao os
   `max-` abaixo): ele serve para o navegador RESERVAR o espaco antes de a
   imagem chegar. Estava `180x44`, proporcao 4,09, enquanto a logo do dono e
   1707x298, proporcao 5,73, e renderiza 190x33. Resultado: uma caixa 11px mais
   alta que a imagem, com a logo boiando dentro, e um salto de layout no
   carregamento. O dono viu no emulador: "a logotipo ficou desalinhada com o header,com a busca,com o menu".
   Os atributos agora batem com a proporcao real.
   FRAGILIDADE CONHECIDA: se ele trocar a logo por uma de outra proporcao,
   isto desalinha de novo. A cura definitiva e o motor emitir a largura e a
   altura da midia, e ela entra no desenho das configuracoes globais do tema. */
.marca-img{display:block;height:auto;width:auto;max-height:40px;max-width:190px;object-fit:contain}
@media (max-width:1079px){ .marca-img{max-height:34px;max-width:150px} }
@media (max-width:479px){ .marca-img{max-height:30px;max-width:126px} }
/* No cabeçalho que aparece na rolagem a barra é mais baixa, e a logo desce junto. */
.top--fixa .marca-img{max-height:32px;max-width:158px}
.art-hero-in{position:relative}
.blog-cmt{clear:both}
.larga-miolo{display:block;padding:36px 0 56px}
.larga-miolo .principal{width:100%;max-width:none}
.ct-conteudo{max-width:none}

/* Rodape preto nas duas telas do YouTube: elas sao archive e single como as
   outras, entao nao ha classe de corpo que as separe. Quem responde e a
   presenca do bloco delas na pagina. */
body:has(.yt-wrap) .rodape,body:has(.ytw-wrap) .rodape{background:var(--superficie-preta);border-top:1px solid rgba(var(--branco-rgb),.08)}
body:has(.yt-wrap) .rodape::before,body:has(.ytw-wrap) .rodape::before,
body:has(.yt-wrap) .rodape::after,body:has(.ytw-wrap) .rodape::after{display:none}
body:has(.yt-wrap) .rodape a,body:has(.ytw-wrap) .rodape a{color:var(--tinta-sobre-preto)}
body:has(.yt-wrap) .rodape a:hover,body:has(.ytw-wrap) .rodape a:hover{color:var(--branco)}
body:has(.yt-wrap) .rodape p,body:has(.ytw-wrap) .rodape p{color:var(--tinta-fraca-5)}
body:has(.yt-wrap) .creme,body:has(.ytw-wrap) .creme{background:var(--fundo-preto)}

/* ====================================================================
   MÍDIA DO CONTEÚDO: vídeo e áudio (spec 0080)

   O tema nasceu sem uma linha para as peças de mídia do SISTEMA, e o custo
   apareceu no uso: vídeo do YouTube, vídeo hospedado e áudio saíam sem
   desenho nenhum dentro do artigo. Contei em 2026-08-26: o Núcleo Expert
   tem estilo de vídeo em 4 arquivos e de áudio em 3; este tinha ZERO. O
   construtor e as telas do blog receberam atenção; o que o motor injeta
   DENTRO do conteúdo, não.

   O desenho vem do Núcleo Expert, que já está provado no ar, e as cores
   entram por uma PONTE de variáveis: as `--art-*` que ele consome passam a
   apontar para as deste tema. Assim vídeo e áudio seguem a paleta daqui
   sozinhos, e uma troca de cor do tema chega neles sem ninguém lembrar. É a
   mesma ideia da ponte que já existe para a paginação e o menu.
   ==================================================================== */
:root{
  --art-marca:var(--ouro);
  --art-marca-tinta:var(--ouro-tx);
  --art-tinta:var(--tinta);
  --art-tinta-media:#5f6875;
  --art-tinta-fraca:#8b93a1;
  --art-borda:var(--regua);
  --art-borda-forte:#d2dae8;
  --art-escuro:#10151f;
  --art-superficie-2:#f3f6fc;
  --art-titulo:var(--display);
  --art-texto:var(--corpo);
  --art-midia:100%;
  --art-raio:var(--r-padrao,8px);
  --art-raio-p:var(--r-padrao,8px);
  --art-ritmo:var(--r4);
  --art-trans:.24s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce){ :root{ --art-trans:0s } }

/* ==========================================================================
   A REGUA DO TEMA (spec 0085)

   A folha tinha 801 literais de cor escritos na mao contra 450 usos de
   variavel: a regua existia e ninguem alcancava ela na hora de escrever. Eram
   246 cores distintas, 143 delas usadas UMA vez, e 384 pares que diferem por
   menos do que o olho enxerga (#f1f3f7 contra #f1f3f8, #eaeaea contra
   #e9e9e9). Cada par desses e uma pergunta sem resposta para quem edita: qual
   das duas e a certa?

   Este bloco fecha a lista. Ele vem no FIM do arquivo de proposito: os :root
   de cima sao corrigidos pelos de baixo (o --ouro nasce dourado la em cima e
   termina azul na linha 719), e nada pode sombrear o que esta declarado aqui.

   COMO ESCOLHER O NOME: pelo PAPEL, nunca pela cor. --fio diz onde se usa;
   --cinza-claro so repete o que o olho ja viu, e mente no dia em que o fio
   deixar de ser cinza.
   ========================================================================== */
:root{
  /* --- superficie e fio --- */
  --superficie:#ECEEF3;          /* fundo e fio claros de cartao, campo e caixa */
  --fio:#E2E2E2;                 /* o fio neutro de separacao */
  --superficie-campo:#FBFCFE;    /* fundo de campo de formulario */
  --superficie-preta:#141414;    /* caixa preta: marca, campo de busca */
  --fundo-escuro:#0F2A1C;        /* a faixa escura: rodape, gaveta, tela de busca */
  --fundo-escuro-2:#143524;      /* a segunda era da mesma faixa (ver nota abaixo) */
  --fundo-preto:#0A2015;         /* o veu por tras da tela de busca */
  --fundo-audio:#2F5A3C;         /* a capa do bloco de audio */

  /* --- tinta --- */
  --tinta-titulo:#222222;        /* titulo dentro de bloco claro */
  --tinta-2:#667085;             /* meta: data, tempo de leitura */
  --tinta-3:#5B6472;             /* resumo e texto de apoio */
  --tinta-fraca-2:#9A9A9A;       /* dica e texto de campo vazio */
  --tinta-fraca-3:#BFBFBF;       /* o mais fraco que ainda passa no contraste */
  --tinta-marca-dagua:#98A2B3;   /* placeholder e nota de rodape de formulario */
  --tinta-legenda:#8A93A6;       /* legenda de imagem */
  --tinta-sobre-escuro:#B9C7B4;  /* texto sobre a faixa escura */
  --tinta-sobre-escuro-2:#E6ECDF;/* o mesmo, um degrau mais claro (link, icone) */
  --tinta-sobre-preto:#CFCFCF;   /* texto sobre a caixa preta */

  /* --- acao --- */
  --botao:#2F5A3C;               /* fundo do botao de acao */
  --botao-2:#7E55F0;             /* passagem do mouse */
  --botao-3:#3D6EF5;             /* a variante azul do mesmo botao */
  --realce:#E3CB95;              /* o acento claro: seta, foco, detalhe */
  --vermelho-vivo:#E02525;       /* alerta e botao de inscricao */
  --verde-ok:#0F9C6C;            /* confirmacao: voto registrado, link copiado */
  --verde-ok-2:#16A34A;          /* o segundo tom do degrade de confirmacao */
  --fundo-escuro-3:#17202C;      /* superficie escura de bloco de midia */
  --fundo-escuro-4:#101A3D;      /* o azul mais claro do degrade do CTA */
  --tinta-sobre-escuro-3:#C9CEDE;/* fio de botao sobre fundo claro */

  /* --- as cores DE MARCA ---
     Estas nunca consolidam com vizinha. O verde do WhatsApp e o azul do
     Facebook sao propriedade de quem os desenhou: aproximar uma delas em dois
     pontos de RGB nao e arredondar, e escrever errado a cor de outra empresa.
     O teste da regua trata este grupo a parte, e casa so por valor exato. */
  --rede-whatsapp:#25D366;
  --rede-facebook:#1877F2;
  --rede-pinterest:#E60023;
  --rede-telegram:#229ED9;

  /* --- a rampa de cinza ---
     A folha usa NOVE degraus de cinza puro, de #222 a #EFEFEF. Nao foi
     desenhado assim: foi somando. Estao todos nomeados para que a proxima
     pessoa veja a rampa inteira de uma vez e possa encurta-la com o dono. */
  --tinta-forte-2:#444444;
  --tinta-4:#666666;
  --tinta-fraca-4:#888888;
  --tinta-fraca-5:#AAAAAA;

  /* --- azul sobre fundo escuro --- */
  --tinta-sobre-escuro-4:#7C8DB0;
  --tinta-sobre-escuro-5:#9BB3D8;
  --realce-2:#F4EFE4;
  --azul-2:#205CBC;
  --ouro-tx-3:#2453CE;
  --roxo-2:#6C33A0;
  --botao-4:#603CC8;

  /* --- O QUE SOBROU DA ERA DOURADA, e o nome diz isso de proposito.
     O tema deixou de ser dourado na linha 719, e o nome `--ouro-antigo`
     ficou de proposito: quem ler daqui a um ano precisa saber que isto e
     resto de uma decisao revogada, e nao uma escolha de hoje.
     Os VALORES estao mais abaixo, junto do `--ouro-antigo-rgb`, e sao
     apelidos. Ficavam aqui, em hexadecimal da era dourada, ao mesmo tempo
     em que a versao nova era declarada la: duas linhas do mesmo nome no
     mesmo `:root`, a 59 linhas de distancia. Quem apagasse a de baixo
     achando que era repeticao devolveria o amarelo ao ar. */

  /* --- as outras redes, tambem exatas --- */
  --rede-youtube:#FF3B3B;
  --rede-youtube-2:#C4001D;
  --rede-instagram-1:#F58529;
  --rede-instagram-2:#DD2A7B;
  --rede-instagram-3:#8134AF;
  --rede-facebook-2:#2D88FF;
  --rede-facebook-3:#1465D8;
  --rede-tiktok:#FE2C55;
  --rede-tiktok-2:#101010;
  --rede-telegram-2:#37AEE2;
  --rede-telegram-3:#1E96C8;

  /* --- sinal --- */
  --nota-barra:#FF0033;          /* o preenchimento da barra de nota */

  /* --- os que faltavam nomear --- */
  --tinta-5:#3A4763;             /* link na lista de recomendados */
  --tinta-fraca-6:#555555;
  --tinta-sobre-escuro-6:#667C9F;/* a dica da tela de busca */
  --fio-claro:#D5E2FB;           /* fio do cartao claro */

  /* --- O BLOCO DE VIDEO tem paleta PROPRIA, e isto e proposital.
     Ele imita a tela do YouTube, entao segue a paleta de la, e nao a do tema.
     Nomear com prefixo proprio evita que alguem, arrumando a cor do tema um
     dia, arraste junto uma cor que existe justamente para nao acompanhar. */
  --yt-fundo:#16224A;
  --yt-tinta:#3D4657;
  --yt-tinta-fraca:#7B8494;
  --yt-tinta-clara:#DCE5F7;
  --yt-marca-dagua:#7C8698;
  --yt-link:#8FB4FF;

  /* --- as bases em numero, para as opacidades ---
     rgba() nao aceita var() no lugar da cor inteira, entao a base viaja como
     trio de numeros e o alfa fica na declaracao. Sem isto o branco aparecia
     com VINTE E TRES opacidades diferentes no arquivo, de .03 a .9, e ninguem
     saberia dizer quais eram degraus e quais eram digitacao. */
  --branco-rgb:255,255,255;
  --preto-rgb:0,0,0;
  --realce-rgb:227,203,149;
  /* O PAR EM NUMERO DO --ouro-tx, e ele TEM de andar junto (spec 0089).
     A troca de paleta moveu --ouro-tx para #8C6D2C e atualizou os pares de
     --ouro e de --realce, mas deixou este para tras: o halo de foco saia no
     azul ANTIGO ao lado de uma borda no azul novo, em quinze pontos de quatro
     folhas. E a mesma cor escrita duas vezes, que e a doenca de duas fontes de
     verdade desta base. Medido no navegador: borda rgb(3,105,161) com halo
     rgba(43,95,232,.12). */
  --ouro-tx-rgb:3,105,161;
  --fundo-escuro-rgb:15,42,28;
  --sombra-rgb:15,23,42;
  --superficie-rgb:238,242,248;
  --ouro-rgb:201,164,92;
  --preto-quase-rgb:8,8,8;
  --cinza-rgb:140,140,140;
  --vermelho-rgb:200,30,30;
  /* O BRILHO DO HERO: seis azuis claros em opacidade baixa, empilhados em
     radial-gradient. Sao seis de verdade, e nao repeticao: cada um e uma
     camada do brilho, e aproximar duas achataria o efeito. */
  --brilho-roxo-rgb:124,77,255;
  --brilho-azul-rgb:46,107,255;
  --brilho-claro-rgb:186,222,255;
  --brilho-claro-2-rgb:158,200,255;
  --brilho-claro-3-rgb:210,235,255;
  --brilho-claro-4-rgb:140,190,255;
  --vermelho-erro-rgb:220,38,38;
  --sombra-azul-rgb:10,20,60;
  --botao-rgb:110,69,226;
  --fundo-escuro-2-rgb:9,14,34;
  /* O ULTIMO RESQUICIO DA ERA DOURADA, RESOLVIDO (spec 0086).
     O anel de foco do site inteiro e mais oito fios e molduras ainda usavam
     `rgba(220,153,66,.85)`, o dourado do desenho anterior, num tema que virou
     azul. Foram nomeados e a troca parou aqui, com razao: virar a cor e mudar o
     desenho, e isso e decisao do dono. O dono decidiu em 2026-08-26: "resolva".

     O nome fica, para quem procurar por `ouro-antigo` achar esta nota e
     entender que a era dourada acabou aqui.

     O VALOR E UM APELIDO, e nao o numero repetido. Escrever `79,195,247` aqui
     criaria duas variaveis com o mesmo valor escrito duas vezes: no dia em que
     o azul do tema mudar, `--ouro-rgb` muda e o anel de foco do site inteiro
     fica para tras, sem ninguem perceber. E a mesma doenca de duas fontes de
     verdade que ja custou duas vezes neste tema. Apelido tem uma verdade so. */
  --ouro-antigo-rgb:var(--ouro-rgb);

  /* A 0086 APELIDOU O `-rgb` E ESQUECEU OS TRES HEXADECIMAIS, e eles ficaram
     vivos por mais dois meses. O dono viu o botao da busca ficar AMARELO ao
     passar o mouse, em 2026-08-28, e a varredura da 0104 nao pegou porque ela
     procurou roxo: ninguem procurou amarelo.

     Sao apelidos pela mesma razao da nota acima: uma verdade so.
     `--ouro-tx-2` e hover de TEXTO sobre fundo claro, entao nao pode ser o
     apelido do `--ouro-tx` (hover igual ao repouso nao da retorno nenhum): e o
     mesmo azul um degrau mais escuro, medido em 8,88:1 sobre branco e 8,21:1
     sobre o fundo dos cartoes, contra os 4,5 que a regra pede. O marrom que
     estava no lugar (#7A4E0F) dava 7,18:1, ou seja, passava no contraste e
     mesmo assim estava errado: contraste nao diz se a cor pertence ao tema. */
  --ouro-antigo:var(--ouro);
  --ouro-antigo-2:var(--ouro);
  --ouro-tx-2:#6F561F;

  /* --- a escala de tamanho de letra ---
     Eram 31 tamanhos, com pares que ninguem distingue: 13 e 13.5, 14 e 14.5,
     12 e 12.5. Meio pixel nao e decisao de desenho, e resto de ajuste. Estes
     sao os degraus, e o teste da regua recusa tamanho fora deles. */
  --f-mini:8px;                  /* selo minusculo, em caixa alta */
  --f-micro:11px;                /* etiqueta */
  --f-min:12px;                  /* apoio */
  --f-peq:13px;                  /* meta */
  --f-txt:14px;                  /* texto de interface */
  --f-base:16px;                 /* corpo */
  --f-md:18px;                   /* subtitulo */
  --f-leitura:20px;              /* corpo do artigo em modo leitura, no computador */
  --f-leitura-mob:21px;          /* o mesmo no celular: tela menor pede letra maior */
  --f-gd:20px;                   /* titulo de bloco */
  --f-lg:22px;                   /* titulo de secao */
  --f-xl:24px;                   /* titulo de cartao grande */
  --f-tit:26px;                  /* titulo de artigo */
  --f-d1:30px;                   /* display */
  --f-d2:32px;                   /* display, o segundo degrau */
  --f-d3:38px;                   /* display grande */

  /* AS DUAS EXCECOES, e o porque de cada uma.
     O numeral da tela de nao encontrada e desenho, nao texto: 118px na tela
     larga e 78px no celular. Nao ha degrau de escala que sirva a um algarismo
     que ocupa meia tela, e enfia-lo na escala so faria a escala mentir. */
  --f-erro:118px;
  --f-erro-p:78px;

  /* A JANELA DO RODAPE (spec 0088). A altura mora aqui porque DOIS lugares
     precisam do mesmo numero: a propria janela e o respiro que o rodape ganha
     embaixo enquanto ela esta aberta. Escrito duas vezes, um dia um muda e o
     outro nao, e a ultima linha do artigo volta a ficar escondida. */
  --doca-altura:76px;
  /* Acima do veu da gaveta e ABAIXO da gaveta: com a gaveta aberta, quem manda
     na tela e o menu. Numero solto em z-index nao entra neste tema. */
  --z-doca:45;
}
/* DUAS ERAS DE FUNDO ESCURO, e as duas estao no arquivo.
   `.rodape{background}` e declarado mais de uma vez, com #0F2A1C e com
   #143524, e o mesmo vale para `.bt-acesse:hover`, que aparece com tres cores
   diferentes. Nao e paleta: e a folha guardando camadas de recoloracao, uma
   por cima da outra, com a de baixo vencendo em silencio. Nomear as duas nao
   conserta isso, so para de fingir que existe uma so. Arrancar a era morta e
   outra tarefa, e ela precisa de olho no navegador tela a tela. */

/* ==========================================================================
   A JANELA DO RODAPE DO PLAYER DE AUDIO (spec 0088)

   O dono pediu: "quando estiver em reproducao deve ter a janela no fim da tela com a reproducao enquanto o usuario le o conteudo da pagina".

   Ela e a MESMA faixa da caixa de cima, nunca uma segunda copia tocando: quem
   toca continua sendo o <audio> que vive dentro do artigo, e esta barra so
   mostra e comanda. Por isso pausar num pausa no outro, sem sincronismo
   nenhum para manter.

   ELA E FILHA DIRETA DO <body>, e isso nao e detalhe. Este tema tem ancestrais
   com `transform` (as transicoes da casca), e `position:fixed` dentro de um
   deles passa a valer a area DAQUELE ancestral, nao a tela. O mesmo defeito ja
   apareceu cinco vezes nas specs 0014 e 0015. Ver .claude/rules/ui-overlay-e-popup.md.

   E `[hidden]` PRECISA da regra de cura ao lado: `[hidden]` sozinho empata em
   especificidade com a classe e perde para quem vem depois na cascata. Com o
   `display:flex` declarado aqui, esconder por atributo so funciona porque
   `.pgaudio-doca[hidden]` tem 0,2,0 e vence nas duas ordens.
   ========================================================================== */
.pgaudio-doca{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-doca);
  display:flex;align-items:center;gap:var(--r2);
  min-height:var(--doca-altura);
  padding:var(--r2) max(var(--r3),calc((100vw - var(--faixa)) / 2));
  background:linear-gradient(145deg,var(--fundo-escuro-3) 0%,var(--art-escuro) 100%);
  border-top:1px solid rgba(var(--branco-rgb),.08);
  box-shadow:0 -14px 34px -20px rgba(var(--preto-rgb),.9);
  color:var(--superficie);font-family:var(--corpo)
}
.pgaudio-doca[hidden]{display:none}
.pgaudio-doca-capa{
  width:48px;height:48px;flex:none;border-radius:var(--r-padrao);
  background:linear-gradient(140deg,var(--fundo-audio),var(--fundo-escuro-3));
  background-size:cover;background-position:center;display:grid;place-items:center
}
.pgaudio-doca-capa::after{content:"¶B";font-size:var(--f-base);color:rgba(var(--branco-rgb),.55)}
.pgaudio-doca-capa--img::after{content:none}
.pgaudio-doca-info{flex:1 1 auto;min-width:0}
.pgaudio-doca-titulo{
  margin:0 0 6px;font:600 var(--f-peq)/1.3 var(--corpo);color:var(--branco);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.pgaudio-doca-barra{height:4px;border-radius:999px;background:rgba(var(--branco-rgb),.2);overflow:hidden}
.pgaudio-doca-barra span{display:block;height:100%;width:0;border-radius:999px;background:var(--art-marca)}
.pgaudio-doca-play,
.pgaudio-doca-x{
  appearance:none;flex:none;cursor:pointer;display:grid;place-items:center;border-radius:50%
}
.pgaudio-doca-play{
  width:44px;height:44px;border:0;background:var(--art-marca);color:var(--art-escuro)
}
.pgaudio-doca-play svg{width:20px;height:20px;fill:currentColor;margin-left:1px}
.pgaudio-doca--tocando .pgaudio-doca-play svg{margin-left:0}
.pgaudio-doca-play:hover{filter:brightness(1.08)}
.pgaudio-doca-x{
  width:36px;height:36px;border:1px solid rgba(var(--branco-rgb),.2);
  background:none;color:var(--superficie);font-size:var(--f-txt);line-height:1
}
.pgaudio-doca-x:hover{background:rgba(var(--branco-rgb),.1);color:var(--branco)}
.pgaudio-doca-play:focus-visible,
.pgaudio-doca-x:focus-visible{outline:2px solid var(--branco);outline-offset:2px}
/* O RESPIRO EMBAIXO, e ele e obrigatorio no celular. Sem isto a janela cobre a
   ultima linha do artigo e ela fica inalcancavel: nao ha para onde rolar. O
   respiro vai no RODAPE, e nao no corpo, para o espaco nascer com a cor escura
   do rodape em vez de uma faixa branca embaixo dele. */
body.pg-doca-aberta .rodape{padding-bottom:calc(var(--doca-altura) + var(--r4))}
@media (max-width:559px){
  .pgaudio-doca{gap:var(--r1);padding-left:var(--r2);padding-right:var(--r2)}
  .pgaudio-doca-capa{width:40px;height:40px}
  .pgaudio-doca-x{width:32px;height:32px}
}

/* ===================== O RODAPE NOVO (spec 0104) =========================
   Aprovado pelo dono em 28/08/2026. Tres mudancas, e a terceira e a que ele
   discutiu:
   1. uma CHAMADA para a comunidade em cima. ELA SAIU na 0121, a pedido do
      dono: "no rodape eu quero que remova aquela secao,deixe somente o rodape". O popup continua vivo, chamado pelo cabecalho e pela capa;
   2. o fundo da marca dissolvendo no preto, para o rodape pertencer ao mesmo
      site que a hero;
   3. a coluna do meio deixou de listar ARTIGOS e passou a listar ASSUNTOS.
      Uma lista de artigos no rodape envelhece: em tres meses ela aponta para o
      que ja saiu da frente, e some do ar sem ninguem perceber. Uma lista de
      categorias nao envelhece.
      Ela sai de `{{ menu:assuntos }}`, e por isso o MENU PRECISA EXISTIR antes
      deste modelo subir: sem ele a coluna nasce com titulo e nada embaixo. */
/* O FUNDO DA MARCA, dissolvendo. `mask-image` em vez de um degrade por cima:
   assim o preto do rodape aparece por baixo sem precisar de uma segunda
   camada opaca, e o texto nunca perde contraste. */
.rodape{position:relative;isolation:isolate;overflow:hidden}
.rodape::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background:linear-gradient(transparent,transparent) center 74% / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,rgba(var(--preto-rgb),.85) 0%,transparent 62%);
  mask-image:linear-gradient(180deg,rgba(var(--preto-rgb),.85) 0%,transparent 62%);
}

/* A COLUNA DE ASSUNTOS SE PARTE EM DUAS QUANDO A LISTA CRESCE.
   Com sete categorias empilhadas ela media 234px de altura contra 182 da coluna
   da marca, e cada link carregava 110px de texto dentro de 381px de coluna: uma
   torre estreita e alta no meio de um rodape largo, com as vizinhas terminando
   muito antes. Partida em duas, a altura cai para perto de 134 e as tres
   colunas fecham na mesma faixa.

   Quem conta e o proprio CSS: `:has(li:nth-child(6))` so casa quando existe um
   sexto item. Com cinco ou menos a lista continua numa coluna, que e o certo,
   e num navegador sem `:has()` sobra exatamente o comportamento de hoje. Mesmo
   desenho das redes da lateral, e a falha e segura pelo mesmo motivo. */
@media (min-width:900px){
  .rodape .rod-menu ul:has(li:nth-child(6)){
    display:grid;grid-template-columns:1fr 1fr;column-gap:18px;
  }
}

/* NO CELULAR AS DUAS COLUNAS DE LINKS FICAM LADO A LADO, e a esquerda.
   Empilhadas e centralizadas viravam uma fila comprida no meio da tela: lista
   curta centralizada le pior que alinhada, porque o olho perde a margem de
   referencia. A marca fica sozinha em cima, ocupando as duas colunas. */
@media (max-width:559px){
  .rod-grid{grid-template-columns:1fr 1fr;gap:var(--r4) var(--r3);text-align:left}
  .rod-grid > .rod-col--marca{grid-column:1 / -1}
  .rodape .rod-col h2{justify-content:flex-start}
  .rodape .redes{justify-content:flex-start}
  .rod-desc{margin-left:0;margin-right:0}
}

/* ------------------- os tres blocos de layout do editor (0172 A) */

/* Cartao, grade e numero. Eles chegam do EDITOR e valem no artigo, na pagina
   do blog e no popup, entao moram aqui, que e a unica folha que o sistema
   serve em TODA tela deste tema (ver LEIA-ME, item 1).

   A lista e a mesma em tres lugares: BlogHtmlSanitizer::CLASSES_DO_EDITOR, o
   CLASSES_DOS_BLOCOS de resources/js/blog-editor.js, e este bloco.

   Cor e tamanho saem da regua (ReguaDoTemaTest): nenhum literal aqui. */

.pg-cartao{
  border:1px solid var(--regua);
  border-radius:var(--r-cartao);
  background:var(--branco);
  padding:16px 18px;
  margin:0 0 14px;
}
.pg-cartao--claro{background:var(--superficie);border-color:var(--superficie)}
/* A TERCEIRA APARENCIA (0204): a caixa escura, que e a chamada da marca. Ela
   reusa a superficie preta que o tema ja tem para a marca e a busca, e o ouro
   sobre ela e o par que este tema usa desde sempre. Nada de cor nova. */
.pg-cartao--escuro{
  background:var(--superficie-preta);
  border-color:var(--superficie-preta);
  color:var(--branco);
}
.pg-cartao--escuro h2,.pg-cartao--escuro h3,.pg-cartao--escuro h4,
.pg-cartao--escuro strong{color:var(--branco)}
.pg-cartao--escuro a{color:var(--ouro)}
.pg-cartao>:first-child{margin-top:0}
.pg-cartao>:last-child{margin-bottom:0}

.pg-grade{display:grid;gap:16px;margin:0 0 16px}
.pg-grade--2{grid-template-columns:1fr 1fr}
.pg-grade--3{grid-template-columns:repeat(3,1fr)}
.pg-grade>.pg-cartao{margin-bottom:0}
/* TEXTO DENTRO DA GRADE OCUPA A LINHA INTEIRA (spec 0206).

   A grade sempre aceitou paragrafo, titulo, lista e citacao como filhos: o que
   faltava era o desenho. Sem esta regra o texto virava CELULA, saia com metade
   da largura ao lado dos numeros, e a legenda daqueles numeros parecia uma
   quinta metrica sem valor.

   Quem continua sendo celula e o que E cartao: numero, cartao, contato,
   etiquetas e imagem. Texto e legenda, e legenda atravessa. */
.pg-grade>p,
.pg-grade>h2,
.pg-grade>h3,
.pg-grade>h4,
.pg-grade>h5,
.pg-grade>h6,
.pg-grade>ul,
.pg-grade>ol,
.pg-grade>blockquote{grid-column:1 / -1}


/* A GRADE TAMBEM TEM APARENCIA (0204), e sao as mesmas tres do cartao. E ela
   que desenha "as quatro metricas dentro de uma caixa clara" do wireframe: a
   alternativa seria deixar cartao aceitar grade, e como a grade ja aceita
   cartao isso abriria grade dentro de grade pelo caminho de tras.
   Com fundo, a grade ganha o padding e o raio que o cartao tem. */
.pg-grade--claro,.pg-grade--escuro{padding:16px 18px;border-radius:var(--r-cartao)}
.pg-grade--claro{background:var(--superficie)}
.pg-grade--escuro{background:var(--superficie-preta);color:var(--branco)}
.pg-grade--escuro .pg-numero strong{color:var(--ouro)}
.pg-grade--escuro h2,.pg-grade--escuro h3,.pg-grade--escuro h4{color:var(--branco)}
.pg-grade--escuro .pg-numero span{color:var(--branco);opacity:.72}

/* No celular vira uma coluna, sempre. Nao existe grade de tres num telefone. */
@media (max-width:767px){
  .pg-grade--2,.pg-grade--3{grid-template-columns:1fr}
}

/* ===========================================================================
   O QUE A BARRA DE FORMATAR ESCREVE (0204)

   Ate aqui este tema desenhava so os blocos, e nenhuma das classes de FORMATO.
   Consequencia medida na pagina publicada em 03/09/2026: `.pg-txt-20` e
   `.pg-txt-12` saiam os dois com 17px, o mesmo do paragrafo comum. O dono
   escolhia um tamanho no editor e a pagina ignorava, em silencio, que e pior
   que nao ter a opcao.

   A cura NAO e trazer os 15 pixels na mao para dentro deste tema: ele trabalha
   com uma escala fechada, e a regua recusa literal. Cada degrau do editor
   encaixa no degrau MAIS PROXIMO da escala do tema, que e a mesma ideia que o
   editor ja usa quando o dono digita um px qualquer.

   Empate desce, de proposito: um degrau escolhido para ser MENOR nunca pode
   virar igual ao corpo. Por isso 15 vai para --f-txt (14) e nao para
   --f-base (16).

   Tres pares ficam indistinguiveis, e e o preco de uma escala fechada:
     14 e 15  -> 14px      16 e 17 -> 16px      36, 42 e 48 -> 38px
   Outro tema mapeia diferente sem tocar no editor, que e o que faz trocar de
   tema continuar seguro.
   ========================================================================= */

.pg-txt-12{font-size:var(--f-min)}
.pg-txt-13{font-size:var(--f-peq)}
.pg-txt-14{font-size:var(--f-txt)}
.pg-txt-15{font-size:var(--f-txt)}
.pg-txt-16{font-size:var(--f-base)}
.pg-txt-17{font-size:var(--f-base)}
.pg-txt-18{font-size:var(--f-md)}
.pg-txt-20{font-size:var(--f-gd)}
.pg-txt-22{font-size:var(--f-lg)}
.pg-txt-24{font-size:var(--f-xl)}
.pg-txt-28{font-size:var(--f-tit)}
.pg-txt-32{font-size:var(--f-d2)}
.pg-txt-36{font-size:var(--f-d3)}
.pg-txt-42{font-size:var(--f-d3)}
.pg-txt-48{font-size:var(--f-d3)}

/* Os tres tamanhos RELATIVOS da 0052. Nao sao mais oferecidos na barra e
   continuam desenhados: artigo ja publicado os tem gravados, e tirar o CSS
   deixaria o texto do dono sem o tamanho que ele escolheu.

   Aqui eles tambem encaixam na escala, pelo fator que cada um vale sobre o
   corpo de 16px: 0,85 da 13,6 e cai em --f-txt; 1,15 da 18,4 e cai em --f-md;
   1,4 da 22,4 e cai em --f-lg. Deixa-los em `em` seria tamanho literal, que a
   regua deste tema recusa, e com razao: `1.15em` nao pertence a escala
   nenhuma. */
.pg-txt-p{font-size:var(--f-txt)}
.pg-txt-g{font-size:var(--f-md)}
.pg-txt-xg{font-size:var(--f-lg);font-weight:600;line-height:1.35}

/* Alinhamento nao e decisao de desenho: e o que o dono clicou. */
.pg-al-esquerda{text-align:left}
.pg-al-centro{text-align:center}
.pg-al-direita{text-align:right}

/* A LARGURA DA FOLHA: a midia larga a coluna do texto e ocupa a linha inteira. */
.pg-larg-folha{display:block;width:100%;max-width:100%;margin-left:0;margin-right:0}
.pg-larg-folha>img,.pg-larg-folha>video,.pg-larg-folha>iframe,
.pg-larg-folha>.blog-video-fachada{display:block;width:100%;height:auto}
.pg-larg-folha>audio{display:block;width:100%}

/* AS CLASSES DE COR NAO ESTAO AQUI, e a ausencia e deliberada: as nove de
   tinta e as oito de fundo do editor sao uma paleta PROPRIA (agua, laranja,
   roxo), e este tema nao tem nenhuma delas entre as variaveis dele. Escrever o
   hexadecimal aqui seria cor na mao, que a regua recusa com razao. Ou a paleta
   do editor vira token deste tema, ou o editor deixa de oferecer o que ele nao
   desenha. Registrado no relatorio 0205, para o dono decidir.
   ========================================================================= */

/* As duas pecas de dentro do numero sao alcancadas pela ESTRUTURA (strong e
   span), e nao por classe propria: classe que a estrutura ja distingue e
   classe a mais na allowlist do sanitizador. */
.pg-numero{margin:0 0 12px}
.pg-numero strong{
  display:block;
  font-family:var(--display);
  font-size:var(--f-d1);line-height:1;font-weight:800;
  /* O AZUL DA MARCA, e nao o outro (0217 item 4). O tema tem dois azuis:
     `--azul` (#2F5A3C), que e do topo, e `--ouro-tx` (#8C6D2C), que e o dos
     LINKS e o que a marca usa no corpo da pagina. O numero saia no primeiro, e
     na mesma tela o link ao lado dele saia no segundo: duas marcas azuis
     diferentes a dois centimetros uma da outra. */
  color:var(--ouro-tx);
  font-variant-numeric:tabular-nums;
}
.pg-numero span{
  display:block;margin-top:5px;
  font-size:var(--f-peq);line-height:1.35;
  color:var(--tinta-3);
}

/* ------------------------------------------------------------- as cores

   A PALETA DO EDITOR E ESTA, e nao a lista de oito que o editor trazia escrita
   na mao. Quem le este bloco e o `PaletaDoEditor`: cor declarada aqui aparece
   na barra, cor que nao esta aqui NAO aparece. E por isso que agua, laranja e
   roxo sumiram desta barra, e nao por terem sido mapeados em outra cor.

   Mapear tamanho e aproximar; mapear cor e trocar. 20px virando 18px continua
   sendo o tamanho que o dono pediu; laranja virando azul e outra coisa, e ele
   receberia uma cor que nao escolheu.

   As quatro de letra e as duas de fundo saem das variaveis que este tema JA
   tem. Nenhuma cor nova entrou aqui.
   ========================================================================= */

.pg-cor-tinta{color:var(--tinta)}
.pg-cor-suave{color:var(--tinta-3)}
.pg-cor-marca{color:var(--ouro-tx)}
.pg-cor-vermelho{color:var(--vermelho)}

/* O fundo e o marcador de texto: ele pinta uma faixa atras da palavra, e por
   isso leva respiro e canto. A tinta vem junto com o fundo, sempre — fundo sem
   tinta propria herda a do texto, e no escuro dava letra quase preta sobre
   preto. */
.pg-fundo-claro,
.pg-fundo-escuro{padding:.06em .25em;border-radius:var(--r-botao)}
.pg-fundo-claro{background:var(--superficie);color:var(--tinta)}
.pg-fundo-escuro{background:var(--superficie-preta);color:var(--branco)}

/* ---------------- o cartao MARCADO, e o respiro em tres degraus (0217) */

/* ITEM 5. O comparativo 0216 desenha os tres compromissos com um fio da cor da
   marca na lateral, e o numero como SELO acima do titulo, em vez de dentro
   dele. O fio e a quarta aparencia do cartao; o selo e o PRIMEIRO paragrafo,
   alcancado por estrutura, como as duas pecas do numero ja sao. Classe que a
   estrutura ja distingue e classe a mais na allowlist. */
.pg-cartao--marcado{border-left:3px solid var(--ouro-tx);border-radius:0 var(--r-cartao) var(--r-cartao) 0}
.pg-cartao--marcado > p:first-child{
  font-weight:800;letter-spacing:.06em;line-height:1;
  margin:0 0 var(--r2);
}
.pg-grade--marcado{border-left:3px solid var(--ouro-tx)}

/* ITEM 6a. A LATERAL RECUA. Ela e apoio, e apoio nao disputa com o principal:
   fundo suave, SEM fio, letra menor. O conteudo fica na frente sem precisar
   crescer. Alcancada pela POSICAO (a segunda celula da coluna), que e a mesma
   regra que ja diz qual e a faixa.

   O `:not(a, b)` e UMA lista de proposito, e nao dois `:not()` encadeados: dois
   pesam 2 na conta de especificidade e um pesa 1, e com 2 este seletor chegava a
   600 — empatando com o carimbo do construtor, que vale 600 e precisa VENCER.
   O `BlogConstrutorEstiloTest` acusou na hora.

   FORA DO RECUO ficam as duas caixas que JA sao uma decisao de desenho: a
   escura, que e a chamada da marca, e a marcada, que tem o fio na lateral.
   Recuar as duas seria desfazer o que alguem escolheu de proposito — e no caso
   da escura era pior que isso: o fundo claro vencia o dela e a tinta branca
   ficava em 1,16:1 sobre cinza, ilegivel. Medido em producao em 04/09/2026. */
.pg-colunas > [data-bloco="coluna"]:last-child
  .pg-cartao:not(.pg-cartao--marcado, .pg-cartao--escuro){
  border-color:transparent;background:var(--superficie);font-size:var(--f-peq);
}

/* ITEM 6b. O RESPIRO EM TRES DEGRAUS, e os tres saem da escala do tema.
   Antes tudo caia no mesmo valor, entao nada agrupava: o olho nao sabia onde
   uma secao acabava. Vale so na PAGINA, e nao no artigo, porque mexer no
   ritmo do artigo mudaria tudo que ja esta publicado. */
.ct-conteudo .pg-cartao > * + *{margin-top:var(--r2)}          /* dentro do bloco */
.ct-conteudo .pg-cartao,
.ct-conteudo .pg-grade,
.ct-conteudo .pg-colunas{margin-bottom:var(--r3)}            /* entre blocos */
.ct-conteudo h2{margin-top:var(--r6)}                          /* entre secoes */

/* ------------------- o canal de contato no corpo da pagina (0172 D2) */

/* O bloco <div data-bloco="contato"> e substituido por esta peca no render,
   depois do sanitizador, entao as classes daqui NAO estao na allowlist do
   editor, como ja acontece com a fachada do video.

   Canal vazio sai em cinza e SEM link: e-mail em branco e decisao do dono, nao
   pendencia, e um mailto: sem destinatario e pior que nao ter link nenhum. */
.blog-canal{margin:0 0 12px;line-height:1.7}
.blog-canal b{color:var(--tinta)}
.blog-canal-vazio{color:var(--tinta-marca-dagua)}

/* ------------------- coluna com faixa, foto ao lado e etiquetas (0192 §A) */

/* A GRADE DA 0172 REPARTE EM PARTES IGUAIS, e pagina de verdade se faz com
   partes DESIGUAIS. Foi por isso que a Sobre saiu documento de 1200px: o que
   havia era `1fr 1fr`, e o desenho pede `1fr 340px`.

   A largura da faixa e uma ESCALA FECHADA de dois degraus, pela mesma razao do
   tamanho do texto: `style=` e apagado pelo higienizador e `class` e allowlist
   nomeada, então largura livre exigiria reabrir um dos dois. */
.pg-colunas{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:38px;
  align-items:start;
  margin:0 0 24px;
}
.pg-colunas--estreita{grid-template-columns:minmax(0,1fr) 240px}
/* A faixa à esquerda troca a ORDEM, e nao a coluna: a primeira celula continua
   sendo a de leitura no documento, e e ela que o leitor de tela lê primeiro. */
.pg-colunas--esquerda{grid-template-columns:340px minmax(0,1fr)}
.pg-colunas--esquerda.pg-colunas--estreita{grid-template-columns:240px minmax(0,1fr)}
.pg-colunas--esquerda > [data-bloco="coluna"]:first-child{order:2}
.pg-colunas--esquerda > [data-bloco="coluna"]:last-child{order:1}
.pg-colunas > [data-bloco="coluna"]{min-width:0}

/* A FAIXA ACOMPANHA A ROLAGEM enquanto houver conteúdo ao lado, e para no fim.
   Quem faz isso e o `position:sticky` dentro de um pai que nao tem `overflow`:
   ele anda ate o fim do pai e para sozinho, sem pulo e sem script.

   O `align-items:start` do pai e o que dá curso a ela — com `stretch`, a celula
   teria a altura da linha inteira e curso zero, que foi o defeito medido na
   lateral do tema em 29/08. */
@media (min-width:1080px){
  .pg-colunas > [data-bloco="coluna"]:last-child{position:sticky;top:96px}
  .pg-colunas--esquerda > [data-bloco="coluna"]:first-child{position:sticky;top:96px}
  .pg-colunas--esquerda > [data-bloco="coluna"]:last-child{position:static}
}
/* Quem pede menos movimento fica com a faixa parada.

   A ESPECIFICIDADE AQUI NAO E ENFEITE: a regra de grudar acima e
   `.pg-colunas > [data-bloco="coluna"]:last-child`, que vale 0,3,0. Escrita sem
   o `:last-child`, esta valeria 0,2,0 e PERDERIA em silencio -- quem pediu menos
   movimento continuaria com a faixa deslizando. Foi medido, nao lido. */
@media (prefers-reduced-motion:reduce){
  .pg-colunas > [data-bloco="coluna"]:first-child,
  .pg-colunas > [data-bloco="coluna"]:last-child{position:static}
}

/* NO CELULAR VIRA UMA COLUNA, E A FAIXA VAI POR ÚLTIMO. Faixa no topo do
   celular empurra o conteúdo para baixo, e a pessoa desiste antes de ler. */
@media (max-width:1079px){
  .pg-colunas,.pg-colunas--esquerda,.pg-colunas--estreita{grid-template-columns:minmax(0,1fr);gap:24px}
  .pg-colunas--esquerda > [data-bloco="coluna"]:first-child{order:1}
  .pg-colunas--esquerda > [data-bloco="coluna"]:last-child{order:2}
}

/* A FOTO AO LADO DO TEXTO. Sem imagem escolhida ele vira texto na largura
   inteira: `:has(img)` e o que torna isso uma regra do CSS, e nao um segundo
   estado que alguem precisa lembrar de gravar. Caixa cinza vazia na pagina
   publicada e pior que layout simples. */
.pg-foto{display:block;margin:0 0 24px}
.pg-foto:has(img){display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:start}
.pg-foto--direita:has(img){grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.pg-foto--direita:has(img) > img{order:2}
.pg-foto > img{display:block;width:100%;height:auto;border-radius:12px}
.pg-foto > [data-bloco="coluna"]{min-width:0}
.pg-foto > [data-bloco="coluna"] > :first-child{margin-top:0}
@media (max-width:767px){
  .pg-foto:has(img),.pg-foto--direita:has(img){grid-template-columns:minmax(0,1fr);gap:16px}
  .pg-foto--direita:has(img) > img{order:0}
}

/* AS ETIQUETAS: o chip arredondado do wireframe, uma ao lado da outra, com
   quebra de linha natural. Elas saíram como lista com bolinha, que nao e o
   desenho. O `<span>` de dentro nao ganha classe — a estrutura ja o distingue. */
.pg-etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.pg-etiquetas span{
  display:inline-block;
  padding:7px 13px;
  border-radius:999px;
  font-size:var(--f-peq);
  line-height:1;
  font-weight:500;
}
.pg-etiquetas span{border:1px solid var(--regua);color:var(--tinta-3)}



/* Xavier Jardinagem: marca */
:root,html,body{--display:"Fraunces",Georgia,"Times New Roman",serif;--corpo:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;--creme:#F4EFE4;--superficie:#F4EFE4;--tinta:#3B3D36;--tinta-titulo:#0F2A1C;--superficie-preta:#0F2A1C}

:root,html,body{--blog-botao:#8C6D2C}
.pg-popup-corpo .pg-crm-form button{border-radius:999px}

/* ===== Xavier Jardinagem: tema do blog no desenho do site (Arsenal + Roboto, fundo #F3F3ED, cartões canto 8, botões pílula) ===== */
:root,html,body{--display:"Arsenal",Georgia,serif;--corpo:"Roboto",system-ui,sans-serif;--xj-fundo:#F3F3ED;--xj-tinta:#323232;--xj-suave:#6D6E5E;--xj-verde:#0F2A1C;--xj-verde2:#2F5A3C;--xj-claro:#E9DDB4;--xj-r:8px;--xj-sombra:0 1px 2px rgb(0 0 0/.06),0 8px 24px -12px rgb(0 0 0/.18);--ouro-tx:#2F5A3C;--blog-botao:#0F2A1C}
body.blog{background:var(--xj-fundo)!important;color:var(--xj-tinta);font-family:var(--corpo);letter-spacing:.15px}
body.blog h1,body.blog h2,body.blog h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;text-transform:none}

/* menu flutuante de vidro, nome no centro */
body.blog header.top{position:fixed!important;top:8px;left:12px;right:12px;width:auto;height:60px;min-height:0;padding:0;border:0;border-radius:var(--xj-r);background:rgb(255 255 255/.8)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 3px rgb(0 0 0/.08);z-index:60;transform:none!important}
body.blog header.top::before,body.blog header.top::after{display:none}
body.blog .top .top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:60px;width:auto;max-width:none;margin:0;padding:0 16px 0 24px}
body.blog .top .marca{grid-column:2;grid-row:1;justify-self:center;display:block;height:auto}
body.blog .top .marca-img{display:none}
body.blog .top .marca::after{content:"Xavier Jardinagem";font:400 clamp(24px,2.4vw,34px)/1 var(--display);color:var(--xj-tinta);white-space:nowrap}
body.blog .top .nav-desk{grid-column:1;grid-row:1;justify-self:start;margin:0}
body.blog .top .blog-menu__nivel{display:flex;gap:clamp(12px,1.6vw,24px);margin:0;padding:0;list-style:none}
body.blog .top .blog-menu__item a{font:500 16px/22px var(--corpo);color:#111827;text-transform:none;letter-spacing:0;padding:0;background:none;text-shadow:none}
body.blog .top .blog-menu__item a::after,body.blog .top .blog-menu__item a::before{display:none}
body.blog .top .blog-menu__item a:hover{text-decoration:underline;text-underline-offset:6px;color:#111827}
body.blog .top .bt-membros{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;min-height:41px;padding:8px 24px;border:0;border-radius:9999px;background:var(--xj-claro)!important;color:var(--xj-verde)!important;font:500 16px/22px var(--corpo);text-transform:none;letter-spacing:0;box-shadow:none;white-space:nowrap}
body.blog .top .bt-membros::before,body.blog .top .bt-membros::after{display:none}
body.blog .top .bt-busca{position:absolute;right:186px;top:9px;width:42px;height:42px;border:0;border-radius:50%;background:none;color:var(--xj-tinta)}
body.blog .top .bt-hamb{color:var(--xj-tinta)}

/* capa: título no centro, sem a faixa escura */
body.blog .banner{background:none!important;color:var(--xj-tinta);min-height:0;height:auto;padding:clamp(108px,12vw,150px) 0 0;text-align:center;overflow:visible}
body.blog .banner-fundo,body.blog .banner-veu,body.blog .banner-figura,body.blog .banner-fio,body.blog .banner-selo,body.blog .banner::before,body.blog .banner::after{display:none!important}
body.blog .banner-in{display:block;width:min(820px,100% - 32px);max-width:none;margin:0 auto;padding:0;min-height:0}
body.blog .banner-txt{max-width:none;padding:0}
body.blog .banner h1{font:400 clamp(36px,4vw,48px)/1.15 var(--display);color:var(--xj-tinta);text-shadow:none;margin:0}
body.blog .banner-sub{font:400 18px/1.4 var(--corpo);color:var(--xj-suave);max-width:56ch;margin:14px auto 0}
body.blog .banner-acoes{display:flex;justify-content:center;gap:10px;margin-top:22px}
body.blog .bt-acesse,body.blog .bt-ver,body.blog .continue,body.blog .art-conversa-bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 24px;border-radius:9999px;border:1px solid transparent;background:var(--xj-verde)!important;color:#fff!important;font:500 16px/22px var(--corpo);text-transform:none;letter-spacing:0;box-shadow:none;text-decoration:none}
body.blog .bt-ver{background:none!important;border-color:rgb(50 50 50/.3);color:var(--xj-tinta)!important}
body.blog .bt-acesse:hover,body.blog .continue:hover{background:var(--xj-verde2)!important}

/* miolo: sem barra lateral, lista em cartões */
body.blog .miolo{display:block;width:min(1200px,100% - 2*clamp(16px,3vw,40px));max-width:none;margin:clamp(24px,3vw,40px) auto clamp(48px,6vw,88px);padding:0}
body.blog .lat,body.blog .lst-barra{display:none!important}
body.blog .principal,body.blog .principal .col-in{width:100%;max-width:none;padding:0;margin:0}
body.blog .lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.blog .lista .artigo{display:flex;flex-direction:column;margin:0;padding:0;border:0;background:#fff;border-radius:var(--xj-r);overflow:hidden;box-shadow:var(--xj-sombra)}
body.blog .lista .artigo::before,body.blog .lista .artigo::after{display:none}
body.blog .lista .artigo>a:first-child,body.blog .lista .artigo>.artigo-capa{display:block;width:100%;aspect-ratio:16/10;flex:none;overflow:hidden;border-radius:0;margin:0}
body.blog .lista .artigo .mini{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;display:block}
body.blog .artigo-corpo{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px}
body.blog .artigo-corpo h2{font:400 24px/1.2 var(--display);margin:0}
body.blog .artigo-corpo h2 a{color:var(--xj-tinta);text-decoration:none}
body.blog .art-meta{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;color:var(--xj-suave)}
body.blog .pastilha{padding:0;border:0;background:none!important;color:var(--xj-verde2)!important;font:500 13px/1 var(--corpo);letter-spacing:.06em;text-transform:uppercase;border-radius:0}
body.blog .artigo-resumo{color:var(--xj-suave);margin:0;font-size:16px;line-height:24px}
body.blog .continue{align-self:flex-start;margin-top:auto}
body.blog .lista .artigo:first-child{grid-column:1/-1;flex-direction:row}
body.blog .lista .artigo:first-child>a:first-child{width:58%;aspect-ratio:auto;min-height:320px}
body.blog .lista .artigo:first-child .artigo-corpo{justify-content:center;padding:clamp(22px,3vw,44px)}
body.blog .lista .artigo:first-child h2{font-size:clamp(28px,2.8vw,40px);line-height:1.15}

/* artigo: título no centro, coluna de leitura estreita */
body.blog .art-hero{background:none!important;color:var(--xj-tinta);min-height:0;padding:clamp(108px,12vw,150px) 0 0;text-align:center}
body.blog .art-hero::before,body.blog .art-hero::after{display:none!important}
body.blog .art-hero-in{display:block;width:min(820px,100% - 32px);max-width:none;margin:0 auto;padding:0}
body.blog .art-trilha{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:14px;color:var(--xj-suave);margin-bottom:14px}
body.blog .art-trilha a{color:var(--xj-suave)}
body.blog .art-hero-tag{display:inline-block;padding:6px 16px;border-radius:9999px;background:var(--xj-verde)!important;color:#fff!important;font:500 14px/22px var(--corpo);text-transform:none;letter-spacing:0;border:0}
body.blog .art-titulo{font:400 clamp(34px,4vw,48px)/1.15 var(--display);color:var(--xj-tinta);text-shadow:none;margin:14px 0 0}
body.blog .art-meta-hero{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;margin-top:14px;color:var(--xj-suave);font-size:15px}
body.blog .art-meta-hero a,body.blog .art-meta-hero span{color:var(--xj-suave)}
body.blog .art-avatar{background:var(--xj-claro);color:var(--xj-verde)}
body.blog .art-ferramentas,body.blog .art-fixa,body.blog .art-share-mob{display:none!important}
body.blog .art-conteudo,body.blog .art-votos,body.blog .art-passa-adiante,body.blog .art-vizinhos,body.blog .art-conversa,body.blog .blog-cmt,body.blog .art-assuntos{width:min(760px,100%);max-width:none;margin-left:auto;margin-right:auto}
body.blog .art-conteudo{font:400 18px/1.65 var(--corpo);color:var(--xj-tinta);padding:0}
body.blog .art-conteudo h2{font:400 clamp(28px,2.6vw,34px)/1.2 var(--display);color:var(--xj-tinta);margin:1.6em 0 .5em;padding:0}
body.blog .art-conteudo h2::before{display:none}
body.blog .art-conteudo a{color:var(--xj-verde2);text-decoration:underline;text-underline-offset:4px}
body.blog .art-conteudo blockquote{margin:1.4em 0;padding:20px 24px;border:0;border-radius:var(--xj-r);background:#fff;font:400 24px/1.3 var(--display);color:var(--xj-tinta);box-shadow:var(--xj-sombra)}
body.blog .art-capa{width:min(1200px,100vw - 2*clamp(16px,3vw,40px));margin:0 0 clamp(24px,3vw,40px) 50%;transform:translateX(-50%);aspect-ratio:21/9;max-height:60svh;border-radius:var(--xj-r);overflow:hidden}
body.blog .art-capa img{width:100%;height:100%;object-fit:cover;border-radius:0}
body.blog .art-conversa,body.blog .art-passa-adiante{border-radius:var(--xj-r)}
body.blog .art-leia{width:100%;margin-top:clamp(32px,4vw,56px)}
body.blog .art-leia-tit{font:400 clamp(28px,3vw,40px)/1.15 var(--display);text-align:center;margin-bottom:22px}
body.blog .art-leia-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.blog .cart{background:#fff;border:0;border-radius:var(--xj-r);overflow:hidden;box-shadow:var(--xj-sombra)}
body.blog .cart .ca-capa{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:0}
body.blog .cart .ca-img{width:100%;height:100%;object-fit:cover}
body.blog .cart .ca-corpo{padding:20px}

/* rodapé no verde do site */
body.blog footer.rodape{background:var(--xj-verde)!important;color:rgb(255 255 255/.76);border:0}
body.blog footer.rodape h2{font:500 13px/1 var(--corpo);letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255/.55)}
body.blog footer.rodape a{color:rgb(255 255 255/.76)}
body.blog footer.rodape a:hover{color:#fff}
body.blog .rod-logo img{display:none}
body.blog .rod-logo::after{content:"Xavier Jardinagem";font:400 clamp(30px,3.4vw,44px)/1 var(--display);color:#fff}
body.blog .creme{background:var(--xj-verde)!important;color:rgb(255 255 255/.6);border-top:1px solid rgb(255 255 255/.16)}
body.blog .creme a{color:rgb(255 255 255/.76)}

@media (max-width:900px){
  body.blog .top .top-in{grid-template-columns:auto 1fr auto;padding:0 8px 0 14px}
  body.blog .top .marca{grid-column:1;justify-self:start}
  body.blog .top .nav-desk,body.blog .top .bt-busca{display:none}
  body.blog .top .bt-membros{grid-column:2;padding:8px 14px;font-size:14px;min-height:40px}
  body.blog .top .bt-hamb{grid-column:3;grid-row:1}
  body.blog .lista,body.blog .art-leia-grade{grid-template-columns:1fr 1fr}
  body.blog .lista .artigo:first-child{flex-direction:column}
  body.blog .lista .artigo:first-child>a:first-child{width:100%;aspect-ratio:16/10;min-height:0}
}
@media (max-width:560px){
  body.blog .lista,body.blog .art-leia-grade{grid-template-columns:1fr}
  body.blog .top .marca::after{font-size:21px}
  body.blog .art-capa{aspect-ratio:4/3}
}

/* ajustes: menu numa linha, nada nasce escondido, sem barra de rolagem */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
body.blog .top .nav-desk{width:auto;max-width:none;flex:none}
body.blog .top .blog-menu{width:auto}
body.blog .top .blog-menu__item{white-space:nowrap;margin:0;padding:0}
body.blog .top .bt-membros{width:auto;max-width:none;flex:none}
body.blog .top .bt-busca{right:auto;left:auto;position:static;grid-column:3;grid-row:1;justify-self:end;margin-right:176px}
body.blog .banner-txt>*,body.blog .banner-in,body.blog .art-hero-in>*,body.blog .lista .artigo,body.blog .cart{opacity:1!important;animation:none!important;transform:none!important}
body.blog .banner+*{margin-top:clamp(24px,3vw,40px)}
body.blog .banner .banner-seta,body.blog .banner [class*=seta],body.blog .banner [class*=rolar]{display:none!important}
body.blog header.top{display:block}
body.blog .top .top-in{padding-block:0;min-height:0;align-content:center}
body.blog .top .top-in>*{margin-block:0;align-self:center}
body.blog .art-hero-tag{display:inline-flex;align-items:center;height:auto;min-height:34px;line-height:22px;margin:0}
body.blog .art-conteudo ul{padding-left:22px}

/* ajustes depois de ver no ar: botão do popup e do comentário legíveis, rodapé, menu no celular */
body.blog .pg-popup-corpo .pg-crm-form button,body.blog .art-conversa-bt{background:var(--xj-claro)!important;color:var(--xj-verde)!important;border-radius:9999px;border:0;font:500 16px/22px var(--corpo);min-height:48px}
body.blog .rod-logo,body.blog .rod-logo::after{text-transform:none;text-decoration:none;letter-spacing:0}
body.blog .rod-logo{display:inline-block}
@media (max-width:900px){
  body.blog .top .top-in{grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;padding:0 8px 0 14px}
  body.blog .top .marca{min-width:0;overflow:hidden}
  body.blog .top .bt-hamb{grid-column:3;grid-row:1;width:40px;height:40px;margin:0;padding:0;justify-self:end;position:static}
  body.blog .top .bt-membros{grid-column:2;margin:0}
}
@media (max-width:420px){
  body.blog .top .marca::after{font-size:19px}
  body.blog .top .bt-membros{padding:6px 12px;font-size:13.5px;min-height:38px}
}


/* ===== QA 15/11: correções depois de olhar todas as telas do blog ===== */
/* capa: a mesma lista de artigos vinha duas vezes (lista + grade) */
body.blog .lista+.grade{display:none!important}
body.blog .banner{padding-bottom:clamp(28px,3vw,44px)}
body.blog .artigo-corpo h2 a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}

/* cabeçalho: respiro entre o menu e o nome */
body.blog .top .blog-menu__nivel{gap:clamp(10px,1.3vw,20px)}
body.blog .top .blog-menu__item a{font-size:15px}
@media (max-width:1180px) and (min-width:901px){body.blog .top .marca::after{font-size:24px}body.blog .top .blog-menu__item a{font-size:14px}}
@media (max-width:900px){
  body.blog .top .top-in{grid-template-columns:minmax(0,1fr) auto 40px;gap:6px;padding:0 6px 0 14px}
  body.blog .top .marca{justify-self:stretch;min-width:0;overflow:hidden;white-space:nowrap}
  body.blog .top .marca::after{display:block;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:420px){
  body.blog .top .marca::after{font-size:18px}
  body.blog .top .bt-membros{padding:6px 11px;font-size:13px;min-height:36px}
}

/* topo de categoria, autor e busca: título no centro, texto legível */
body.blog .art-hero>.faixa{width:min(820px,100% - 32px);max-width:none;margin:0 auto;padding:0}
body.blog .art-hero .art-titulo{margin-left:auto;margin-right:auto;max-width:100%;text-align:center}
body.blog .art-hero .art-sub{color:var(--xj-suave)!important;font:400 18px/1.4 var(--corpo);max-width:56ch;margin:12px auto 0;text-shadow:none}
body.blog span.art-hero-tag{text-transform:capitalize}
body.blog .art-meta-hero svg{color:var(--xj-suave)}
body.blog .art-hero-in .art-trilha span:last-child{display:none}
@media (max-width:560px){
  body.blog .art-hero-in .art-trilha a:nth-of-type(3),body.blog .art-hero-in .art-trilha span:nth-of-type(2){display:none}
}

/* página não encontrada */
body.blog .erro-hero{padding:clamp(72px,10vw,120px) 0;display:grid;align-items:center}
body.blog .erro-marca{display:inline-block;text-decoration:none}
body.blog .erro-marca img{display:none}
body.blog .erro-marca::after{content:"Xavier Jardinagem";font:400 28px/1 var(--display);color:var(--xj-tinta)}
body.blog .erro-num{background:none!important;-webkit-text-fill-color:currentColor;color:var(--xj-verde2)!important;font:400 clamp(64px,9vw,96px)/1 var(--display);text-shadow:none;margin-top:18px}
body.blog .erro-busca{margin:22px auto 0}
body.blog .erro-busca form{display:flex;gap:8px}
body.blog .erro-busca input{flex:1;min-width:0;height:48px;padding:0 20px;border:1px solid rgb(50 50 50/.25);border-radius:9999px;background:#fff!important;color:var(--xj-tinta)!important;font:400 16px/1 var(--corpo);box-shadow:none}
body.blog .erro-busca input::placeholder{color:var(--xj-suave);opacity:1}
body.blog .erro-busca button,body.blog .erro-bt{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 24px;border:0;border-radius:9999px;background:var(--xj-verde)!important;color:#fff!important;font:500 16px/22px var(--corpo);box-shadow:none!important;text-transform:none;letter-spacing:0;text-decoration:none}
body.blog .erro-acoes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:16px}
body.blog .erro-link{color:var(--xj-verde2)!important;font:500 16px/22px var(--corpo);text-decoration:underline;text-underline-offset:4px}

/* cartões do "Leia também": mesmo desenho dos cartões da capa */
body.blog .cart{display:flex;flex-direction:column}
body.blog .cart .ca-capa{position:relative}
body.blog .cart .ca-capa .pastilha{display:none}
body.blog .cart .ca-corpo{display:flex;flex-direction:column;gap:10px;flex:1}
body.blog .cart .ca-meta{display:flex;align-items:center;gap:8px;font:400 13px/1 var(--corpo);color:var(--xj-suave);margin:0}
body.blog .cart .ca-meta time,body.blog .cart .ca-meta span{color:var(--xj-suave);font-size:13px}
body.blog .cart .ca-tit{font:400 24px/1.2 var(--display);margin:0;min-height:0}
body.blog .cart .ca-tit a{font:inherit;color:var(--xj-tinta);text-decoration:none}
body.blog .cart .ca-resumo{font:400 16px/24px var(--corpo);color:var(--xj-suave);margin:0}
body.blog .cart .ca-pe{display:flex;justify-content:flex-start;margin:auto 0 0;padding:6px 0 0;border:0}
body.blog .continue{font-weight:500!important;text-shadow:none!important;-webkit-text-stroke:0!important;letter-spacing:0!important}
body.blog .art-leia-tit{text-align:left}

/* fim do artigo: botões de compartilhar discretos, no tom do site */
body.blog .art-passa-adiante{background:#fff;border:0;box-shadow:var(--xj-sombra)}
body.blog .art-passa{background:none!important;border:1px solid rgb(50 50 50/.25)!important;border-radius:9999px!important;color:var(--xj-tinta)!important;font:500 14px/20px var(--corpo)!important;box-shadow:none!important;text-shadow:none!important;-webkit-text-stroke:0!important}
body.blog .art-passa svg{color:var(--xj-verde2)}
body.blog .art-passa:hover{background:var(--xj-fundo)!important}
body.blog .art-vizinhos{margin-top:12px}
body.blog .art-vizinhos a{border-radius:var(--xj-r)}

/* rodapé: linha de baixo legível */
body.blog .creme .faixa{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;padding-block:22px;margin-block:0;list-style:none}
body.blog .creme li{color:rgb(255 255 255/.7)!important;font:400 14px/20px var(--corpo)}
body.blog .creme li a{color:rgb(255 255 255/.9)!important;font-weight:400}
body.blog .creme svg{color:var(--xj-claro)}
body.blog footer.rodape .blog-menu__item a{font:400 15px/22px var(--corpo)}
body.blog .art-conversa :is(h2,h3){font:400 26px/1.2 var(--display)!important;letter-spacing:0!important;text-shadow:none!important;-webkit-text-stroke:0!important}
body.blog .art-vizinhos a :is(strong,b,span,p){text-shadow:none!important;-webkit-text-stroke:0!important;letter-spacing:0}


/* ===== QA 15/11 (2): menu aberto no celular, tela de busca e rodapé ===== */
body.blog .gaveta .bt-membros,body.blog .gaveta-pe .bt-membros{display:flex;align-items:center;justify-content:center;min-height:48px;border:0;border-radius:9999px;background:var(--xj-claro)!important;color:var(--xj-verde)!important;font:500 16px/22px var(--corpo);box-shadow:none!important;text-shadow:none;letter-spacing:0;text-transform:none}
body.blog .gaveta .blog-menu__item a{font:400 24px/1.3 var(--display);letter-spacing:0;text-shadow:none}
body.blog .busca-marca img{display:none}
body.blog .busca-marca{text-decoration:none}
body.blog .busca-marca::after{content:"Xavier Jardinagem";font:400 26px/1 var(--display);color:#fff}
body.blog .busca-ok{border:0;border-radius:9999px;background:var(--xj-claro)!important;color:var(--xj-verde)!important;font:500 16px/22px var(--corpo);box-shadow:none!important;text-shadow:none;padding:8px 24px}
body.blog .busca-form{border-radius:9999px}
body.blog .busca-dica{color:rgb(255 255 255/.6)!important}
body.blog .busca-x,body.blog .bt-fechar{border-radius:50%;color:#fff}
body.blog .busca-x svg,body.blog .bt-fechar svg,body.blog .busca-form svg{color:inherit}
body.blog .busca-res a{font:400 20px/1.3 var(--display);letter-spacing:0;text-shadow:none}
body.blog .busca-tela,body.blog .busca-painel,body.blog .gaveta{scrollbar-width:none}
body.blog .busca-tela::-webkit-scrollbar,body.blog .busca-painel::-webkit-scrollbar,body.blog .gaveta::-webkit-scrollbar{display:none}
body.blog footer.rodape .rod-menu .blog-menu__nivel{display:flex;flex-direction:column;gap:10px;columns:auto;margin:0;padding:0;list-style:none}
body.blog footer.rodape .blog-menu__item{margin:0;padding:0}
body.blog footer.rodape .rod-menu .blog-menu__nivel{align-items:flex-start}body.blog .busca-ok{border-radius:9999px!important}

/* QA 15/11 (3): cabecalho do blog no celular igual ao do site (menu a esquerda, nome, botao) */
@media (max-width:900px){body.blog .top .top-in{grid-template-columns:40px minmax(0,1fr) auto;gap:6px;padding:0 8px 0 6px}body.blog .top .bt-hamb{grid-column:1;grid-row:1;justify-self:start}body.blog .top .marca{grid-column:2;grid-row:1;display:flex;align-items:center;height:60px;justify-self:stretch}body.blog .top .marca::after{font-size:20px;line-height:60px}body.blog .top .bt-membros{grid-column:3;grid-row:1}}@media (max-width:380px){body.blog .top .marca::after{font-size:17px}}

/* 15/11 (4): botão Orçamento em destaque, igual ao do site */
body.blog .top .bt-membros{background:var(--xj-verde)!important;color:#fff!important;padding:8px 22px;box-shadow:0 8px 18px -10px rgb(15 42 28/.7)}
body.blog .top .bt-membros:hover{background:var(--xj-verde2)!important}
body.blog .top .bt-busca{margin-right:140px}
@media (max-width:560px){body.blog .top .bt-membros{padding:6px 14px;font-size:14px;min-height:38px}}

/* 15/11 (5): cabeçalho do blog igual ao do site (mesmo menu, sem busca) */
body.blog .top .bt-busca{display:none!important}
body.blog .top .blog-menu__nivel{gap:clamp(12px,1.6vw,24px)}
body.blog .top .blog-menu__item a{font-size:16px}
body.blog .top .bt-membros{gap:8px}
body.blog .top .bt-membros svg{flex:none}
@media (max-width:560px){body.blog .top .bt-membros svg{display:none}}

/* 15/11 (6): topo do blog no desenho do topo do site (foto + cartão de vidro) */
body.blog .banner{position:relative;width:min(1200px,100% - 2*clamp(16px,3vw,40px));margin:84px auto 0;padding:0!important;height:clamp(360px,58vh,480px);min-height:0;border-radius:var(--xj-r);overflow:hidden;background:#1d2a1f!important;text-align:left}
body.blog .banner .banner-figura{display:block!important;position:absolute;inset:0;margin:0;width:auto;height:auto;max-width:none;transform:none}
body.blog .banner .banner-retrato{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;aspect-ratio:auto!important;border-radius:0!important;object-fit:cover;object-position:50% 62%}
body.blog .banner .banner-aura{display:none}
body.blog .banner::after{display:block!important;content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0/.18),transparent 40%,rgb(0 0 0/.28));pointer-events:none}
body.blog .banner .banner-in{position:absolute;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:2;width:min(591px,100% - 2*clamp(12px,2vw,24px));margin:0;padding:24px;border-radius:16px;background:rgb(255 255 255/.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.blog .banner .banner-selo{display:inline-block!important;font:500 13px/1 var(--corpo);letter-spacing:.06em;text-transform:uppercase;color:var(--xj-verde2);background:none;border:0;padding:0;margin:0 0 10px}
body.blog .banner h1{font-size:clamp(28px,3vw,40px);line-height:1.15}
body.blog .banner .banner-sub{margin:10px 0 0;max-width:none;font-size:16px;line-height:24px;color:var(--xj-tinta)}
body.blog .banner .banner-acoes{justify-content:flex-start;margin-top:16px;flex-wrap:wrap}
@media (max-width:560px){body.blog .banner{height:auto;min-height:540px}body.blog .banner .banner-in{padding:18px}body.blog .banner .banner-acoes>*{flex:1 1 100%}}
body.blog .banner .banner-figura{top:0;right:0;bottom:0;left:0;height:100%!important;width:100%!important;aspect-ratio:auto}
body.blog .banner .banner-in,body.blog .banner .banner-txt{text-align:left}
body.blog .banner .banner-selo::before,body.blog .banner .banner-selo::after{display:none!important}
body.blog .banner .banner-sub{margin-left:0;margin-right:0}

/* 15/11 (7): capa do blog pela referência aprovada (blog do Yardzen): barra de categorias com busca, artigo em destaque em foto larga com título no centro, título de seção à esquerda */
body.blog .xj-topo{padding:84px 0 0}
body.blog .xj-cats{background:#E6E7E0}
body.blog .xj-cats__in{display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);width:min(1200px,100% - 2*clamp(16px,3vw,40px));margin:0 auto;padding:16px 0;min-height:72px}
body.blog .xj-cats .blog-menu{display:block;margin:0;min-width:0}
body.blog .xj-cats .blog-menu__nivel{display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);margin:0;padding:0;list-style:none}
body.blog .xj-cats .blog-menu__item{margin:0;padding:0}
body.blog .xj-cats a{display:inline-block;font:400 16px/20px var(--corpo);letter-spacing:0;text-transform:none;color:var(--xj-tinta);text-decoration:none;padding:0 0 4px;border-bottom:1px solid var(--xj-tinta);white-space:nowrap;background:none}
body.blog .xj-cats a::before,body.blog .xj-cats a::after{display:none}
body.blog .xj-cats a:hover{border-bottom-color:transparent}
body.blog .xj-cats a.aqui{font-weight:500;border-bottom-color:transparent}
body.blog .xj-busca{margin-left:auto;flex:none;display:flex;align-items:center;gap:10px;width:min(350px,30vw);height:38px;padding:0 16px;border:0;border-radius:18px;background:#fff;color:var(--xj-suave);font:400 15px/1 var(--corpo);cursor:pointer;text-align:left}
body.blog .xj-busca svg{flex:none;color:var(--xj-tinta)}
body.blog .xj-topo~.miolo{margin-top:16px}
body.blog .xj-topo~.miolo .lista .artigo:first-child{position:relative;grid-column:1/-1;order:-2;display:block;height:clamp(380px,33vw,450px);border-radius:var(--xj-r);box-shadow:none;background:#1d2a1f}
body.blog .xj-topo~.miolo .lista .artigo:first-child>a:first-child{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;min-height:0}
body.blog .xj-topo~.miolo .lista .artigo:first-child::after{display:block!important;content:"";position:absolute;inset:0;background:rgb(0 0 0/.36);pointer-events:none}
body.blog .xj-topo~.miolo .lista .artigo:first-child .artigo-corpo{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;pointer-events:none}
body.blog .xj-topo~.miolo .lista .artigo:first-child .artigo-corpo>*{pointer-events:auto}
body.blog .xj-topo~.miolo .lista .artigo:first-child .art-meta{justify-content:center}
body.blog .xj-topo~.miolo .lista .artigo:first-child .art-meta>*:not(.pastilha){display:none}
body.blog .xj-topo~.miolo .lista .artigo:first-child .pastilha{color:#fff!important;font:400 20px/1.2 var(--corpo);text-transform:none;letter-spacing:0}
body.blog .xj-topo~.miolo .lista .artigo:first-child h2{font-size:clamp(30px,4.4vw,60px);line-height:1.17;max-width:930px;margin:0}
body.blog .xj-topo~.miolo .lista .artigo:first-child h2 a{color:#fff}
body.blog .xj-topo~.miolo .lista .artigo:first-child .artigo-resumo{display:none}
body.blog .xj-topo~.miolo .lista .artigo:first-child .continue{align-self:center;margin-top:6px;background:#323232!important}
body.blog .xj-topo~.miolo .lista .artigo:first-child .continue:hover{background:#000!important}
body.blog .xj-topo~.miolo .lista::before{content:"Últimos artigos";grid-column:1/-1;order:-1;font:400 clamp(32px,3.4vw,44px)/1.15 var(--display);letter-spacing:-.02em;color:var(--xj-tinta);margin:clamp(20px,3vw,36px) 0 8px}
@media (max-width:900px){
  body.blog .xj-cats__in{flex-wrap:wrap;gap:12px;padding:14px 0}
  body.blog .xj-busca{order:-1;width:100%;margin:0;height:42px;border-radius:21px}
  body.blog .xj-cats__in>a,body.blog .xj-cats .blog-menu{flex:none}
  body.blog .xj-cats__in{overflow-x:auto;scrollbar-width:none}
  body.blog .xj-cats__in::-webkit-scrollbar{display:none}
  body.blog .xj-cats__rol{display:flex;align-items:center;gap:20px;overflow-x:auto;scrollbar-width:none;width:100%}
}
@media (max-width:560px){body.blog .xj-topo~.miolo .lista .artigo:first-child{height:440px}body.blog .xj-topo~.miolo .lista .artigo:first-child .pastilha{font-size:17px}}
body.blog .xj-cats__rol{display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);min-width:0}
body.blog .xj-cats a{padding:0 0 4px!important;min-height:0!important;height:auto!important;line-height:20px!important;border-radius:0}
body.blog .xj-cats .blog-menu__item{display:block;line-height:1}
body.blog .xj-topo~.miolo .lista .artigo:first-child .pastilha{border:0!important;background:none!important;padding:0!important;box-shadow:none!important}
body.blog .xj-topo~.miolo .lista .artigo:first-child h2,body.blog .xj-topo~.miolo .lista .artigo:first-child h2 a{letter-spacing:0;text-shadow:none}
@media (max-width:900px){body.blog .xj-cats__rol{gap:20px;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}body.blog .xj-cats__rol::-webkit-scrollbar{display:none}body.blog .xj-cats .blog-menu__nivel{gap:20px}body.blog .xj-cats__in{overflow:visible}}

/* 15/11 (8): QA da capa: item "Blog" marcado no menu, como no site */
body.blog .top .blog-menu__item a[aria-current],body.blog .top .blog-menu__item a.aqui{text-decoration:underline;text-underline-offset:6px}

/* 15/11 (9): barra de categorias em caixa arredondada, na mesma largura da foto de destaque (antes era faixa reta de ponta a ponta) */
body.blog .xj-cats{background:none!important}
body.blog .xj-cats__in{background:#fff;border-radius:var(--xj-r);box-shadow:var(--xj-sombra);padding:12px 12px 12px 24px;min-height:60px;box-sizing:border-box}
body.blog .xj-busca{height:36px;background:var(--xj-fundo)}
body.blog .xj-topo~.miolo{margin-top:12px}
@media (max-width:900px){body.blog .xj-cats__in{padding:12px}}

/* 15/11 (10): QA do blog. Barra de categorias também nas páginas de categoria, autor e busca; pesos 600/700 viravam negrito falso (as fontes só têm 400 e 500); etiqueta de categoria legível nos cartões */
body.blog .xj-barra{padding:84px 0 0}
body.blog .xj-barra+.art-hero{padding-top:clamp(28px,4vw,44px)}
body.blog b,body.blog strong{font-weight:500}
body.blog .art-conversa-tit{font:400 26px/1.2 var(--display);letter-spacing:-.01em}
body.blog .art-conversa-sub{font-size:15px;line-height:22px}
body.blog .art-viz span{font:500 12px/1 var(--corpo);letter-spacing:.06em;text-transform:uppercase;color:var(--xj-suave)}
body.blog .art-viz b{font:500 15px/1.35 var(--corpo);color:var(--xj-tinta)}
body.blog .cmt-tags a{font-weight:500}
body.blog .art-leia-tit::before,body.blog .art-leia-tit::after{display:none!important}
body.blog .lista .artigo .pastilha,body.blog .cart .pastilha{font:500 12px/1 var(--corpo)!important;letter-spacing:.06em!important;border:0!important;padding:0!important;background:none!important;box-shadow:none!important}
body.blog .xj-topo~.miolo .lista .artigo:first-child .pastilha{font:400 20px/1.2 var(--corpo)!important;letter-spacing:0!important}
@media (max-width:560px){body.blog .xj-topo~.miolo .lista .artigo:first-child .pastilha{font-size:17px!important}}

/* 15/11 (11): últimos pesos falsos */
body.blog h1 a,body.blog h2 a,body.blog h3 a,body.blog .ca-tit a{font-weight:400!important}
body.blog .art-voto-rot{font-weight:500}

/* 15/11 (12): etiqueta de categoria numa linha só nos cartões; data e leitura descem juntas se faltar espaço */
body.blog .lista .artigo .art-meta,body.blog .cart .ca-meta{flex-wrap:wrap;row-gap:6px}
body.blog .lista .artigo .pastilha{white-space:nowrap;flex:0 0 100%}
body.blog .xj-topo~.miolo .lista .artigo:first-child .pastilha{flex:0 0 auto}
body.blog .lista .artigo .art-meta time,body.blog .lista .artigo .art-meta .leitura{white-space:nowrap}

/* 15/11 (13): barra de categorias reprovada pelo PO. Sai a caixa; as categorias vão para a linha do título "Últimos artigos" (título à esquerda, links em texto e busca à direita) */
body.blog .xj-topo--limpo{padding:76px 0 0}
body.blog .xj-topo~.miolo .col-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.blog .xj-topo~.miolo .lista{display:contents}
body.blog .xj-topo~.miolo .lista::before{display:none!important}
body.blog .xj-linha{grid-column:1/-1;order:-1;display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin:clamp(22px,3vw,40px) 0 10px}
body.blog .xj-linha h2{font:400 clamp(32px,3.4vw,44px)/1.15 var(--display);letter-spacing:-.02em;color:var(--xj-tinta);margin:0 auto 0 0}
body.blog .xj-linha .blog-menu{display:block;margin:0;min-width:0}
body.blog .xj-linha .blog-menu__nivel{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin:0;padding:0;list-style:none}
body.blog .xj-linha .blog-menu__item{margin:0;padding:0}
body.blog .xj-linha a{font:500 16px/22px var(--corpo);letter-spacing:0;text-transform:none;color:var(--xj-tinta);text-decoration:none;padding:0;border:0;background:none;white-space:nowrap}
body.blog .xj-linha a::before,body.blog .xj-linha a::after{display:none}
body.blog .xj-linha a:hover{text-decoration:underline;text-underline-offset:6px}
body.blog .xj-linha__busca{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgb(50 50 50/.25);border-radius:50%;background:none;color:var(--xj-tinta);cursor:pointer}
body.blog .xj-linha__busca:hover{background:#fff}
@media (max-width:900px){
  body.blog .xj-topo~.miolo .col-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.blog .xj-linha{flex-wrap:wrap;gap:12px}
  body.blog .xj-linha h2{margin-right:auto}
  body.blog .xj-linha nav{order:3;flex:0 0 100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  body.blog .xj-linha nav::-webkit-scrollbar{display:none}
}
@media (max-width:560px){body.blog .xj-topo~.miolo .col-in{grid-template-columns:minmax(0,1fr)}}
body.blog .xj-linha{min-width:0}body.blog .xj-linha nav{min-width:0;max-width:100%}

/* 15/11 (14): nome do cabeçalho, da busca, do rodapé e da página de erro sem sublinhado, também com o mouse em cima (igual ao site) */
body.blog .top .marca,body.blog .top .marca:hover,body.blog .top .marca:focus,body.blog .top .marca::after,body.blog .top .marca:hover::after,body.blog .busca-marca,body.blog .busca-marca:hover,body.blog .busca-marca::after,body.blog .rod-logo,body.blog .rod-logo:hover,body.blog .rod-logo::after,body.blog .erro-marca,body.blog .erro-marca:hover,body.blog .erro-marca::after{text-decoration:none!important;border-bottom:0!important;box-shadow:none!important;background-image:none!important}
body.blog .top .bt-membros,body.blog .top .bt-membros:hover{text-decoration:none!important}

/* 15/11 (15) aviso de cookies igual ao do site */
.xj-ck{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 24px);padding:8px 8px 8px 18px;border-radius:9999px;background:rgb(255 255 255/.94);box-shadow:0 12px 32px -12px rgb(15 42 28/.35);font:400 14px/20px Roboto,sans-serif;color:#323232}
.xj-ck[hidden]{display:none}
.xj-ck p{margin:0}
.xj-ck a{text-decoration:underline;color:inherit}
.xj-ck div{display:flex;gap:6px}
.xj-ck button{min-height:38px;padding:6px 16px;border-radius:9999px;border:1px solid transparent;font:500 14px/22px Roboto,sans-serif;cursor:pointer;white-space:nowrap}
.xj-ck button[data-cookies="todos"]{background:#0F2A1C;color:#fff}
.xj-ck button[data-cookies="necessarios"]{background:transparent;border-color:rgb(50 50 50/.3);color:#323232}
.xj-ck button:focus-visible{outline:2px solid #0F2A1C;outline-offset:2px}
@media (max-width:560px){.xj-ck{flex-direction:column;align-items:stretch;border-radius:16px;padding:14px;width:calc(100vw - 24px)}.xj-ck div button{flex:1;min-height:44px}}

/* O CSS do rodape e da barra lateral vive no cabecalho, junto do resto
   da folha comum: as tres pecas globais sao concatenadas numa folha so
   pelo BlogStylesheet, e separar aqui so criaria um segundo lugar para
   procurar. */

/* O CSS do rodape e da barra lateral vive no cabecalho, junto do resto
   da folha comum: as tres pecas globais sao concatenadas numa folha so
   pelo BlogStylesheet, e separar aqui so criaria um segundo lugar para
   procurar. */