/* ==========================================================================
   Fonte de reserva
   A pilha do site é 'Century Gothic' primeiro. Quem tem a fonte instalada
   (Windows com Office, na maioria) usa a dela e não baixa arquivo nenhum.

   A Jost é declarada aqui, com o nome dela mesma, e não pelo theme.json.
   Motivo: o WordPress renomeia o @font-face para o primeiro nome da pilha,
   o que geraria `@font-face { font-family: "Century Gothic" }` apontando
   para o arquivo da Jost — e uma fonte remota com esse nome passaria na
   frente da Century Gothic instalada na máquina. Ninguém veria a fonte real.
   Declarando aqui, a cascata funciona como deve: Century Gothic se existir,
   Jost baixada só para quem não tem.
   ========================================================================== */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Jost";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Codemix 2026 — estilos de seção
   Carregado no site E dentro do editor de blocos (add_editor_style), para que
   o que se vê ao editar seja o que sai publicado.
   Cores, fontes e espaços vêm de theme.json — aqui só ficam as composições.
   ========================================================================== */

/* --- Apelidos curtos para os tokens do theme.json ------------------------- */
:root,
.editor-styles-wrapper {
	--cx-amarelo: var(--wp--preset--color--amarelo-marca, #ffcb05);
	--cx-laranja: var(--wp--preset--color--laranja-marca, #f58220);
	--cx-ambar: var(--wp--preset--color--ambar, #f6bc03);
	--cx-ambar-escuro: var(--wp--preset--color--ambar-escuro, #f1a10b);
	--cx-laranja-texto: var(--wp--preset--color--laranja-texto, #ee9c0a);
	--cx-laranja-forte: var(--wp--preset--color--laranja-forte, #c96a0c);
	--cx-preto: var(--wp--preset--color--preto, #1f1f1f);
	--cx-carvao: var(--wp--preset--color--carvao, #2b2b2b);
	--cx-grafite: var(--wp--preset--color--grafite, #363d3f);
	--cx-ardosia: var(--wp--preset--color--ardosia, #44494c);
	--cx-cinza-050: var(--wp--preset--color--cinza-050, #f6f6f6);
	--cx-cinza-200: var(--wp--preset--color--cinza-200, #e6e6e6);
	--cx-cinza-600: var(--wp--preset--color--cinza-600, #808080);
	--cx-perigo: var(--wp--preset--color--perigo, #c0392b);
	--cx-claro: var(--wp--preset--color--texto-claro, #fefefe);
	--cx-claro-suave: var(--wp--preset--color--texto-claro-suave, #bbbcbe);
	--cx-mono-suave: #8f9498;

	--cx-borda-sutil: #dcdcdc;
	--cx-borda-forte: #bfbfbf;
	--cx-borda-escura: rgba(255, 255, 255, 0.14);

	/* Uma família só no site: Century Gothic.
	   `--cx-display` continua existindo como papel (título grande), mas aponta
	   para a mesma pilha do texto — não há mais uma segunda fonte. */
	--cx-pilha: 'Century Gothic', 'URW Gothic', Jost, 'Questrial', 'Trebuchet MS', sans-serif;
	--cx-display: var(--wp--preset--font-family--sans, var(--cx-pilha));
	--cx-sans: var(--wp--preset--font-family--sans, var(--cx-pilha));
	--cx-mono: var(--wp--preset--font-family--mono, monospace);

	--cx-raio: 6px;
	--cx-raio-sm: 4px;
	--cx-sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--cx-borda-sutil);
	--cx-transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Base ---------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* As faixas do site se encostam, sempre.
   O WordPress dá 24px de respiro a todo bloco irmão, por duas regras:
   `:where(.wp-site-blocks) > *` no primeiro nível e
   `:where(.is-layout-flow) > *` dentro do conteúdo. Juntas, abriam listras
   do fundo cinza entre o cabeçalho e o conteúdo, entre cada uma das nove
   seções da home e antes do rodapé.

   O respiro é zerado só nas faixas e no primeiro nível — nunca no fluxo
   inteiro, senão os parágrafos do artigo e o conteúdo dos cartões, que
   dependem desse mesmo blockGap, colariam também. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
div.wp-block-button a {
      background-color:#ffcb05;
      color: #333;
}

.cx-hero,
.cx-faixa-clara,
.cx-faixa-escura,
.cx-faixa-chrome,
.cx-faixa-marca,
.cx-barra-destaque {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cx-kicker {
	font-family: var(--cx-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cx-laranja-texto);
}

.cx-kicker.has-text-color {
	color: inherit;
}

.cx-mono {
	font-family: var(--cx-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cx-mono-suave);
}

/* Texto de apoio sobre fundo escuro */
.cx-sobre-escuro,
.cx-sobre-escuro p:not(.cx-kicker),
.cx-sobre-escuro li {
	color: var(--cx-claro-suave);
}

.cx-sobre-escuro h1,
.cx-sobre-escuro h2,
.cx-sobre-escuro h3,
.cx-sobre-escuro h4,
.cx-sobre-escuro strong {
	color: var(--cx-claro);
}

/* --- Cabeçalho ----------------------------------------------------------- */
.cx-header {
	background: linear-gradient(180deg, #404447 0%, #44494c 55%, #4a4f52 100%);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.cx-header a {
	text-decoration: none;
}

.cx-marca img,
.cx-marca .wp-block-site-logo img {
	height: 38px;
	width: auto;
	display: block;
}

.cx-header-legenda {
	font-family: var(--cx-sans);
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--cx-claro-suave);
}

/* Navegação em abas — o visual de "pasta" do design */
.cx-nav {
	background: linear-gradient(180deg, #3a3f42 0%, #2f3436 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cx-nav .wp-block-navigation {
	gap: 0;
	align-items: flex-end;
}

.cx-nav .wp-block-navigation-item {
	margin: 0;
}

.cx-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 20px;
	font-family: var(--cx-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	/* Menu com apenas a inicial maiúscula. O rótulo sai exatamente como for
	   digitado no menu (Aparência → Editor → Navegação), sem transformação —
	   assim um item de duas palavras como "Sobre nós" não vira "Sobre Nós",
	   que estaria errado em português. */
	text-transform: none;
	letter-spacing: 0.01em;
	color: #d7d8da;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	border-top-left-radius: var(--cx-raio-sm);
	border-top-right-radius: var(--cx-raio-sm);
	text-decoration: none;
	transition: background var(--cx-transicao), color var(--cx-transicao);
}

.cx-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

/* Aba ativa: WordPress marca a página atual com estas classes */
.cx-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.cx-nav .wp-block-navigation .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.cx-nav .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.cx-nav .wp-block-navigation .current-post-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	height: 38px;
	color: var(--cx-carvao);
	background: linear-gradient(180deg, #f6bf04 0%, #f1a10b 62%, #e08c07 100%);
	border-right: none;
}

/* --- Barra de destaque --------------------------------------------------- */
.cx-barra-destaque {
	background: linear-gradient(180deg, #f6bf04 0%, #f1a10b 62%, #e08c07 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
	color: var(--cx-carvao);
	font-family: var(--cx-sans);
	font-size: 13.5px;
	line-height: 1;
	/* A barra de baixo fica toda em minúscula — o contraponto ao menu em caixa
	   alta logo acima. `lowercase` força isso mesmo que o texto seja digitado
	   em maiúsculas no editor. */
	text-transform: lowercase;
	letter-spacing: 0.01em;
}

.cx-barra-destaque p {
	margin: 0;
	line-height: 1;
}

.cx-barra-destaque .cx-barra-contato {
	color: rgba(43, 43, 43, 0.55);
}

/* --- Faixas de seção ----------------------------------------------------- */
.cx-faixa-clara {
	background: linear-gradient(180deg, #c9c9c9 0%, #e6e6e6 34%, #e6e6e6 100%);
}

.cx-faixa-escura {
	background: var(--cx-preto);
}

.cx-faixa-chrome {
	background: var(--cx-ardosia);
}

.cx-faixa-marca {
	background: linear-gradient(180deg, var(--cx-amarelo) 0%, var(--cx-laranja) 100%);
}

/* --- Hero ---------------------------------------------------------------- */
.cx-hero {
	position: relative;
	overflow: hidden;
}

.cx-hero::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -40px;
	width: 460px;
	height: 360px;
	background: url("../img/mark-codemix.svg") no-repeat center / contain;
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
}

.cx-hero > * {
	position: relative;
	z-index: 1;
}

.cx-hero h1 {
	text-wrap: balance;
}

.cx-hero-lead {
	max-width: 44ch;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--cx-claro-suave);
	text-wrap: pretty;
}

.cx-stack-tec {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding-top: 20px;
	border-top: 1px solid var(--cx-borda-escura);
	font-family: var(--cx-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cx-mono-suave);
}

.cx-stack-tec span:nth-child(even) {
	color: var(--cx-laranja-forte);
}

/* Painel "ao vivo" do hero */
.cx-painel {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--cx-borda-escura);
	border-left-color: rgba(255, 255, 255, 0.18);
	border-radius: var(--cx-raio);
	padding: 24px;
}

.cx-painel-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cx-borda-escura);
	font-family: var(--cx-sans);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cx-claro);
}

.cx-painel-topo .cx-ao-vivo {
	font-family: var(--cx-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cx-ambar);
}

.cx-log {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 20px;
	font-family: var(--cx-mono);
	font-size: 13.5px;
	line-height: 1.4;
	color: #d8dadc;
}

.cx-log-linha {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.cx-log-linha em {
	font-style: normal;
	color: var(--cx-mono-suave);
}

.cx-log-linha b {
	font-weight: 400;
}

.cx-log-ok {
	color: var(--wp--preset--color--sucesso, #5c9c2f);
}

.cx-log-alerta {
	color: var(--cx-laranja-texto);
}

.cx-log-info {
	color: var(--cx-ambar);
}

.cx-metricas-painel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--cx-borda-escura);
}

.cx-metrica-num {
	font-family: var(--cx-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: var(--cx-ambar);
}

.cx-metrica-legenda {
	margin-top: 4px;
	font-family: var(--cx-sans);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--cx-claro-suave);
}

.cx-nota {
	margin: 16px 0 0;
	font-family: var(--cx-sans);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--cx-mono-suave);
}

/* --- Faixa de números ---------------------------------------------------- */
.cx-numeros {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cx-numero-valor {
	font-family: var(--cx-display);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 700;
	line-height: 1;
	color: var(--cx-claro);
}

.cx-numero-legenda {
	margin-top: 6px;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--cx-claro-suave);
}

/* --- Cartões ------------------------------------------------------------- */
.cx-cartao {
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-radius: var(--cx-raio);
	box-shadow: var(--cx-sombra-cartao);
	padding: 24px;
	height: 100%;
}

.cx-cartao-numerado {
	border-top: 3px solid var(--cx-ambar-escuro);
}

.cx-cartao-num {
	font-family: var(--cx-mono);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	color: var(--cx-laranja-forte);
}

.cx-cartao h3 {
	margin: 12px 0;
	font-size: 20px;
	line-height: 1.25;
}

.cx-cartao p:last-child {
	margin-bottom: 0;
}

/* Cartão sobre fundo escuro */
.cx-cartao-escuro {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--cx-borda-escura);
	border-radius: var(--cx-raio);
	padding: 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cx-cartao-escuro h3 {
	margin: 0;
	font-size: 26px;
	font-weight: 300;
	line-height: 1.15;
	color: var(--cx-claro);
}

.cx-cartao-escuro h3 strong {
	font-weight: 500;
}

.cx-cartao-escuro p {
	margin: 0;
	font-weight: 300;
	line-height: 1.65;
	color: var(--cx-claro-suave);
}

/* Lista com marcador âmbar */
.cx-lista-marca {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.cx-lista-marca li {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cx-claro-suave);
}

.cx-lista-marca li::before {
	content: "•";
	color: var(--cx-ambar);
	font-size: 16px;
	line-height: 1.35;
	text-align: center;
}

.cx-lista-marca.cx-lista-clara li {
	color: var(--cx-grafite);
}

/* --- Etiquetas de integração --------------------------------------------- */
.cx-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cx-etiquetas li,
.cx-etiquetas span {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--cx-borda-forte);
	border-radius: var(--cx-raio-sm);
	font-size: 13.5px;
	line-height: 1;
	color: var(--cx-grafite);
}

/* --- Níveis de autonomia ------------------------------------------------- */
.cx-niveis {
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-radius: var(--cx-raio);
	box-shadow: var(--cx-sombra-cartao);
	overflow: hidden;
}

.cx-niveis-topo {
	padding: 16px 24px 12px;
	background: linear-gradient(180deg, #f2f2f2 0%, #fbfbfb 100%);
	border-bottom: 1px solid var(--cx-borda-sutil);
}

.cx-niveis-topo h3 {
	margin: 0;
	font-size: 26px;
	font-weight: 300;
	line-height: 1.1;
}

.cx-niveis-topo h3 strong {
	font-weight: 500;
}

.cx-niveis-topo p {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--cx-cinza-600);
}

.cx-nivel {
	display: flex;
	gap: 20px;
	padding: 24px;
	border-bottom: 1px solid var(--cx-borda-sutil);
}

.cx-nivel:last-child {
	border-bottom: none;
}

.cx-nivel-selo {
	flex: 0 0 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cx-raio-sm);
	background: linear-gradient(180deg, var(--cx-amarelo) 0%, var(--cx-laranja) 100%);
	font-family: var(--cx-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--cx-carvao);
}

.cx-nivel h4 {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
}

.cx-nivel p {
	margin: 6px 0 0;
	line-height: 1.5;
}

/* --- Passos (como trabalhamos) ------------------------------------------- */
.cx-passo {
	padding-top: 20px;
	border-top: 3px solid var(--cx-ambar-escuro);
}

.cx-passo-num {
	font-family: var(--cx-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.22);
}

.cx-passo h3 {
	margin: 12px 0 8px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--cx-claro);
}

.cx-passo p {
	margin: 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--cx-claro-suave);
}

/* --- Produtos próprios --------------------------------------------------- */
.cx-produto {
	border-radius: var(--cx-raio);
	padding: 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cx-produto-escuro {
	background: var(--cx-carvao);
}

.cx-produto-claro {
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	box-shadow: var(--cx-sombra-cartao);
}

.cx-produto img {
	height: 52px;
	width: auto;
	align-self: flex-start;
}

.cx-produto p {
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
	text-wrap: pretty;
}

.cx-produto-escuro p {
	color: var(--cx-claro-suave);
}

.cx-produto-claro p {
	color: var(--cx-grafite);
}

/* --- Objeções ------------------------------------------------------------ */
.cx-objecao {
	border-left: 2px solid var(--cx-ambar-escuro);
	padding-left: 20px;
}

.cx-objecao h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--cx-claro);
}

.cx-objecao p {
	margin: 0;
	font-weight: 300;
	line-height: 1.65;
	color: var(--cx-claro-suave);
}

/* --- Chamada final ------------------------------------------------------- */
.cx-chamada h2 {
	margin: 0;
	font-family: var(--cx-display);
	font-size: clamp(24px, 3.4vw, 30px);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--cx-carvao);
}

.cx-chamada p {
	max-width: 56ch;
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(43, 43, 43, 0.78);
}

.cx-chamada .cx-kicker {
	color: rgba(43, 43, 43, 0.6);
}

/* Botão escuro para usar sobre a faixa amarela */
.cx-botao-escuro .wp-block-button__link,
.wp-block-button.cx-botao-escuro > .wp-block-button__link {
	background: linear-gradient(180deg, #4b5054 0%, #363d3f 100%);
	border-color: #2b2b2b;
	color: var(--cx-claro);
}

.cx-botao-escuro .wp-block-button__link:hover {
	background: linear-gradient(180deg, #565b60 0%, #414749 100%);
	color: #fff;
}

/* Botão secundário claro */
.cx-botao-claro .wp-block-button__link,
.wp-block-button.cx-botao-claro > .wp-block-button__link {
	background: linear-gradient(180deg, #fdfdfd 0%, #e9e9e9 100%);
	border-color: var(--cx-borda-forte);
	color: var(--cx-grafite);
	text-shadow: none;
}

.cx-botao-claro .wp-block-button__link:hover {
	background: linear-gradient(180deg, #fff 0%, #f1f1f1 100%);
	color: var(--cx-preto);
}

/* Seta ▸ dos botões do design */
.wp-block-button__link.cx-seta::after,
.cx-com-seta .wp-block-button__link::after {
	content: "▸";
	display: inline-block;
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px solid rgba(0, 0, 0, 0.22);
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28);
	font-size: 11px;
	line-height: 1;
	vertical-align: middle;
}

/* --- Blog: índice -------------------------------------------------------- */
.cx-destaque {
	background: var(--cx-carvao);
	border-radius: var(--cx-raio);
	padding: 32px 32px 40px;
}

.cx-destaque h2,
.cx-destaque .wp-block-post-title {
	margin: 0;
	font-family: var(--cx-display);
	font-size: clamp(24px, 3.4vw, 30px);
	font-weight: 700;
	line-height: 1.06;
	text-transform: uppercase;
	color: var(--cx-claro);
	text-wrap: balance;
}

.cx-destaque .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.cx-destaque .wp-block-post-title a:hover {
	color: var(--cx-ambar);
}

.cx-destaque .wp-block-post-excerpt__excerpt {
	max-width: 60ch;
	margin-top: 20px;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--cx-claro-suave);
	text-wrap: pretty;
}

.cx-post-cartao {
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-radius: var(--cx-raio);
	box-shadow: var(--cx-sombra-cartao);
	padding: 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cx-post-cartao .wp-block-post-terms {
	font-family: var(--cx-display);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cx-laranja-texto);
}

.cx-post-cartao .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.cx-post-cartao .wp-block-post-title {
	margin: 0;
	font-family: var(--cx-sans);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
	color: var(--cx-grafite);
	text-wrap: pretty;
}

.cx-post-cartao .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.cx-post-cartao .wp-block-post-title a:hover {
	color: var(--cx-laranja-forte);
}

.cx-post-cartao .wp-block-post-excerpt {
	flex: 1;
}

.cx-post-cartao .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: 1.6;
	text-wrap: pretty;
}

.cx-post-cartao .wp-block-post-excerpt__more-text {
	display: none;
}

.cx-post-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cx-borda-sutil);
	font-size: 12px;
	color: var(--cx-cinza-600);
}

.cx-link-seta a,
a.cx-link-seta {
	font-size: 17px;
	color: var(--cx-laranja-texto);
	text-decoration: none;
}

.cx-link-seta a::after,
a.cx-link-seta::after {
	content: " »";
	font-size: 0.9em;
}

/* Barra lateral do blog */
.cx-aside-bloco {
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-radius: var(--cx-raio);
	box-shadow: var(--cx-sombra-cartao);
	overflow: hidden;
}

.cx-aside-titulo {
	margin: 0;
	padding: 16px 20px 12px;
	background: linear-gradient(180deg, #f2f2f2 0%, #fbfbfb 100%);
	border-bottom: 1px solid var(--cx-borda-sutil);
	font-family: var(--cx-sans);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--cx-grafite);
}

.cx-aside-lista {
	padding: 16px 20px;
}

.cx-aside-lista ul,
.cx-aside-lista ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cx-aside-lista li {
	line-height: 1.4;
}

.cx-aside-lista a {
	color: var(--cx-laranja-texto);
	text-decoration: none;
}

.cx-aside-lista a:hover {
	color: var(--cx-laranja-forte);
	text-decoration: underline;
}

/* A contagem de posts que o WordPress gera em wp_list_categories */
.cx-aside-lista .post-count,
.cx-aside-lista li > span:last-child {
	color: var(--cx-cinza-600);
}

.cx-aside-cta {
	background: var(--cx-carvao);
	border-radius: var(--cx-raio);
	padding: 24px;
}

.cx-aside-cta h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--cx-claro);
}

.cx-aside-cta h3 strong {
	font-weight: 500;
}

.cx-aside-cta p {
	margin: 12px 0 20px;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--cx-claro-suave);
}

/* --- Post: cabeçalho e corpo --------------------------------------------- */
.cx-post-header .wp-block-post-title {
	font-size: clamp(29px, 4.6vw, 40px);
	color: var(--cx-claro);
	text-wrap: balance;
}

.cx-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13.5px;
	color: var(--cx-mono-suave);
}

.cx-post-meta a {
	color: inherit;
	text-decoration: none;
}

.cx-post-meta a:hover {
	color: var(--cx-ambar);
}

.cx-voltar {
	font-size: 13.5px;
	color: var(--cx-ambar);
	text-decoration: none;
}

.cx-voltar:hover {
	color: #fff;
	text-decoration: underline;
}

/* A folha branca onde o artigo é lido.
   Tudo aqui é estilo de elemento: quem escreve insere um bloco Parágrafo,
   Título ou Citação comum e já sai formatado. */
.cx-folha {
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-radius: var(--cx-raio);
	box-shadow: var(--cx-sombra-cartao);
	padding: clamp(24px, 5vw, 56px) clamp(20px, 4vw, 40px);
}

.cx-conteudo > p,
.cx-conteudo > ul,
.cx-conteudo > ol {
	font-size: 17px;
	line-height: 1.7;
	color: var(--cx-grafite);
	text-wrap: pretty;
}

/* Ritmo dos títulos dentro do artigo.
   Precisa vencer a regra de blockGap do layout de fluxo do WordPress
   (.is-layout-flow > *), que é mais específica que o seletor de elemento
   gerado pelo theme.json. Sem isto, um H2 inserido no editor sai com o
   respiro de um parágrafo qualquer. */
.cx-conteudo > h2 {
	margin-top: 56px;
	margin-bottom: 24px;
}

.cx-conteudo > h3 {
	margin-top: 32px;
	margin-bottom: 12px;
}

.cx-conteudo > h2 + h3 {
	margin-top: 24px;
}

/* Primeiro parágrafo do artigo = abertura */
.cx-conteudo > p:first-child {
	font-size: 19px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cx-grafite);
}

.cx-conteudo > ol,
.cx-conteudo > ul {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cx-conteudo strong {
	font-weight: 500;
}

.cx-conteudo > h2:first-child,
.cx-conteudo > h3:first-child {
	margin-top: 0;
}

.cx-conteudo img,
.cx-conteudo .wp-block-image img {
	border-radius: var(--cx-raio-sm);
}

.cx-conteudo .wp-block-image figcaption {
	font-size: 12px;
	color: var(--cx-cinza-600);
}

/* Rodapé do artigo com a chamada de WhatsApp */
.cx-post-cta {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--cx-borda-sutil);
}

.cx-post-cta p {
	max-width: 46ch;
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--cx-grafite);
}

/* --- Rodapé -------------------------------------------------------------- */
.cx-footer {
	background: var(--cx-preto);
	border-top: 3px solid var(--cx-ambar-escuro);
}

.cx-footer img {
	height: 34px;
	width: auto;
	display: block;
}

.cx-footer-titulo {
	margin: 0 0 20px;
	font-family: var(--cx-display);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cx-ambar);
}

.cx-footer-lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--cx-claro-suave);
}

.cx-footer-lista ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cx-footer-lista a {
	color: var(--cx-claro-suave);
	text-decoration: none;
}

.cx-footer-lista a:hover {
	color: var(--cx-ambar);
}

.cx-footer-sobre {
	max-width: 40ch;
	margin: 20px 0 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--cx-claro-suave);
}

.cx-footer-base {
	border-top: 1px solid var(--cx-borda-escura);
}

.cx-footer-base p {
	margin: 0;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.4;
	color: #7f8386;
}

/* --- Paginação, busca e 404 ---------------------------------------------- */
.wp-block-query-pagination {
	font-family: var(--cx-sans);
	font-size: 13.5px;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid var(--cx-borda-forte);
	border-radius: var(--cx-raio-sm);
	color: var(--cx-grafite);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: linear-gradient(180deg, #f6bf04 0%, #f1a10b 62%, #e08c07 100%);
	border-color: var(--cx-laranja-forte);
	color: var(--cx-carvao);
	font-weight: 500;
}

.wp-block-search__button {
	border-radius: var(--cx-raio-sm);
}

.wp-block-search__input {
	border: 1px solid var(--cx-borda-forte);
	border-radius: var(--cx-raio-sm);
	padding: 8px 12px;
	font-family: var(--cx-sans);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* --- Responsivo ---------------------------------------------------------- */
@media (max-width: 900px) {
	.cx-hero::before {
		width: 300px;
		height: 240px;
		right: -80px;
	}

	.cx-metricas-painel {
		grid-template-columns: 1fr;
	}

	.cx-header-legenda-desktop {
		display: none;
	}

	.cx-nav .wp-block-navigation {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.cx-nav .wp-block-navigation::-webkit-scrollbar {
		display: none;
	}

	.cx-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

@media (max-width: 600px) {
	.cx-barra-destaque {
		font-size: 12px;
	}

	.cx-barra-destaque .cx-barra-contato {
		display: none;
	}

	.cx-nivel {
		gap: 12px;
		padding: 20px 16px;
	}

	.cx-produto,
	.cx-destaque {
		padding: 24px 20px;
	}
}

/* --- Editor -------------------------------------------------------------- */
/* Dentro do editor não há a folha branca do template de post, então damos
   ao conteúdo o mesmo respiro que ele terá publicado. */
.editor-styles-wrapper .cx-hero::before {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Ajuste para composição em blocos
   As seções da home são blocos Gutenberg de verdade (Grupo, Título,
   Parágrafo, Lista), para que a manutenção seja feita em campo de texto e
   não em HTML. O respiro interno vem do blockGap de cada grupo, então os
   elementos não trazem margem própria — senão as duas somariam.
   ========================================================================== */

.cx-passo > *,
.cx-objecao > *,
.cx-nivel h4,
.cx-nivel p,
.cx-niveis-topo > *,
.cx-numero-valor,
.cx-numero-legenda,
.cx-passo-num {
	margin-top: 0;
	margin-bottom: 0;
}

/* O selo numerado do nível é um parágrafo dentro de um grupo flex. */
p.cx-nivel-selo {
	flex: 0 0 44px;
	margin: 0;
}

.cx-nivel > .wp-block-group {
	flex: 1 1 auto;
}

/* A lista de bullets da marca é um core/list. */
ul.cx-lista-marca {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* O "ler o artigo" do destaque é um core/read-more, para que aponte sempre
   para o permalink do post em destaque. Aqui ele recebe o visual de botão. */
.cx-botao-destaque,
a.cx-botao-destaque {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	background: linear-gradient(180deg, var(--cx-amarelo) 0%, var(--cx-laranja) 100%);
	border: 1px solid var(--cx-laranja-forte);
	border-radius: var(--cx-raio-sm);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.28);
	font-family: var(--cx-sans);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
	transition: var(--cx-transicao);
}

a.cx-botao-destaque:hover {
	background: linear-gradient(180deg, #ffd42e 0%, #f78c33 100%);
	color: #fff;
	text-decoration: none;
}

a.cx-botao-destaque::after {
	content: "▸";
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px solid rgba(0, 0, 0, 0.22);
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28);
	font-size: 11px;
}

/* ==========================================================================
   Contraste — WCAG 2.1 AA
   Auditoria feita sobre a página renderizada, medindo cada texto contra o
   fundo real (inclusive o ponto mais escuro de cada gradiente, que é o pior
   caso). Estes ajustes vieram dos pares que reprovavam. O matiz da marca foi
   mantido onde deu; onde não deu, a cor escureceu dentro da mesma família.
   Alvo: 4.5:1 para texto normal, 3:1 para texto grande.
   ========================================================================== */

/* Kicker sobre faixa clara: o laranja #ee9c0a dava 1.35:1, ilegível.
   O rust #7d4103 é a versão mais clara da mesma família que passa (4.82:1). */
.cx-kicker {
	color: #7d4103;
}

/* Sobre fundo escuro o âmbar tem folga e mantém o brilho da marca. */
.cx-sobre-escuro .cx-kicker,
.cx-faixa-escura .cx-kicker,
.cx-faixa-chrome .cx-kicker {
	color: var(--cx-ambar);
}

/* Faixa amarela da chamada final: texto preto, não translúcido. */
.cx-chamada .cx-kicker,
.cx-faixa-marca .cx-kicker {
	color: var(--cx-carvao);
}

.cx-chamada p {
	color: var(--cx-carvao);
}

/* Barra de destaque: o contato translúcido dava 2.45:1. */
.cx-barra-destaque .cx-barra-contato {
	color: var(--cx-carvao);
	opacity: 0.85;
}

/* Numeração do cartão sobre branco: 3.78:1 -> 4.56:1. */
.cx-cartao-num {
	color: #b55f0b;
}

/* Separadores "·" da régua de tecnologia. Sobre escuro o laranja forte some;
   sobre branco ele precisa escurecer. */
.cx-stack-tec span:nth-child(even) {
	color: #d17f2e;
}

.cx-produto-claro .cx-stack-tec span:nth-child(even) {
	color: #b55f0b;
}

/* Texto de apoio do rodapé: 4.31:1 -> 4.53:1. */
.cx-footer-base p {
	color: #83878a;
}

/* Link de pular para o conteúdo: fica escondido até receber foco pelo teclado,
   e é aí que precisa ser legível. O core do WordPress já entrega #444 sobre
   #eee (7,6:1, aprovado), mas essa regra dele é injetada inline no HTML, ou
   seja, depois desta folha. Por isso o seletor começa em `body`: sem isso a
   especificidade empata e o core vence, deixando o foco fora da marca. */
body .skip-link.screen-reader-text:focus,
body .skip-link.screen-reader-text:focus-visible {
	background-color: var(--cx-preto);
	color: #ffffff;
	padding: 12px 20px;
	border-radius: var(--cx-raio-sm);
	font-family: var(--cx-sans);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	outline: 2px solid var(--cx-ambar);
	outline-offset: 2px;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* ==========================================================================
   Cartão da Duplo D
   A Duplo D deixou de ser mais um produto na prateleira: é a marca-irmã que
   responde por UI/UX, frontend e marketing. O cartão ganha tratamento próprio
   — fundo escuro com a faixa do gradiente da Duplo D no topo — para ler como
   "outra casa", e não como mais um item da lista da Codemix.
   ========================================================================== */
.cx-produto-marca {
	position: relative;
	background: linear-gradient(160deg, #2f2436 0%, #2b2b2b 55%, #2b2b2b 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--cx-raio);
	overflow: hidden;
}

/* A faixa é o gradiente da própria Duplo D, vermelho para roxo. */
.cx-produto-marca::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, #d4525a 0%, #9057ad 100%);
}

.cx-produto-marca p {
	color: var(--cx-claro-suave);
}

.cx-produto-marca .cx-stack-tec-claro {
	color: #a9b4bb;
}

.cx-produto-marca .cx-stack-tec-claro span:nth-child(even) {
	color: #c98bdd;
}

/* A régua de tecnologia da VetBots passou para o cartão branco junto com o
   cartão. O cinza dela era calibrado para fundo escuro e caía para 3,06:1
   sobre branco — aqui volta ao cinza de apoio acessível. */
.cx-produto-claro .cx-stack-tec {
	color: #545454;
}

/* ==========================================================================
   Componentes de artigo longo
   Tudo aqui existe para um motivo só: um artigo de 3.000 palavras precisa de
   pontos de parada. Resumo no topo, índice, caixas de destaque, tabela
   comparável e passos numerados. Cada componente é feito de blocos reais
   (Grupo, Parágrafo, Lista, Tabela) com uma classe `cx-*`, nunca de HTML
   solto: quem escreve continua editando texto em campo de texto.

   Atenção ao seletor. As regras de corpo do artigo são de filho direto
   (`.cx-conteudo > p`). Assim que um parágrafo entra dentro de um Grupo, ele
   deixa de ser filho direto e perde tipografia. Por isso cada caixa aqui
   redeclara tamanho, entrelinha e cor do texto que vive dentro dela.
   ========================================================================== */

/* --- Base das caixas ----------------------------------------------------- */
.cx-conteudo .cx-caixa {
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 24px 28px;
	border-radius: var(--cx-raio);
	background: var(--cx-cinza-050);
	border: 1px solid var(--cx-borda-sutil);
}

/* Vence o blockGap do layout de fluxo do WordPress, que abre 24px entre
   irmãos e deixaria a caixa com um miolo frouxo. */
.cx-conteudo .cx-caixa > * + * {
	margin-top: 12px;
}

.cx-conteudo .cx-caixa > *:first-child {
	margin-top: 0;
}

.cx-conteudo .cx-caixa > *:last-child {
	margin-bottom: 0;
}

.cx-conteudo .cx-caixa p,
.cx-conteudo .cx-caixa li {
	font-size: 16px;
	line-height: 1.65;
	color: var(--cx-grafite);
	text-wrap: pretty;
}

.cx-conteudo .cx-caixa strong {
	font-weight: 500;
}

/* Rótulo da caixa. Fica em grafite, não em âmbar: âmbar sobre branco não
   passa nos 4,5:1 de contraste para texto pequeno. O âmbar entra como
   quadrado marcador, e a palavra do rótulo diz o que a cor diria. */
.cx-conteudo .cx-caixa-rotulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--cx-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cx-grafite);
}

.cx-conteudo .cx-caixa-rotulo::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	background: var(--cx-ambar-escuro);
	border-radius: 2px;
}

/* --- Resumo do topo ------------------------------------------------------
   A caixa mais importante da página: é o que um leitor apressado lê e é o
   trecho que um assistente de IA tende a extrair como resposta. Por isso ela
   é escura, fica logo depois da abertura e responde a pergunta do título em
   frases inteiras, sem depender do resto do texto. */
.cx-conteudo .cx-resumo {
	background: var(--cx-carvao);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: 3px solid var(--cx-ambar-escuro);
	padding: 28px 32px;
}

.cx-conteudo .cx-resumo p,
.cx-conteudo .cx-resumo li {
	color: var(--cx-claro-suave);
}

.cx-conteudo .cx-resumo strong {
	color: #fff;
	font-weight: 500;
}

.cx-conteudo .cx-resumo .cx-caixa-rotulo {
	color: var(--cx-ambar);
}

.cx-conteudo .cx-resumo code {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* --- Índice --------------------------------------------------------------
   Duas colunas no desktop, uma no celular. Links de âncora comuns, para que
   funcionem sem JavaScript e para que o navegador cuide do foco sozinho. */
.cx-conteudo .cx-indice {
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-left: 3px solid var(--cx-borda-forte);
}

.cx-conteudo .cx-indice ol,
.cx-conteudo .cx-indice ul {
	margin: 0;
	padding-left: 20px;
	columns: 2;
	column-gap: 32px;
}

.cx-conteudo .cx-indice li {
	break-inside: avoid;
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.5;
}

.cx-conteudo .cx-indice a {
	color: var(--cx-grafite);
	text-decoration: none;
	border-bottom: 1px solid var(--cx-borda-sutil);
	transition: border-color var(--cx-transicao), color var(--cx-transicao);
}

.cx-conteudo .cx-indice a:hover,
.cx-conteudo .cx-indice a:focus-visible {
	color: var(--cx-preto);
	border-bottom-color: var(--cx-ambar-escuro);
}

@media (max-width: 640px) {
	.cx-conteudo .cx-indice ol,
	.cx-conteudo .cx-indice ul {
		columns: 1;
	}
}

/* --- Caixa de destaque ---------------------------------------------------- */
.cx-conteudo .cx-destaque {
	background: #fffdf5;
	border: 1px solid #f0e2b8;
	border-left: 3px solid var(--cx-ambar-escuro);
}

/* --- Caixa de alerta ------------------------------------------------------
   Erro comum, armadilha, coisa que quebra em produção. Vermelho na régua e
   no rótulo; o texto continua em grafite para não perder contraste. */
.cx-conteudo .cx-aviso {
	background: #fdf6f5;
	border: 1px solid #eccdc9;
	border-left: 3px solid var(--cx-perigo, #c0392b);
}

.cx-conteudo .cx-aviso .cx-caixa-rotulo {
	color: #a5312a;
}

.cx-conteudo .cx-aviso .cx-caixa-rotulo::before {
	background: var(--cx-perigo, #c0392b);
}

/* --- Nota técnica --------------------------------------------------------- */
.cx-conteudo .cx-nota-tec {
	background: var(--cx-cinza-050);
	border-left: 3px solid var(--cx-ardosia);
}

.cx-conteudo .cx-nota-tec .cx-caixa-rotulo::before {
	background: var(--cx-ardosia);
}

/* --- Placar de números ---------------------------------------------------
   Uma faixa de duas a quatro medidas. O número é monoespaçado e tabular, que
   é o que faz a linha parecer instrumento e não anúncio. */
.cx-conteudo .cx-placar {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 40px;
	margin-bottom: 40px;
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-top: 3px solid var(--cx-ambar-escuro);
	border-radius: var(--cx-raio);
	overflow: hidden;
}

.cx-conteudo .cx-placar > .wp-block-column {
	flex: 1 1 180px;
	padding: 20px 24px;
	border-left: 1px solid var(--cx-borda-sutil);
}

.cx-conteudo .cx-placar > .wp-block-column:first-child {
	border-left: 0;
}

.cx-conteudo .cx-placar p {
	margin: 0;
}

.cx-conteudo .cx-placar-num {
	font-family: var(--cx-mono);
	font-variant-numeric: tabular-nums;
	font-size: 28px;
	line-height: 1.1;
	color: var(--cx-preto);
}

.cx-conteudo .cx-placar-legenda {
	margin-top: 6px !important;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--cx-cinza-600);
}

@media (max-width: 640px) {
	.cx-conteudo .cx-placar > .wp-block-column {
		flex: 1 1 100%;
		border-left: 0;
		border-top: 1px solid var(--cx-borda-sutil);
	}

	.cx-conteudo .cx-placar > .wp-block-column:first-child {
		border-top: 0;
	}
}

/* --- Passos numerados -----------------------------------------------------
   É um bloco Lista ordenada comum com a classe `cx-passos`. Continua sendo
   lista para leitor de tela e para quem edita; só o desenho muda. */
.cx-conteudo ol.cx-passos {
	list-style: none;
	padding-left: 0;
	gap: 12px;
	counter-reset: cxpasso;
}

.cx-conteudo ol.cx-passos > li {
	counter-increment: cxpasso;
	position: relative;
	padding: 16px 20px 16px 62px;
	background: #fff;
	border: 1px solid var(--cx-borda-sutil);
	border-left: 3px solid var(--cx-ambar-escuro);
	border-radius: var(--cx-raio-sm);
	font-size: 16px;
	line-height: 1.6;
	color: var(--cx-grafite);
}

.cx-conteudo ol.cx-passos > li::before {
	content: counter(cxpasso, decimal-leading-zero);
	position: absolute;
	left: 20px;
	top: 16px;
	font-family: var(--cx-mono);
	font-variant-numeric: tabular-nums;
	font-size: 18px;
	line-height: 1.45;
	color: var(--cx-laranja-forte);
}

/* --- Tabela comparativa ---------------------------------------------------
   Rola sozinha no celular em vez de estourar a largura da página. */
.cx-conteudo .wp-block-table.cx-tabela {
	margin-top: 40px;
	margin-bottom: 40px;
	overflow-x: auto;
}

.cx-conteudo .cx-tabela table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	border: 1px solid var(--cx-borda-sutil);
	font-variant-numeric: tabular-nums;
}

.cx-conteudo .cx-tabela thead th {
	padding: 12px 16px;
	background: var(--cx-carvao);
	border: 0;
	color: var(--cx-claro);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
}

.cx-conteudo .cx-tabela td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--cx-borda-sutil);
	font-size: 15px;
	line-height: 1.55;
	color: var(--cx-grafite);
	vertical-align: top;
}

.cx-conteudo .cx-tabela tbody tr:nth-child(even) td {
	background: var(--cx-cinza-050);
}

.cx-conteudo .cx-tabela td:first-child {
	font-weight: 500;
	color: var(--cx-preto);
}

.cx-conteudo .cx-tabela figcaption {
	margin-top: 10px;
	font-size: 12px;
	color: var(--cx-cinza-600);
}

/* --- Bloco de código ------------------------------------------------------
   O core/code guarda um <code> dentro de um <pre>. Sem o reajuste abaixo, o
   <code> herda o visual da versão inline (fundo claro, borda, raio) e aparece
   como um retângulo claro dentro do painel escuro. E sem o overflow no <pre>,
   uma linha longa de SQL empurra a página inteira para o lado: a rolagem
   horizontal precisa ficar dentro do bloco, nunca no documento. */
.cx-conteudo .wp-block-code {
	max-width: 100%;
	margin-top: 40px;
	margin-bottom: 40px;
	overflow-x: auto;
}

.cx-conteudo .wp-block-code code {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font-size: 13.5px;
	white-space: pre;
	tab-size: 2;
}

/* --- Código no meio da frase ---------------------------------------------
   Número, unidade, nome de tecnologia e campo de banco. É o formato inline
   nativo do editor (Ctrl+`), então continua fácil de aplicar escrevendo. */
.cx-conteudo code {
	padding: 1px 5px;
	background: var(--cx-cinza-050);
	border: 1px solid var(--cx-borda-sutil);
	border-radius: 3px;
	font-family: var(--cx-mono);
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	color: var(--cx-preto);
}

/* --- Perguntas frequentes -------------------------------------------------
   Continuam sendo H3 e parágrafo no primeiro nível do artigo, para não perder
   a tipografia de corpo nem a leitura de estrutura por quem indexa. A classe
   entra no próprio H3. */
.cx-conteudo > h3.cx-pergunta {
	position: relative;
	padding-left: 22px;
}

.cx-conteudo > h3.cx-pergunta::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 10px;
	height: 10px;
	background: var(--cx-ambar-escuro);
	border-radius: 2px;
}

/* --- Fontes e leitura relacionada ----------------------------------------- */
.cx-conteudo .cx-fontes li {
	font-size: 14px;
	line-height: 1.55;
	color: var(--cx-cinza-600);
}

.cx-conteudo .cx-fontes a {
	color: var(--cx-grafite);
}

/* Links dentro do artigo: sublinhado discreto que fica âmbar ao passar. */
.cx-conteudo > p a,
.cx-conteudo > ul a,
.cx-conteudo > ol a,
.cx-conteudo .cx-caixa p a,
.cx-conteudo .cx-caixa li a {
	color: var(--cx-preto);
	text-decoration: underline;
	text-decoration-color: var(--cx-borda-forte);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--cx-transicao);
}

.cx-conteudo > p a:hover,
.cx-conteudo > ul a:hover,
.cx-conteudo > ol a:hover,
.cx-conteudo .cx-caixa p a:hover,
.cx-conteudo .cx-caixa li a:hover {
	text-decoration-color: var(--cx-ambar-escuro);
}

.cx-conteudo .cx-resumo a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

/* O alvo de uma âncora do índice não pode encostar no topo da janela. */
.cx-conteudo > h2[id],
.cx-conteudo > h3[id] {
	scroll-margin-top: 24px;
}