/* Moldura do site em volta das Cartinhas do CEO.

   As cartinhas foram feitas como páginas soltas, com o próprio CSS (inclusive
   seletores de elemento: *, body, p, a, h2). O site tem o main.css, cujo
   preflight zera margem de p, h2 e listas. Se os dois convivessem do jeito
   normal, um desmontaria o outro. A regra aqui é: a carta fica EXATAMENTE como
   era, e o header e o footer do site ficam exatamente como no resto do site.

   Como, com camadas de cascata (@layer):
   1. O main.css entra na camada "site", a mais fraca.
   2. A camada "guarda" desfaz o site em tudo o que não é moldura: html, body e
      o conteúdo da carta voltam ao padrão do navegador. O CSS da carta não está
      em camada nenhuma, então ganha de tudo, como ganhava sozinho.
   3. Na moldura (#a4c-topo, #a4c-rodape, #a4c-cookies) é o contrário: o
      revert-layer no fim descarta o CSS da carta e devolve o do site. Os ids
      são para ganhar em especificidade de qualquer regra da carta.

   A trilha de navegação visível (Blog > Cartinhas do CEO > título) existiu por
   uma hora em 30/10/2026 e saiu: tomava o topo. Ela segue no JSON-LD. */
@layer site, moldura, guarda;
@import url("/assets/css/main.css") layer(site);

@layer moldura {
  /* O que a moldura herdaria do <body> da carta (fonte, tamanho, cor) vem
     daqui, com os valores do <body> do índice do blog. */
  #a4c-topo, #a4c-rodape, #a4c-cookies {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px; line-height: 1.6; font-weight: 400; font-style: normal;
    letter-spacing: normal; word-spacing: normal; text-align: left;
    text-transform: none; color: #334155; -webkit-font-smoothing: antialiased;
    /* Variável CSS atravessa o "all" (ele não toca custom properties). As
       cartas definem --accent no :root, e sem isto o botão Testar Grátis do
       header saía na cor da carta. Valores do :root do main.css. */
    --accent: #1488d6; --accent-2: #16a4df; --accent-soft: #e6f4fc; --accent-ink: #0e6fae;
    --accent-rgb: 20, 136, 214; --hero-from: #0e3a5c; --hero-to: #145b82;
    --ia: #4f5aa8; --ia-soft: #eef0f9;
  }
  #a4c-topo { position: sticky; top: 0; z-index: 40; }
}

@layer guarda {
  html, body,
  body > :not(#a4c-topo, #a4c-rodape, #a4c-cookies),
  body > :not(#a4c-topo, #a4c-rodape, #a4c-cookies) * { all: revert; }
}

#a4c-topo, #a4c-topo *, #a4c-rodape, #a4c-rodape * { all: revert-layer; }

/* O banner de cookies traz um <style> próprio, com classes (.ck-ok, .ck-link).
   Com peso de id, esta regra desfazia o banner também. [id=...] pesa como uma
   classe e vem antes dele no documento: no empate o banner ganha, e as regras
   de elemento da carta (p, a, button) continuam barradas. */
[id="a4c-cookies"], [id="a4c-cookies"] * { all: revert-layer; }