/* ============================================================================
   blocos.css — estilos dos blocos nativos e das peças dos patterns
   ----------------------------------------------------------------------------
   O theme.json cobre cor, fonte e espaçamento de cada bloco. O que sobra para
   cá é a FORMA que ele não descreve: cartão com hairline, barra de navegação
   grudada, selo, ponto pulsante e as poucas variações de estilo que o tema
   registra para o editor.

   Regra: preferir classes que o próprio WordPress já emite (`.wp-block-*`,
   `.is-style-*`) a inventar nomes. Assim o pattern continua editável — quem
   mexe no editor não precisa saber que existe um CSS por trás.
   ========================================================================== */

/* --- Cartão ---------------------------------------------------------------
   Registrado como variação de estilo do core/group: no editor aparece como
   "Cartão" na aba Estilos, e o conteúdo dentro segue sendo blocos normais. */
.wp-block-group.is-style-card,
.inriqueza-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), var(--inset-hairline);
  padding: 1.5rem;
  position: relative;
  transition: border-color var(--t-base) ease, transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) ease;
}

.wp-block-group.is-style-card-hover:hover,
.inriqueza-card--hover:hover {
  border-color: rgb(var(--accent-rgb) / 0.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* --- Ícone -----------------------------------------------------------------
   Um <svg> que aponta para um símbolo de assets/icons/inriqueza.svg. O traço em
   `currentColor` é o que faz o ícone herdar a cor do texto ao redor e acompanhar a troca de tema
   sem nenhuma regra por tema. `em` e não `rem`: o ícone acompanha o tamanho da fonte do contexto,
   então o mesmo `.ico` serve num título e numa legenda. */
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  vertical-align: -0.2em;
}
.ico-lg { width: 1.75em; height: 1.75em; }
.ico-acento { color: var(--accent); }

/* --- Linha de serviço: delimitação por FIO, não por retângulo --------------
   Substitui o cartão nas páginas onde o serviço ocupa a largura inteira.

   O DEFEITO QUE ELA CORRIGE, medido em 19/09 na página Serviços no ar: o cartão tinha 1217px de
   largura e o texto dentro dele, 760px — o `contentSize` do theme.json. Sobravam **409px de caixa
   vazia à direita**, em cada um dos seis. Não era o padding que estava grande; era a caixa que era
   larga demais para o que carregava. Diminuir o respiro não resolveria: o vazio continuaria lá.

   Aqui a largura passa a ser USADA — três colunas: o ícone na margem, o título, e o texto na medida
   de leitura. E a delimitação vem de um fio entre as linhas, no lugar de seis retângulos
   empilhados, que é o layout que toda consultoria usa.

   O fio acende no acento ao passar o cursor. É a linguagem do farol da marca, e é o mesmo gesto do
   `is-style-lit-edge`, que já existia no tema e não era usado em lugar nenhum. */
.wp-block-group.is-style-servico {
  display: grid;
  /* A terceira trilha para em 760px — o mesmo `contentSize` do theme.json, ~74 caracteres por
     linha. Sem o teto ela ficaria com 885px (~86 caracteres), longa demais para leitura corrida.
     O que sobra à direita é MARGEM, e margem não incomoda; o que incomodava era caixa vazia. */
  grid-template-columns: auto minmax(0, 15rem) minmax(0, 760px);
  /* `start` porque uma trilha `auto` ESTICA para absorver a sobra quando `justify-content` é
     `normal`. Com o teto de 760px na terceira coluna passou a haver sobra, e ela foi inteira para a
     primeira: medido no ar em 19/09, as trilhas viraram `296px 240px 760px` numa página de 1360 —
     o ícone ficava órfão a 268px do título, e a linha lia como três colunas soltas em vez de uma.
     Com `start`, as trilhas ficam do tamanho que pedem e a sobra vai para o fim, onde é margem. */
  justify-content: start;
  column-gap: 2rem;
  row-gap: 0.6rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
  transition: border-color var(--t-base) ease;
  /* zera o que vinha do cartão, para a mesma marcação servir aos dois estilos */
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.wp-block-group.is-style-servico:last-of-type { border-bottom: 1px solid var(--line); }
.wp-block-group.is-style-servico:hover { border-top-color: rgb(var(--accent-rgb) / 0.55); }

/* O layout `constrained` do WordPress dá `margin-inline: auto` e `max-width: contentSize` a todo
   filho direto. Numa grade isso faz mais estrago do que parece: **margem `auto` DESLIGA o
   esticamento do item**, então cada filho passa a ter a largura do próprio conteúdo e as duas
   margens automáticas o CENTRALIZAM na célula. Medido na primeira conferência desta linha: a trilha
   do título tem 240px em todos os seis, mas o `<h2>` media 240, 240, 177, 240, 237 e 198 — e a
   margem esquerda da coluna ficava serrilhada, cada título começando num lugar.

   O `!important` aqui não é preguiça: é a única resposta possível a um `!important` do próprio
   WordPress (`.is-layout-constrained > :where(...) { margin-left: auto !important }`), que nenhuma
   especificidade alcança. A alternativa seria trocar o layout do grupo para `default` no conteúdo —
   mas então bastaria alguém aplicar este estilo pelo editor a um grupo `constrained` para o defeito
   voltar, sem nada na tela explicando por quê. */
.wp-block-group.is-style-servico > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

/* Ícone na margem, título na coluna do meio, TODO o resto na da direita — empilhado sozinho pelo
   posicionamento automático da grade. Serve a dois parágrafos ou a cinco, sem `nth-child` contando
   filhos que um dia mudam.

   As três colunas existem para que ícone e título fiquem na MESMA linha da grade. Com o ícone numa
   linha própria acima do título, a altura da linha 1 passava a ser a do primeiro parágrafo da
   coluna da direita — duas linhas de texto — e o título descia junto, desalinhado de tudo. */
.is-style-servico > .servico-ico { grid-column: 1; grid-row: 1; }
.is-style-servico > :is(h2, h3)  { grid-column: 2; grid-row: 1; margin: 0; }
.is-style-servico > :not(h2, h3, .servico-ico) { grid-column: 3; margin-top: 0; }

.is-style-servico .servico-ico {
  display: block;
  color: var(--accent);
  line-height: 0;
  /* alinha o ícone à altura da maiúscula do título, não ao topo da caixa dele */
  margin-top: 0.15em;
  transition: transform var(--t-base) var(--ease-out);
}
.is-style-servico:hover .servico-ico { transform: translateY(-2px); }

/* Em tela estreita não há colunas: ícone, título e texto empilham. 900px é onde a coluna de
   leitura da direita cairia abaixo de ~45 caracteres, estreito demais para um parágrafo.

   Os seletores aqui repetem OS MESMOS de cima, um a um, e não um `> *` que cobriria todos. Media
   query NÃO acrescenta especificidade: `.is-style-servico > *` (0,1,0) perde para
   `.is-style-servico > :is(h2, h3)` (0,1,1) mesmo estando dentro de um `@media` e mais abaixo no
   arquivo. O sintoma medido a 390px foi silencioso e estranho — a grade virava de uma coluna, mas
   os filhos continuavam pedindo as colunas 2 e 3, o navegador criava trilhas IMPLÍCITAS para
   atendê-los, e o layout de três colunas sobrevivia espremido em 342px. */
@media (max-width: 900px) {
  .wp-block-group.is-style-servico {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0.75rem;
    padding: 1.75rem 0;
  }
  .is-style-servico > .servico-ico { grid-column: 1; grid-row: 1; margin-bottom: 0.35rem; }
  .is-style-servico > :is(h2, h3) { grid-column: 1; grid-row: 2; }
  .is-style-servico > :not(h2, h3, .servico-ico) { grid-column: 1; grid-row: auto; }
}


/* Fio de luz no topo de um cartão em destaque. */
.is-style-lit-edge { position: relative; }
.is-style-lit-edge::before {
  content: "";
  position: absolute;
  inset-inline: 2rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-wash-rgb) / 0.55), transparent);
  pointer-events: none;
}

/* --- Selo ----------------------------------------------------------------- */
.inriqueza-badge,
.is-style-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgb(var(--text-rgb) / 0.03);
}
.is-style-badge-accent {
  color: var(--accent);
  border-color: rgb(var(--accent-rgb) / 0.35);
  background: rgb(var(--accent-rgb) / 0.10);
}

/* Ponto pulsante — o "ao vivo" da marca. */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  flex: none;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* --- Cabeçalho do site ----------------------------------------------------
   O template part `header` é um core/group; a classe vem do próprio pattern.

   QUEM GRUDA É O WRAPPER, não o grupo de dentro — e isso não é preferência.

   O WordPress envolve todo template-part num elemento próprio, então a marcação real é
   `<header class="wp-block-template-part"><header class="wp-block-group inriqueza-navbar">`. Um
   elemento `sticky` nunca sai da caixa do PAI, e esse pai tem exatamente a altura do cabeçalho —
   75px, medidos. Com 75px de pai, o sticky tem ZERO de curso: ele rola junto com o conteúdo e some.

   O wrapper, por sua vez, é filho direto de `.wp-site-blocks`, que tem a altura da página inteira.
   Grudando ali, o curso é a página toda. O seletor não depende de `:has()` nem de classe nova na
   marcação: o part do cabeçalho é sempre o primeiro filho de `.wp-site-blocks`.

   A outra metade do defeito estava no `overflow-x: hidden` do body — ver base.css. Consertar só uma
   das duas não muda nada na tela; foi testado ao vivo antes de escrever isto. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
}

.inriqueza-navbar {
  border-bottom: 1px solid var(--line);
  background: rgb(var(--bg-rgb) / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.inriqueza-navbar .wp-block-navigation a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--t-fast) ease;
}
/* A grade de posts se ADAPTA à quantidade que existe.
   `columnCount: 3` do editor vira `repeat(3, 1fr)`: com um artigo só — que é o estado de um
   blog que está começando — o cartão ocupa um terço e sobram dois vazios ao lado. `auto-fit`
   colapsa as trilhas sem conteúdo, então um artigo ocupa a linha, dois dividem ao meio e três
   ou mais voltam ao que o editor pediu. O mínimo de 20rem é o que impede o cartão de ficar
   estreito demais para o título caber em duas linhas. */
.wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* O botão de ação SAI da barra em tela estreita.
   Medido: a barra tem 75px numa linha; com o botão ela vai a 97px em 375px (o rótulo
   quebra em duas linhas) e de novo em 600px, onde o menu acabou de virar horizontal e
   os dois não cabem. Nada se perde escondendo-o — "Contato" está no menu nas duas
   faixas, e toda página termina na faixa de chamada. */
@media (max-width: 781px) {
  .inriqueza-navbar .wp-block-buttons { display: none; }
}

.inriqueza-navbar .wp-block-navigation a:hover,
.inriqueza-navbar .wp-block-navigation .current-menu-item > a {
  color: var(--text-strong);
  text-decoration: none;
}

/* O logotipo troca de arquivo com o tema: a versão clara some no tema claro e
   vice-versa. Duas imagens em vez de um filtro CSS porque filtro sobre SVG
   colorido produz cor aproximada, não a cor da marca. */
.marca-clara { display: none; }
[data-theme="dark"] .marca-clara { display: block; }
[data-theme="dark"] .marca-escura { display: none; }

/* --- Botão de alternar tema ----------------------------------------------- */
.inriqueza-tema-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.inriqueza-tema-btn:hover {
  background: rgb(var(--text-rgb) / 0.06);
  color: var(--text-strong);
}
.inriqueza-tema-btn svg { width: 18px; height: 18px; }
.inriqueza-tema-btn .icone-claro { display: none; }
[data-theme="dark"] .inriqueza-tema-btn .icone-claro { display: block; }
[data-theme="dark"] .inriqueza-tema-btn .icone-escuro { display: none; }

/* --- Links com seta ------------------------------------------------------- */
.is-style-link-arrow a,
a.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--t-fast) ease;
}
.is-style-link-arrow a:hover,
a.link-arrow:hover { gap: 0.7rem; text-decoration: none; }
.is-style-link-arrow a::after,
a.link-arrow::after { content: "→"; }

/* ============================================================================
   BLOG
   ============================================================================ */

/* --- Layout: conteúdo + barra de temas ------------------------------------ */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 3rem;
  align-items: start;
}

/* A barra acompanha a rolagem. O `top` precisa limpar a barra da aplicação, que é grudada: 6rem é
   a altura dela (75px medidos) mais um respiro. */
.blog-temas { position: sticky; top: 6rem; }

.blog-temas-titulo {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-subtle);
  margin: 0 0 0.5rem;
}

/* O bloco `core/categories` devolve uma <ul>. O fio entre os itens repete a delimitação da linha de
   serviço: separar sem encaixotar. */
.blog-temas-lista { list-style: none; margin: 0; padding: 0; }

/* O `<li>` é FLEX, e isso resolve a contagem. Com `showPostCounts`, o WordPress escreve o número
   como um NÓ DE TEXTO solto depois do `</a>` — não há elemento para estilizar, e com o link em
   `display: block` o "(2)" caía numa linha própria embaixo do nome do tema. Num contêiner flex,
   texto solto vira um item anônimo: o `justify-content` o manda para a direita, alinhado. */
.blog-temas-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.blog-temas-lista li:last-child { border-bottom: 1px solid var(--line); }
.blog-temas-lista a {
  padding: 0.55rem 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.blog-temas-lista a:hover { color: var(--text-strong); }
.blog-temas-lista .current-cat > a { color: var(--accent); font-weight: 600; }

/* Em tela estreita a barra vai para baixo dos artigos e para de grudar: uma coluna de temas colada
   no topo comeria a altura útil de um celular. */
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .blog-temas { position: static; }
}

/* --- Alternador lista/grade ----------------------------------------------- */
.blog-barra { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.vista-troca {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.vista-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.vista-btn + .vista-btn { border-left: 1px solid var(--line); }
.vista-btn:hover { color: var(--text-strong); }
.vista-btn[aria-pressed="true"] {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--text-strong);
}
/* Sem JavaScript o alternador não faz nada — então ele não aparece. Melhor do que um controle que
   não responde. A classe entra em vista-blog.js. */
.blog-barra { display: none; }
.js-vista .blog-barra { display: flex; }

/* --- Cartão de artigo ------------------------------------------------------ */

/* A capa quando o artigo NÃO tem imagem destacada: o feixe da marca sobre um tom da rampa, como
   pede o design system ("dispensa banco de imagens"). Com imagem, some. */
.cartao-capa {
  position: relative;
  height: 9rem;
  margin-bottom: 0.85rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgb(var(--chart-5-rgb) / 0.35);
}
.cartao-post:has(.wp-post-image) .cartao-capa { display: none; }
.cartao-imagem img { border-radius: var(--r-md); }

.cartao-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-2xs);
}
.wp-block-post-time-to-read {
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* As tags sob o título, como palavras-chave. O "#" é decoração do CSS: escrevê-lo no nome do termo
   sujaria o próprio cadastro. */
.cartao-tags { font-size: var(--fs-2xs); margin-top: 0.6rem; }
.cartao-tags a { color: var(--text-subtle); text-decoration: none; }
.cartao-tags a::before { content: "#"; opacity: 0.6; }
.cartao-tags a:hover { color: var(--accent); }

/* --- A caixa inteira é clicável ------------------------------------------
   Pelo padrão do "link esticado": o `<a>` que já existe no título ganha um `::after` que cobre o
   cartão. Sem `<a>` dentro de `<a>` — que é HTML inválido e quebraria os links de categoria e tag —
   e sem nenhuma mudança de marcação.

   As três linhas de empilhamento não são enfeite. `.flashlight-target > *` põe todo filho em
   `position: relative; z-index: 1`, e cada um desses vira um CONTEXTO DE EMPILHAMENTO próprio: o
   `::after` do título ficaria preso à caixa do título, não à do cartão, e os links que precisam
   continuar clicáveis ficariam presos abaixo da camada de cobertura. Por isso:

     1. o cartão isola o próprio contexto (`isolation`), para que z-index negativo funcione dentro;
     2. o brilho do cursor desce para −1, atrás do conteúdo (em z-index 0 ele passaria POR CIMA do
        texto, que é conteúdo em fluxo e pinta numa camada anterior à dos posicionados);
     3. o título deixa de ser posicionado, para que a cobertura se ancore no cartão. */
.cartao-post { isolation: isolate; }
.cartao-post.flashlight-target::before { z-index: -1; }
.cartao-post .wp-block-post-title { position: static; }
/* A cobertura precisa ficar ACIMA dos irmãos, não empatada com eles. `.flashlight-target > *` põe
   todo filho em `z-index: 1`; com a cobertura também em 1, o resumo — que vem DEPOIS do título no
   DOM — pintava por cima e recebia o clique. Medido: `elementFromPoint` no meio do cartão devolvia
   o `<p>` do resumo, não o link. Daí a escada 2 (cobertura) e 3 (o que continua clicável). */
.cartao-post .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.cartao-post .cartao-meta,
.cartao-post .cartao-tags { position: relative; z-index: 3; }
.cartao-post { cursor: pointer; }

/* --- Visão LISTA: sem caixa, e o título SUBLINHADO -------------------------
   O sublinhado é o pedido central: sem ele não há sinal nenhum de que o título leva a algum lugar.
   Na grade quem dá o sinal é a caixa inteira clicável; aqui não há caixa, então o sinal volta a ser
   o do link de sempre. */
.vista-lista .wp-block-post-template.is-layout-grid { display: block; }
.vista-lista .cartao-post {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 1.05rem 0;
}
.vista-lista .cartao-post:last-child { border-bottom: 1px solid var(--line); }
/* o cartão da grade levanta no hover; numa lista isso faria a linha pular */
.vista-lista .cartao-post:hover { transform: none; box-shadow: none; border-color: var(--line); }
.vista-lista .cartao-capa,
.vista-lista .cartao-imagem,
.vista-lista .wp-block-post-excerpt,
.vista-lista .wp-block-post-time-to-read { display: none; }
.vista-lista .wp-block-post-title { margin: 0; }
.vista-lista .wp-block-post-title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgb(var(--accent-rgb) / 0.45);
}
.vista-lista .wp-block-post-title a:hover { text-decoration-color: var(--accent); }
.vista-lista .cartao-meta { display: none; }
/* A cobertura clicável sai na lista: aqui quem sinaliza é o sublinhado, e uma camada invisível
   sobre a linha inteira engoliria o clique das tags, que ficam logo abaixo do título. */
.vista-lista .cartao-post .wp-block-post-title a::after { display: none; }
.vista-lista .cartao-post { cursor: auto; }
.vista-lista .cartao-tags { margin-top: 0.35rem; }

/* --- Blocos nativos que precisam de ajuste -------------------------------- */
.wp-block-post-title a { text-decoration: none; color: inherit; }
.wp-block-post-title a:hover { color: var(--accent); }

.wp-block-post-excerpt__excerpt { color: var(--text-muted); font-size: var(--fs-sm); }

.wp-block-post-date,
.wp-block-post-terms {
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.wp-block-separator { border: 0; border-top: 1px solid var(--line); opacity: 1; }

.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th {
  background: var(--surface-sunken);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
}

.wp-block-quote {
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  margin-left: 0;
}

/* ============================================================================
   FORMULÁRIOS
   ----------------------------------------------------------------------------
   Estes estilos miram os controles NATIVOS (`input`, `textarea`, `select`), e não as classes de
   um plugin específico. O formulário de contato ainda vai ser criado no WPForms; mirando o
   elemento, ele nasce na identidade da casa sem que ninguém precise descobrir os nomes de classe
   do plugin — e continua certo se o plugin for trocado um dia.

   O design system nomeia `field`, `field-label`, `field-hint` e `field-error`; as classes ficam
   disponíveis para marcação escrita à mão, e os seletores de elemento cobrem o resto.
   ========================================================================== */
.field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.field:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
}
input::placeholder,
textarea::placeholder { color: var(--text-subtle); }
textarea { min-height: 8rem; resize: vertical; }

.field-label,
form label {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.field-hint { font-size: var(--fs-2xs); color: var(--text-subtle); margin-top: 0.25rem; }
.field-error { border-color: var(--negative); }
.field-error-texto { font-size: var(--fs-2xs); color: var(--negative); margin-top: 0.25rem; }

/* O campo obrigatório é marcado por ASTERISCO e por texto, nunca só por cor: é a regra "cor não é
   o único sinal" do design system. */
.field-label[data-obrigatorio]::after {
  content: " *";
  color: var(--accent);
}

/* A busca do core: os dois filhos ficam na mesma linha e o botão não herda a largura total. */
/* ============================================================================
   WPFORMS — o formulário de agendamento nas cores do tema
   ----------------------------------------------------------------------------
   O DEFEITO: no tema escuro o texto do formulário saía PRETO e ficava ilegível.

   POR QUE ACONTECIA. O WPForms 1.8+ renderiza com a "marcação moderna"
   (`.wpforms-render-modern`) e imprime um bloco `<style id="wpforms-css-vars-NN">`
   que define as cores dele como variáveis CSS **no `:root`**. Medido no ar:

       --wpforms-field-text-color: rgba( 0, 0, 0, 0.7 )
       --wpforms-label-color:      rgba( 0, 0, 0, 0.85 )
       --wpforms-field-background-color: #ffffff

   São valores FIXOS, escritos uma vez, que não sabem que este site tem dois
   temas. No claro passam despercebidos; no escuro é preto sobre azul noturno.

   POR QUE A CORREÇÃO É REDEFINIR AS VARIÁVEIS, E NÃO SOBRESCREVER AS REGRAS.
   Perseguir `color` em cada seletor do plugin seria uma lista longa, frágil a
   cada atualização dele, e cheia de `!important`. As variáveis são a superfície
   que o próprio WPForms oferece para ser trocada: mudando-as, TODAS as regras
   dele passam a desenhar com os nossos tokens, inclusive as que ainda não
   existem na versão de hoje.

   POR QUE ISTO VENCE O `:root` DO PLUGIN, sem `!important` e sem depender de
   ordem de carregamento: variável CSS resolve pelo ANCESTRAL MAIS PRÓXIMO que a
   declara. O `<style>` do plugin declara no `:root`; aqui declaramos no
   `.wpforms-container`, que está bem mais perto dos campos. Especificidade e
   ordem de arquivo não entram na conta.

   E POR QUE NÃO HÁ BLOCO SEPARADO PARA CLARO E ESCURO: os tokens do tema
   (`--text-strong`, `--surface`, `--accent`) já trocam sozinhos com o
   `data-theme`. Um conjunto de regras serve os dois.

   MEDIDO NA PÁGINA DE CONTATO NO AR, com estas regras aplicadas:

       elemento            escuro     claro
       texto do campo      15,90:1    17,66:1
       rótulo              17,66:1    15,78:1
       texto de apoio        —         5,73:1
       botão de enviar     10,60:1     7,83:1

   Todos acima de 4,5:1 (AA). Antes, no escuro, o texto do campo era preto sobre
   a superfície escura.
   ========================================================================== */
.wpforms-container {
  /* Texto */
  --wpforms-field-text-color: var(--text-strong);
  --wpforms-label-color: var(--text-strong);
  --wpforms-label-sublabel-color: var(--text-subtle);
  --wpforms-label-error-color: var(--negative);

  /* Campos */
  --wpforms-field-background-color: var(--surface);
  --wpforms-field-border-color: var(--line-strong);
  --wpforms-field-border-color-spare: var(--line-strong);
  --wpforms-field-menu-color: var(--surface);
  --wpforms-field-border-radius: var(--r-md);

  /* Botão de enviar. O azul padrão do plugin (#066aab) não é da marca; o par
     acento + bg-deep é o mesmo do botão primário do site e inverte sozinho
     entre os temas — Azul Profundo com texto claro no claro, Azul Brisa com
     texto escuro no escuro. */
  --wpforms-button-background-color: var(--accent);
  --wpforms-button-border-color: var(--accent);
  --wpforms-button-text-color: var(--bg-deep);
  --wpforms-button-border-radius: var(--r-md);

  /* Moldura e passos */
  --wpforms-container-border-color: var(--line);
  --wpforms-page-break-color: var(--accent);
}

/* Estes dois o plugin não expõe como variável. */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: var(--text-subtle); }
.wpforms-container .wpforms-required-label { color: var(--negative); }

.wp-block-search__inside-wrapper { gap: 0.5rem; }
.wp-block-search__input { flex: 1 1 auto; }
.wp-block-search__button {
  width: auto;
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================================
   AVISOS, CITAÇÃO E ESTADOS
   ============================================================================ */

/* Aviso e erro do design system. O ícone é obrigatório na marcação: num aviso, cor sozinha não
   informa quem não a distingue. */
.callout,
.state-error,
.tip {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: rgb(var(--text-rgb) / 0.03);
}
.callout { border-left-color: var(--accent); }
.callout .ico { color: var(--accent); }
.state-error {
  border-left-color: var(--negative);
  background: rgb(var(--negative-rgb) / 0.06);
}
.state-error .ico { color: var(--negative); }
.callout > p:last-child,
.state-error > p:last-child,
.tip > p:last-child { margin-bottom: 0; }

/* Citação na serifada, que é a "segunda voz" da marca. */
.quote,
.wp-block-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-strong);
}

/* Estado vazio: onde não há dado, dizer o que fazer em vez de deixar branco. */
.state-empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--text-muted);
}
.state-empty .ico { color: var(--text-subtle); }

/* Selo de canto reto — a variação `badge-square` do design system. */
.is-style-badge-square,
.badge-square { border-radius: var(--r-xs); }

/* Esqueleto de carregamento. */
.skeleton {
  background: linear-gradient(90deg,
    rgb(var(--text-rgb) / 0.06),
    rgb(var(--text-rgb) / 0.12),
    rgb(var(--text-rgb) / 0.06));
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skeletonPulso 1.4s ease-in-out infinite;
}
@keyframes skeletonPulso {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* Rodapé */
.inriqueza-footer { border-top: 1px solid var(--line); }
.inriqueza-footer a { color: var(--text-muted); text-decoration: none; }
.inriqueza-footer a:hover { color: var(--text-strong); }

/* ============================================================================
   AS DIMENSÕES DO HERÓI
   ----------------------------------------------------------------------------
   Medido contra a abertura do Lumimotion (`lumimotion-ai-ui-prompt.aura.build`),
   que é a referência de respiro deste projeto. O que fazia a dela parecer mais
   espaçosa NÃO era o corpo do título — os dois batem em ~72px — e sim três
   folgas que aqui não existiam:

   1. O BLOCO DE TEXTO NÃO OCUPA O SHELL INTEIRO. Lá são 1.152px de texto dentro
      de um shell de 1.360px; aqui o `alignwide` esticava as duas colunas nos
      1.360px e o parágrafo terminava colado na borda da janela.

   2. 48px ENTRE AS COLUNAS, e não os 24px do `blockGap` padrão.

   3. UMA ALTURA MÍNIMA. Sem ela a seção media o texto e parava: 350px de
      abertura numa tela de 900px, com o feixe do farol sem espaço para existir.

   O piso de altura já foi 84vh, quando o herói carregava o recorte do
   Diagnóstico no fundo. Sem ele o herói é só texto, e 84vh deixavam ~270px de
   vazio depois dos botões. A folga de topo (8rem, `spacing|80`) e a de baixo vêm
   do pattern, porque são propriedades do BLOCO e precisam continuar editáveis
   no editor.
   ========================================================================== */
.heroi { min-height: clamp(24rem, 62vh, 36rem); }

/* A dupla de classes é para VENCER o `.wp-block-group.is-layout-constrained >
   .alignwide` que o WordPress imprime no <head>: ele vale 0,2,0 e um seletor de
   classe só perdia a disputa — a coluna continuava nos 1.360px. */
.heroi .heroi-texto.alignwide {
  max-width: 1152px;
  margin-inline: auto;
  gap: 3rem;
}

/* ============================================================================
   A ENTRADA DA PRIMEIRA DOBRA
   ----------------------------------------------------------------------------
   O Lumimotion anima o herói com GSAP: cada item sobe 40px saindo de `blur(12px)`,
   em cascata de 150ms. O efeito é bom; as ~70KB de biblioteca para reproduzi-lo
   num site institucional, não. São quatro elementos e uma curva — cabe em CSS.

   A cascata sai do `nth-child` das duas colunas, e não de uma classe por bloco:
   assim quem editar o herói no editor não precisa lembrar de carimbar nada em
   cada peça nova. O selo vem primeiro, o título depois, e o lado direito fecha.

   `both` preserva o estado inicial ANTES do atraso — sem ele os quatro elementos
   piscariam visíveis no primeiro quadro e só então cairiam para a opacidade zero.

   NÃO ESTÁ DENTRO DE UM `prefers-reduced-motion: no-preference`, e já esteve.
   Ali, quem pedisse menos movimento não tinha entrada nenhuma — os quatro
   elementos apareciam de uma vez. Agora o deslocamento e o desfoque são
   variáveis, e é o bloco de movimento reduzido em efeitos.css que as zera: fica
   o fade de opacidade, que não desloca nada na tela. A cascata de atrasos
   sobrevive, porque escalonar opacidade também não é movimento.
   ========================================================================== */
.heroi-texto .wp-block-column > * { animation: surgir 1s var(--ease-out) both; }
.heroi-texto .wp-block-column:first-child > *:nth-child(1) { animation-delay: 60ms; }
.heroi-texto .wp-block-column:first-child > *:nth-child(2) { animation-delay: 200ms; }
.heroi-texto .wp-block-column:last-child  > *:nth-child(1) { animation-delay: 340ms; }
.heroi-texto .wp-block-column:last-child  > *:nth-child(2) { animation-delay: 480ms; }

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(var(--surge-y, 26px));
    filter: blur(var(--surge-blur, 10px));
  }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================================
   AS SEÇÕES SE ENCOSTAM
   ----------------------------------------------------------------------------
   Cada seção da home é uma faixa fechada por um fio (`border-bottom`). O layout
   do WordPress, porém, separa irmãos pelo `blockGap` — 24px — e isso vale também
   entre o cabeçalho e o `main` e entre uma seção e a seguinte. O resultado era um
   vão de fundo cru logo abaixo da barra de navegação, e um segundo vão no meio de
   cada divisória: 96px de folga, o fio, 24px de nada, mais 96px de folga.

   Faixa encostada em faixa é o desenho: o fio separa, e quem dá o respiro é o
   padding de dentro da seção — que continua editável no pattern.
   ========================================================================== */
/* A regra do WordPress é `:root :where(.is-layout-flow) > *`, que vale 0,1,0 por
   causa do `:root` — `main > *` (0,0,1) perdia e o vão continuava lá. Uma classe
   a mais em cada seletor resolve. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
main.wp-block-group > * { margin-block-start: 0; }

/* ============================================================================
   LADO DIREITO DO HERÓI
   ----------------------------------------------------------------------------
   782px é o ponto em que o WordPress deixa de empilhar `wp:columns`. Acima
   dele o parágrafo e os botões encostam na margem direita, equilibrando o peso
   do título do outro lado; abaixo, com as colunas uma sobre a outra, tudo volta
   para a esquerda — texto alinhado à direita numa coluna estreita de celular é
   desconfortável de ler.
   ========================================================================== */
@media (min-width: 782px) {
  .heroi-lado { text-align: right; }
  .heroi-lado .lead { max-width: 30rem; margin-left: auto; }
  .heroi-lado .wp-block-buttons { justify-content: flex-end; }
}

/* ============================================================================
   PEÇAS SOLTAS DOS PATTERNS
   ----------------------------------------------------------------------------
   Cada uma nasceu dentro de uma seção e é usada por uma só. Ficam juntas aqui
   por serem pequenas demais para um bloco próprio.
   ========================================================================== */
/* --- Selo positivo --------------------------------------------------------
   A identidade fechada do balanço ("Ativo = Passivo + PL") é uma AFIRMAÇÃO de
   conferência, não um enfeite: precisa da cor de valor positivo, que vive fora
   da paleta institucional justamente para falar de dados. */
.is-style-badge-positive,
.badge-positive {
  color: var(--positive);
  border-color: rgb(var(--positive-rgb) / 0.35);
  background: rgb(var(--positive-rgb) / 0.10);
}

/* --- Lista com visto ------------------------------------------------------
   Os três atributos do Modelador. O visto no acento cria a leitura de
   conferência — cada linha é algo que a ferramenta JÁ faz, não uma promessa. */
.lista-checada {
  list-style: none;
  margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.lista-checada > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.lista-checada .ico { color: var(--accent); margin-top: 0.12em; }
.lista-checada strong { color: var(--text-strong); font-weight: 600; }

/* --- Topo do cartão de etapa ---------------------------------------------
   Selo à esquerda, ícone à direita, como no design system. O ícone fica em
   `--text-subtle` de propósito: ele dá peso visual ao cartão sem competir com o
   selo de acento, que é quem carrega o número da etapa. */
.etapa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.etapa-topo .ico { color: var(--text-subtle); }
.etapa-topo .ico-lg { width: 1.45rem; height: 1.45rem; }

/* ============================================================================
   COMPATIBILIDADE COM O TEMA ANTIGO (Kadence)
   ----------------------------------------------------------------------------
   Artigos escritos sob o Kadence carregam classes como
   `has-theme-palette-7-color`, que apontam para variáveis daquele tema. Sem ele
   instalado a variável não existe e a cor CAI PARA PRETO — invisível no tema
   escuro. Aconteceu de verdade: no artigo "O que é Lucro de um jeito simples",
   um "R$ 56.000" sumia por completo.

   O de-para abaixo traduz a paleta do Kadence para os tokens da Inriqueza:
     1–2  azuis de acento   → --accent
     3–6  tons de texto     → --text-strong … --text-subtle
     7–9  quase-brancos     → --text  (usados como TEXTO seriam ilegíveis; como
                               FUNDO viram a superfície rebaixada)

   É uma PONTE, não um destino: o certo é limpar essas classes do conteúdo. Vale
   manter enquanto houver artigo antigo publicado — sai sem deixar rastro no dia
   em que não houver mais nenhum.
   ========================================================================== */
.has-theme-palette-1-color, .has-theme-palette-2-color { color: var(--accent) !important; }
.has-theme-palette-3-color { color: var(--text-strong) !important; }
.has-theme-palette-4-color, .has-theme-palette-5-color { color: var(--text) !important; }
.has-theme-palette-6-color { color: var(--text-muted) !important; }
.has-theme-palette-7-color,
.has-theme-palette-8-color,
.has-theme-palette-9-color { color: var(--text) !important; }

.has-theme-palette-1-background-color,
.has-theme-palette-2-background-color { background-color: rgb(var(--accent-rgb) / 0.12) !important; }
.has-theme-palette-7-background-color,
.has-theme-palette-8-background-color,
.has-theme-palette-9-background-color { background-color: var(--surface-sunken) !important; }

/* --- <mark>: destaque de texto -------------------------------------------
   O editor do WordPress grava o realce como `<mark style="background-color:#XXX">`
   — cor CHAPADA e inline, que sobrevive a qualquer troca de tema. No artigo
   importado era um azul do Kadence (#2B6CB0) com o texto numa classe de paleta;
   ao traduzir a classe para o nosso `--text`, o resultado virou texto escuro
   sobre azul (2,99:1). Piorar um caso ao consertar outro é o risco de mexer só
   na cor do texto.

   A saída é trazer o realce inteiro para o sistema: fundo na lavagem do acento,
   texto na cor forte. Vale para o destaque novo e para o antigo, nos dois temas,
   e o `[style]`/`[class*=]` é o que dá especificidade para vencer o inline. */
mark,
mark[style],
mark[class*="theme-palette"],
mark[class*="has-"] {
  background-color: rgb(var(--accent-rgb) / 0.18) !important;
  color: var(--text-strong) !important;
  padding: 0.05em 0.3em;
  border-radius: var(--r-xs);
}