/*
Theme Name: Co.Crie
Theme URI: https://agenciacocrie.com.br
Author: Agência Co.Crie
Description: Tema block (FSE) da Agência Co.Crie. Marketing com Método.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cocrie
*/

/* Só o que o theme.json não expressa: transform, ::selection, animação, <details>.
   Tudo que for cor/fonte/spacing/sombra mora no theme.json — não duplique aqui. */

::selection {
	background: var(--wp--preset--color--brand);
	color: #fff;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px; /* compensa o header sticky */
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---- Header sticky ----
   O sticky vive no wrapper do template-part, não no grupo interno: um pai do
   tamanho exato do filho não deixa o sticky ter para onde grudar. */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* A gaveta é fixed e o header é sticky: nenhum dos dois enxerga a altura do
   outro sem JS. 77px é a altura medida (16+45+16). Se o header mudar de
   padding ou o CTA de tamanho, este número muda junto — é o único acoplamento
   e está aqui, num lugar só.
   ponytail: número medido; se um dia virar duas alturas (scrolled/topo), aí sim
   vale um ResizeObserver escrevendo a var. */
:root {
	--cc-header-h: 77px;
}

/* O blockGap raiz colava uma faixa do fundo do body entre header, main e
   rodapé — estas três são seções coladas, não blocos empilhados. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Sem backdrop-filter aqui, de propósito. Ele cria um containing block para
   descendentes position:fixed — o overlay do menu mobile parava de cobrir a
   tela e ficava preso à altura do header (72px). O blur da LP também exigia um
   alpha baixo, que sujava o bege em cima das seções navy. Fundo sólido resolve
   os dois e apaga CSS. */
.cc-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid rgba(22, 32, 58, 0.07);
}

/* ---- Botões: lift no hover (theme.json cobre cor e sombra) ---- */

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-3px);
}

/* Botão fantasma sobre o navy */
.is-style-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(237, 231, 218, 0.28);
	color: var(--wp--preset--color--text-invert);
	box-shadow: none;
}

.is-style-ghost .wp-block-button__link:hover {
	background: rgba(237, 231, 218, 0.08);
	border-color: rgba(237, 231, 218, 0.5);
	box-shadow: none;
}

/* Botão navy (sobre fundo claro) — vira laranja no hover */
.is-style-dark .wp-block-button__link {
	background: var(--wp--preset--color--navy-deep);
	box-shadow: none;
}

.is-style-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--brand);
}

/* ---- Card ---- */

.cc-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Card inteiro clicável, mas com um link de verdade no h3: o ::after cobre o
   card e leva o clique. Teclado e leitor de tela continuam vendo um só link. */
.cc-card-link {
	position: relative;
}

.cc-card-link h3 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cc-card-link h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cc-card-link:hover h3 a {
	color: var(--wp--preset--color--brand);
}

.cc-card-link:focus-within {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

.cc-card-link h3 a:focus {
	outline: none;
}

.cc-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--card-hover);
	border-color: rgba(239, 106, 55, 0.35);
}

/* Ícone do card: quadrado 46px com fill laranja translúcido */
.cc-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--wp--custom--radius--icon);
	background: rgba(239, 106, 55, 0.12);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	font-weight: 500;
	flex: none;
}

/* ---- A marca no rodapé ----
   O tamanho mora aqui, não no bloco: o `width` do wp:image chumbaria o número
   no markup, e é o CSS que sabe que abaixo de 782px o rodapé vira uma coluna
   só. O height:auto impede que o width/height do <img> (que existe para não
   dar layout shift) esmague a proporção. */

.cc-footer-marca {
	margin: 0;
}

.cc-footer-marca img {
	width: 200px;
	max-width: 100%;
	height: auto;
}

/* ---- Numeral display ---- */

.cc-numeral {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--numeral);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand);
	margin: 0;
}

.cc-numeral-sm {
	font-size: 30px;
}

/* ---- Depoimentos ---- */

.cc-stars {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: 14px;
	letter-spacing: 0.14em;
}

.cc-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	margin: 0;
	border-radius: 50%;
	background: rgba(239, 106, 55, 0.12);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 19px;
	line-height: 1;
}

.cc-author {
	padding-top: var(--wp--preset--spacing--10);
}

/* Nota de rodapé do card de caso */
.cc-note {
	margin: 0;
	padding-top: var(--wp--preset--spacing--10);
	border-top: 1px solid rgba(22, 32, 58, 0.07);
	color: #8a8170;
}

/* ---- Eyebrow (label mono uppercase) ---- */

.cc-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}


/* ---- Trust badges: check laranja antes do texto ---- */

.cc-trust p {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: #c4bdac;
}

.cc-trust p::before {
	content: "✓";
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 50%;
	background: rgba(239, 106, 55, 0.12);
	color: var(--wp--preset--color--brand);
	font-size: 10px;
	font-weight: 700;
}

/* pretty, não balance: balance reequilibra as linhas todas e acaba partindo o
   itálico de destaque no meio ("se / paga"). pretty só resolve a órfã. */
h1,
h2 {
	text-wrap: pretty;
}

/* ---- Itálico serif laranja: a assinatura da marca ---- */

.cc-accent {
	font-style: italic;
	color: var(--wp--preset--color--brand);
}

/* ---- Seções escuras: texto claro por padrão ---- */

/* Sem overflow:hidden aqui de propósito: ele criaria um scrollport e o
   animation-timeline:view() dos filhos passaria a resolver contra esta caixa
   (que não rola), desligando o reveal só nas seções escuras. O ::before é
   inset:0, então não há o que estourar mesmo. */
.cc-dark {
	position: relative;
}

/* Grid sutil de linhas no navy — decorativo, não interfere no conteúdo */
.cc-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 64px 64px;
	pointer-events: none;
}

.cc-dark > * {
	position: relative;
}

/* Lista sem marcador (navegação de rodapé) */
.cc-plain-list {
	list-style: none;
	padding-left: 0;
}

/* Links dentro do navy: claros por padrão, laranja no hover */
.cc-dark li a,
.cc-dark p a {
	color: var(--wp--preset--color--text-invert);
	transition: color 0.2s ease;
}

.cc-dark li a:hover,
.cc-dark p a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* ---- Etapas do método: linha vertical ligando as letras ---- */

.cc-step {
	padding: 24px 0;
	border-top: 1px solid rgba(237, 231, 218, 0.1);
}

.cc-step:first-child {
	border-top: 0;
}

.cc-step-letter {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	margin: 0;
	border-radius: var(--wp--custom--radius--icon);
	background: rgba(239, 106, 55, 0.12);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 21px;
	font-weight: 600;
	line-height: 1;
}

/* ---- Linha do tempo (Quem somos) ----
   Substitui os badges de ano em PNG (170x170, um arquivo por ano) por
   tipografia, e as bordas de papel rasgado por uma linha só. */

.cc-year {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding: var(--wp--preset--spacing--50) 0;
	border-top: 1px solid rgba(22, 32, 58, 0.07);
}

.cc-year:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Zigue-zague: sem isto seis linhas iguais viram uma tabela monótona. */
.cc-year:nth-child(even) .cc-year-media {
	order: -1;
}

.cc-year-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand);
}

.cc-year-media {
	margin: 0;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
}

.cc-year-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 890 / 540;
	object-fit: cover;
}

@media (max-width: 780px) {
	.cc-year {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	/* No empilhado a foto vem sempre depois do texto — o zigue-zague só faz
	   sentido quando existem duas colunas. */
	.cc-year:nth-child(even) .cc-year-media {
		order: 0;
	}
}

/* ---- Lista de entregáveis ("O que está incluso") ---- */

.cc-check {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-check li {
	position: relative;
	padding-left: 28px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.cc-check li + li {
	margin-top: 14px;
}

.cc-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 1px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(239, 106, 55, 0.12);
	color: var(--wp--preset--color--brand);
	font-size: 10px;
	font-weight: 700;
}

/* ---- Mapa ---- */

.cc-map {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	line-height: 0;
}

.cc-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	/* O embed do Maps vem colorido demais para o resto da paleta; a
	   dessaturação leve o encaixa sem escondê-lo. */
	filter: saturate(0.75) contrast(0.95);
}

@media (max-width: 780px) {
	.cc-map iframe {
		aspect-ratio: 3 / 2;
	}
}

/* No card navy de contato o link tem que ser claro, não laranja */
.cc-card-link.has-navy-background-color h2 a {
	color: var(--wp--preset--color--text-invert);
}

.cc-card-link.has-navy-background-color:hover h2 a {
	color: var(--wp--preset--color--brand-light);
}

.cc-card-link.has-navy-background-color:hover {
	border-color: rgba(239, 106, 55, 0.5);
}

/* ---- Callout (usado na política) ---- */

.cc-callout {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 24px 28px;
	border-radius: var(--wp--custom--radius--soft);
	border: 1px solid rgba(22, 32, 58, 0.07);
	background: var(--wp--preset--color--base-alt);
}

.cc-callout-brand {
	border-color: rgba(239, 106, 55, 0.35);
	background: rgba(239, 106, 55, 0.06);
}

.cc-callout p {
	margin: 0;
}

.cc-callout p + p {
	margin-top: 10px;
}

/* Ficha da controladora (razão social, CNPJ, endereço) */
.cc-ficha {
	margin: var(--wp--preset--spacing--30) 0;
	padding: 24px 28px;
	border-radius: var(--wp--custom--radius--soft);
	border: 1px solid rgba(22, 32, 58, 0.07);
	background: var(--wp--preset--color--surface);
}

.cc-ficha dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.cc-ficha dd {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.5;
}

.cc-ficha dd + dt {
	margin-top: 18px;
}

/* Página legal: texto denso pede respiro entre seções */
.cc-legal h2 {
	margin-top: 2em;
	font-size: 22px;
}

.cc-legal .cc-check {
	margin: var(--wp--preset--spacing--20) 0;
}

/* Numa política, a lista é "o que coletamos de você" — não é uma lista de
   benefícios. O check laranja dava um tom de vantagem que não cabe aqui. */
.cc-legal .cc-check li::before {
	content: "";
	top: 8px;
	width: 5px;
	height: 5px;
	background: var(--wp--preset--color--brand);
	box-shadow: none;
}

.cc-legal code {
	padding: 2px 6px;
	border-radius: 5px;
	background: rgba(22, 32, 58, 0.06);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
}

/* ---- Valores: o "Co" é a marca, não um ícone ---- */

.cc-valor {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.cc-valor span {
	color: var(--wp--preset--color--brand);
	font-style: italic;
}

/* ---- FAQ: <details> nativo, sem JS ---- */

.cc-faq details {
	border-bottom: 1px solid rgba(22, 32, 58, 0.07);
}

.cc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -0.01em;
	transition: color 0.2s ease;
}

.cc-faq summary::-webkit-details-marker { display: none; }

.cc-faq summary:hover,
.cc-faq details[open] summary { color: var(--wp--preset--color--brand); }

/* O "+" que vira "×" */
.cc-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--brand);
	transition: transform 0.25s ease;
	flex: none;
}

.cc-faq details[open] summary::after { transform: rotate(45deg); }

.cc-faq details > div {
	padding: 0 0 22px;
	max-width: var(--wp--custom--measure);
	color: var(--wp--preset--color--muted);
}

/* ---- Reveal on scroll: scroll-driven animation, zero JS ----
   ponytail: sem @supports o conteúdo simplesmente aparece — degradação segura.
   Se um dia precisar de Firefox, troque por um IntersectionObserver de 8 linhas. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.cc-reveal {
			animation: cc-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

@keyframes cc-reveal {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Impressão/PDF não rolam a página: sem isto o conteúdo sairia em branco. */
@media print {
	.cc-reveal {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* ---- Mobile ---- */

@media (max-width: 640px) {
	/* O CTA do header quebrava em duas linhas: o flex espremia o botão e o
	   texto cedia. nowrap + gap menor resolvem sem esconder o CTA. */
	.cc-header .wp-block-group {
		gap: 12px;
	}

	.cc-header .wp-block-button__link {
		padding: 10px 14px;
		font-size: 13px;
		white-space: nowrap;
	}

	.cc-trust {
		gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	}

	/* O hambúrguer é o único acesso a 5 das 6 páginas no mobile e vinha com
	   24x24: o padding leva o alvo a 44px.

	   O prefixo .cc-header não é enfeite — sem ele a margem não aplica. O WP
	   emite `.is-layout-flex > :is(*, div){margin:0}` no core-block-supports, e
	   :is(*, div) pesa (0,1,1) contra os (0,1,0) do seletor sozinho. Como
	   cascata decide propriedade a propriedade, o padding passava e a margem
	   não: o alvo crescia para 44px e empurrava o ícone 10px para dentro da
	   calha. Com .cc-header o seletor vira (0,2,0) e ganha.

	   Só na direita. A margem negativa existe para o alvo de 44px não roubar a
	   calha do conteúdo — nas outras faces ela comeria o gap de 12px do CTA
	   (sobrariam 2px) e encolheria o alvo de toque na vertical. */
	.cc-header .wp-block-navigation__responsive-container-open {
		padding: 10px;
		margin-right: -10px;
	}
}

/* ---- Menu mobile: gaveta pela direita ----

   O corte aqui é 600px, e não os 640px do bloco acima, porque 600 é onde o
   CORE esconde o hambúrguer. Entre 600 e 640 o menu ainda é a barra horizontal
   — aplicar o `order` naquela faixa jogaria a navegação inteira para depois do
   CTA numa tela que nem gaveta tem.

   ponytail: o core abre o overlay trocando display:none por display:flex e já
   dispara um `animation` de fade nessa troca. Como animation (e não transition)
   roda no instante em que o elemento passa a existir, trocar o keyframe pelo
   nosso é toda a animação — sem JS, sem @starting-style, sem allow-discrete. E
   como o cocrie-css carrega depois do wp-block-navigation-css, a mesma
   especificidade do core já basta para sobrescrever. */

@media (max-width: 599.98px) {
	/* No header.html a nav vem antes dos botões, então o CTA é que fica colado
	   na direita. O order inverte os dois só na tela pequena — sem duplicar
	   bloco no template nem esconder o CTA.

	   Esta é a ÚNICA regra da gaveta que depende da largura, porque é a única
	   que fala do header montado, não do menu aberto. */
	.cc-header .wp-block-navigation {
		order: 1;
	}
}

/* ---- A gaveta em si: governada pelo ESTADO, não pela largura ----

   Nada daqui para baixo mora em @media, e isso é o conserto de um bug real: com
   as regras presas em (max-width: 599.98px), abrir a gaveta e passar do corte
   devolvia o overlay de tela cheia do core. A classe .is-menu-open continua no
   elemento — quem sai de cena são as MINHAS regras — e o resultado era a tela
   inteira virar um bloco navy, sem header e sem página.

   Não é bug de devtools: gire o celular com o menu aberto e 390x844 vira
   844x390. 844 passa do corte.

   Escopo continua certo sem o @media: `.is-menu-open` só existe depois de um
   clique no hambúrguer, e o hambúrguer só existe abaixo de 600 (o core esconde
   ele acima). Quem chega aqui a 1280 chegou redimensionando, e vê uma gaveta
   ancorada no header em vez de um bloco navy — o estado é transitório e
   navegável, não quebrado.

   ponytail: o estado pós-resize é navegável, não perfeito. Duas sobras nele,
   as duas medidas, as duas só existem acima de 600 com o menu aberto:
   1. 2px de página entre header e gaveta (--cc-header-h é 77px, medido no
      mobile; o header no desktop tem 75px, porque o CTA muda de tamanho em
      640).
   2. o X pousa em cima do CTA — ele foi posicionado para ocupar o pixel do
      hambúrguer, que acima de 600 não existe.
   Consertar as duas custa um @media (min-width: 600px) devolvendo o X para
   dentro da gaveta e os 56px de reserva que o core dá para ele. Não vale: é
   estado transitório, some no primeiro toque, e o preço seria trazer de volta a
   dobradinha de regras por largura que causou o bug lá em cima.

   O corte de 600 não sumiu do tema: ele continua no bloco acima, no `order`, e
   é do core em `overlayMenu:"mobile"` (header.html). */

/* De overlay de tela cheia para gaveta: o container já é fixed com inset 0,
   então soltar left/bottom e deixar a largura seguir o conteúdo basta.

   `top` abaixo do header: a gaveta cobria a marca e o CTA inteiros. Com o
   header vivo o usuário não perde o contexto de onde está — e é o header
   que hospeda o X que fecha (veja "o hambúrguer vira X" abaixo).

   width:max-content em vez dos 320px fixos: seis palavras curtas não
   preenchem 320px, e o que sobra é buraco. A gaveta agora tem a largura das
   palavras + o padding das linhas. min-width segura o alvo de toque quando
   o menu tiver só "Blog"; max-width impede que um label longo demais vire
   tela cheia.

   bottom:auto pelo mesmo motivo: 6 itens não enchem 844px de altura. A
   gaveta termina onde o menu termina.

   O max-height é o preço do bottom:auto: em paisagem (390px de altura) a
   lista não cabe, e sem um teto ela vazaria para fora da tela sem scroll —
   o overflow:auto do core só rola se a caixa tiver limite. dvh e não vh por
   causa da barra do Safari.

   O border-box NÃO é enfeite: este elemento do core é content-box, e o
   core ainda lhe dá padding lateral vindo do root padding do tema. */
.wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	top: var(--cc-header-h);
	bottom: auto;
	left: auto;
	width: max-content;
	min-width: 180px;
	max-width: 78vw;
	max-height: calc(100dvh - var(--cc-header-h));
	padding: 8px 0;
	border-bottom-left-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--high);
}

/* O breu por trás da gaveta. Sem ele a gaveta é navy em cima do hero navy
   da home: some a borda, e o menu vira texto flutuando no meio da página —
   era metade da sensação de "vazio".

   Começa ABAIXO do header de propósito. Escurecer o header também seria uma
   linha a menos (bastava uma sombra de spread 100vmax na gaveta), mas aí o X
   — que é navy igual ao hambúrguer que ele substitui — ficaria navy em cima
   de bege escurecido: 2:1 de contraste, abaixo dos 3:1 que um controle
   precisa. Com o header intacto o X mantém o contraste do hambúrguer, e o
   header continua sendo header em vez de virar decoração apagada.

   position:fixed escapa do overflow:auto do container (por isso a regra da
   animação não pode voltar a ter transform — ela quebraria isto junto com o
   X). z-index negativo o joga atrás do fundo da própria gaveta sem sair do
   stacking context dela, que já está em 100000, acima da página.

   pointer-events:none porque o pseudo é o próprio container para efeito de
   clique: sem isto, tocar na página apagada viraria clique DENTRO do modal e
   deixaria de fechar o menu. */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: fixed;
	top: var(--cc-header-h);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: rgba(11, 17, 33, 0.55);
	pointer-events: none;
}

/* ---- O hambúrguer vira X ----

   O X não é um segundo controle nascendo dentro da gaveta: ele ocupa o
   pixel exato onde o hambúrguer está, então o ícone muda ali onde o dedo
   acabou de tocar. Some o ☰, aparece o ✕ no mesmo lugar.

   `visibility` e não `display` no ☰: hidden preserva a caixa de 44px, então
   o header não reflui e o CTA não pula para a direita ao abrir o menu.

   .has-modal-open no <html> é do core (o mesmo estado que trava o scroll da
   página) — não precisei inventar classe nem JS para saber que está aberto.

   As contas do `top`/`right` batem com o hambúrguer: o padding de 10px e a
   margem de -10px dele se anulam, então o centro do ícone fica a
   (root padding + 12) da borda direita e no meio da altura do header. Por
   isso o `right` acompanha a var do root padding (20px ou 32px conforme a
   tela) em vez de um número solto.

   O padding de 10px é o mesmo truque do hambúrguer, e é alvo de toque, não
   estética: o X do core é um ícone de 24px, e 24px é alvo pequeno demais
   para o dedo. O padding leva a caixa para 44px e o `- 10px` no top/right
   devolve o ÍCONE ao pixel exato do hambúrguer — os dois alvos de 44px
   coincidem, então o dedo que abriu fecha sem se mover.

   O `color` explícito é obrigatório: o botão herda o branco do overlay navy,
   mas agora ele está pintando em cima do header bege. Sem isto o X é branco
   no bege — o controle simplesmente some. E é `nav`, o mesmo slug do
   hambúrguer: mesmo lugar, mesma cor, muda só o desenho.

   Cuidado com o slug: `--wp--preset--color--text` NÃO existe nesta paleta.
   Var indefinida em `color` não cai no valor anterior — invalida a
   declaração no computed value e o elemento volta a herdar. O X ficava
   branco e a regra parecia não existir. Slug errado aqui falha calado.

   ATENÇÃO: nada de `transform` na gaveta a partir daqui. Ancestral com
   transform vira containing block de descendente position:fixed, e o X
   passa a se posicionar a partir da gaveta, não da viewport — ele cai 77px
   e vai parar dentro do painel. Foi exatamente isso que aposentou o
   slide-in que existia aqui (veja o comentário da animação abaixo). */
html.has-modal-open .cc-header .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc((var(--cc-header-h) - 24px) / 2 - 10px);
	right: calc(var(--wp--style--root--padding-right) - 10px);
	padding: 10px;
	color: var(--wp--preset--color--nav);
}

/* O core reserva 56px no topo da lista para o X caber ali dentro. O X saiu,
   e o buraco ficou: a gaveta abria com um vão vazio antes de "Início". */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

/* Os itens eram texto solto encostado na direita, com 34px de vão entre um
   e outro: parecia lista de créditos, não menu. Viram linhas de largura
   cheia — o alvo de toque passa a ser a linha inteira (~50px), não a
   palavra. O gap zera porque quem dá o ritmo agora é o padding da linha.

   O alinhamento sai pela variável do próprio core em vez de um `align-items`
   na marra: quem manda nela é o justifyContent:right da nav no header.html,
   que existe para a barra do desktop. Mas a var precisa ser declarada no
   <ul>, não só no container: o core a declara lá via .items-justified-right,
   e valor declarado no próprio elemento ganha de valor herdado do pai.

   Os seletores repetem o prefixo do core de propósito. As regras dele aqui
   têm QUATRO classes (container.is-menu-open .container-content .container);
   as minhas, de duas, perdiam caladas — o padding não aplicava e a linha
   continuava do tamanho da palavra. Mesma especificidade, e a ordem de carga
   (cocrie-css depois do core) decide. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	--navigation-layout-justification-setting: stretch;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding: 14px 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	background: rgba(255, 255, 255, 0.06);
}

/* Fade sem transform NENHUM, e é essa a única razão deste keyframe existir.

   Não dá para só apagar a animação e deixar o core fadear: o keyframe dele
   (overlay-menu__fade-in-animation) leva um translateY junto. Mesmo parado
   no fim, isso deixa um transform identidade computado na gaveta — e
   qualquer transform, até identidade, faz dela o containing block do X
   position:fixed, que despenca 77px para dentro do painel. Animação ganha de
   declaração normal, então `transform:none` no seletor não resolveria: o
   jeito é a gaveta rodar um keyframe que não fala de transform.

   O slide-in de translateX que existia aqui morreu pelo mesmo motivo: ou o
   hambúrguer vira X, ou a gaveta desliza. Escolhi o X — é o controle; o
   slide era enfeite.

   ponytail: se o slide fizer falta, o caminho é animar `right` (não cria
   containing block). Custa repaint por frame e a sombra de 100vmax do breu
   repinta a tela toda junto — meça num celular ruim antes de trocar. */
.wp-block-navigation__responsive-container.is-menu-open {
	animation: cc-drawer-in 0.18s ease-out both;
}

@keyframes cc-drawer-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (max-width: 560px) {
	/* 32px de margem come muito de uma tela de 360px.

	   Precisa ser `body`, e não `:root`: o WP declara estas variáveis no
	   próprio body (`body{--wp--style--root--padding-right:32px;...}` no
	   global-styles). Declarar em :root deixa o html com 20px e o body — que é
	   descendente — sobrescrevendo de volta para 32px em tudo que importa. A
	   regra existia, tinha comentário explicando o porquê, e não fazia nada.
	   Funciona porque o cocrie-css carrega depois do global-styles-inline-css,
	   então `body` contra `body` é decidido pela ordem. */
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* ---- Capa do post ----
   A capa abre a página e o cartão de título sobe por cima dela.

   `position: relative` não é enfeite: o <img> é conteúdo inline e pinta DEPOIS
   do fundo de todo irmão de bloco (CSS 2.1 §E.2 — fundos no passo 3, inline no
   passo 5). Sem isto o cartão perde o fundo branco exatamente na parte que
   cobre a foto, e o título fica solto em cima da imagem. Posicionar o cartão o
   joga para o passo 6, acima da capa (e ainda abaixo do header, que é z-100). */

.cc-post-cover img {
	height: clamp(220px, 40vw, 520px);
	object-fit: cover;
}

.cc-post-head {
	position: relative;
	padding-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
}

/* A subida só existe quando existe capa. Sem imagem destacada o bloco não emite
   nada — nem wrapper — então o seletor de irmão não casa e o cartão nasce com
   respiro normal embaixo do header, sem margem negativa contra o vazio.

   Padding, e não margin, no respiro: margem aqui brigaria com o
   `> :first-child { margin-block-start: 0 }` do layout do core. */
.cc-post-cover + .cc-post-head {
	padding-top: 0;
	margin-top: calc(clamp(48px, 9vw, 120px) * -1);
}

/* ---- Pills ----
   Uma regra só para as tags do fim do post e para o filtro do blog: os dois são
   a mesma coisa (link de tag), então parecem a mesma coisa. */

.cc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.cc-pills a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 14px;
	border: 1px solid rgba(22, 32, 58, 0.07);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.cc-pills a::before {
	content: "#";
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--brand);
}

.cc-pills a:hover {
	border-color: rgba(239, 106, 55, 0.35);
	background: rgba(239, 106, 55, 0.06);
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* A tag do arquivo em que a pessoa está. Navy, igual à página atual da
   paginação: no site inteiro, "você está aqui" é a caixa escura.
   A classe vem do filtro wp_generate_tag_cloud_data (functions.php). */
.cc-pills a.is-current,
.cc-pills a.is-current:hover {
	border-color: transparent;
	background: var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--text-invert);
}

.cc-pills a.is-current::before {
	color: var(--wp--preset--color--brand-light);
}

/* ---- Voltar para o blog (arquivos) ---- */

.cc-back {
	margin-top: 0;
}

.cc-back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.cc-back a::before {
	content: "←";
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--brand);
	transition: transform 0.2s ease;
}

.cc-back a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* A seta anda para trás no hover: o movimento diz "voltar" antes da leitura. */
.cc-back a:hover::before {
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.cc-back a:hover::before {
		transform: none;
	}
}

/* ---- Blog: busca + assuntos ---- */

.cc-blog-nav .wp-block-search {
	/* O bloco emite width:100% inline. Num item flex o flex-basis vence a width,
	   então isto dá 320px sem brigar com o inline — e ainda deixa o campo
	   encolher no celular, que uma largura fixa não deixaria. */
	flex: 0 1 320px;
}

/* A borda (raio, cor, espessura) vem por atributo do bloco no pattern: o core
   serializa border no inside-wrapper, então não há briga de especificidade. */
.cc-blog-nav .wp-block-search__inside-wrapper {
	padding: 4px 4px 4px 8px;
	background: var(--wp--preset--color--surface);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-blog-nav .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(239, 106, 55, 0.12);
}

.cc-blog-nav .wp-block-search__input {
	padding: 8px 10px;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--navy-deep);
}

.cc-blog-nav .wp-block-search__input:focus {
	/* O anel de foco está no wrapper (:focus-within), que é a caixa que a pessoa
	   enxerga — o input não tem borda própria. */
	outline: none;
}

.cc-blog-nav .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	/* Firefox nasce com opacity .54 e o placeholder some no papel bege. */
	opacity: 1;
}

.cc-blog-nav .wp-block-search__button {
	margin: 0;
	padding: 9px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.cc-blog-nav .wp-block-search__button:hover {
	background: var(--wp--preset--color--brand-hover);
}

/* No celular as 8 pills viravam 5 fileiras — 250px de filtro antes do primeiro
   post, para quem veio ler post. Em fileira que rola, o filtro custa uma linha e
   a última pill cortada na borda é o próprio convite para arrastar. */
@media (max-width: 640px) {
	.cc-blog-nav .cc-pills {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	/* Sem isto o flex encolhe as pills até o texto quebrar, em vez de rolar. */
	.cc-blog-nav .cc-pills a {
		flex: none;
	}

	/* As pills saem em ordem alfabética, então a tag atual pode nascer fora da
	   tela no scroller — e destaque que não se vê não destaca nada. order traz
	   ela para a frente sem JS. Só no celular: no desktop a fileira inteira
	   aparece e mexer na ordem só embaralharia o tab. */
	.cc-blog-nav .cc-pills a.is-current {
		order: -1;
	}

	.cc-blog-nav .cc-pills::-webkit-scrollbar {
		display: none;
	}
}

/* ---- Paginação ----
   Eram três links de texto soltos e do mesmo tamanho: nada dizia onde a pessoa
   estava nem convidava o dedo. Aqui viram alvos de 42px, e a página atual é a
   única navy — "você está aqui" sem legenda. */

.cc-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.cc-pagination a,
.cc-pagination .page-numbers {
	/* inline-flex, não grid: a seta do core é um <span> irmão do rótulo, e no
	   grid ela viraria uma linha própria — "←" em cima de "Anteriores". */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid rgba(22, 32, 58, 0.07);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
		transform 0.2s ease;
}

.cc-pagination a:hover {
	border-color: rgba(239, 106, 55, 0.35);
	background: rgba(239, 106, 55, 0.06);
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	transform: translateY(-2px);
}

.cc-pagination .page-numbers.current {
	background: var(--wp--preset--color--navy-deep);
	border-color: transparent;
	color: var(--wp--preset--color--text-invert);
}

/* As reticências não são botão: não têm caixa nem alvo. */
.cc-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	.cc-pagination a:hover {
		transform: none;
	}
}

/* ---- Conteúdo do post ----
   Artigo não é landing page. Os tokens do theme.json são calibrados para
   headline de seção (h2 a 48px) e texto de card (15px) — isso cansa em 2000
   palavras. Aqui o corpo sobe para 17px e os headings encolhem, restaurando a
   proporção de leitura longa. */

.cc-prose > *:not(.alignwide):not(.alignfull) {
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
}

.cc-prose {
	font-size: 17px;
	line-height: 1.75;
}

.cc-prose p,
.cc-prose li {
	line-height: 1.75;
}

.cc-prose h2 {
	margin-top: 1.6em;
	font-size: clamp(26px, 2.6vw, 34px);
}

.cc-prose h3 {
	margin-top: 1.4em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.015em;
}

.cc-prose li + li {
	margin-top: 0.4em;
}

/* Links dentro do texto precisam parecer links */
.cc-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(239, 106, 55, 0.4);
}

.cc-prose a:hover {
	text-decoration-color: var(--wp--preset--color--brand);
}

/* ---- WhatsApp flutuante ----

   ponytail: é um botão, não um widget. Sem ponto pulsando, sem balão de "Olá,
   posso ajudar?" abrindo sozinho, sem plugin: um <a> e este bloco.

   z-index abaixo do overlay do menu mobile (o core usa 100000) de propósito —
   assim, com o menu aberto, o botão fica atrás dele em vez de boiar por cima
   dos links. Não precisa de JS para escondê-lo. */

.cc-zap {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	/* A barra de gestos do iPhone come o canto inferior; sem o inset o botão
	   nasce embaixo dela. O fallback 0px cobre todo o resto. */
	bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 56px: alvo de toque confortável, acima dos 44px mínimos. */
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--brand);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cc-zap:hover,
.cc-zap:focus-visible {
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--surface);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--brand-hover);
}

/* Anel duplo em vez de outline de uma cor só: o botão é fixed e passa por cima
   de seção bege E de seção navy, então nenhuma cor única fica visível sempre.
   Branco por dentro, navy por fora — um dos dois contrasta com qualquer fundo. */
.cc-zap:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px var(--wp--preset--color--surface),
		0 0 0 6px var(--wp--preset--color--navy),
		var(--wp--preset--shadow--brand-hover);
}

@media (prefers-reduced-motion: reduce) {
	.cc-zap { transition: none; }
	.cc-zap:hover,
	.cc-zap:focus-visible { transform: none; }
}

/* ---- Modal do WhatsApp ----

   <dialog> nativo: ESC, foco preso, fundo inerte e top layer (pinta acima do
   header sticky e do próprio botão flutuante, sem z-index nenhum) já vêm de
   graça. O CSS aqui é só aparência. */

.cc-zap-modal {
	/* border-box, igual à gaveta do menu e pelo mesmo motivo: <dialog> é
	   content-box, então sem isto o padding soma POR FORA e min(460px, …) vira
	   520px. Quem estava segurando o modal dentro da tela pequena era o
	   max-width do user agent, não esta conta. */
	box-sizing: border-box;
	/* 460 e não 440: é o que os dois campos da primeira linha pedem para caber
	   lado a lado com folga no desktop. */
	width: min(460px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: clamp(22px, 3vw, 30px);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy-deep);
	box-shadow: var(--wp--preset--shadow--high);
}

/* O ::backdrop não herda nada do documento — cor aqui é na mão. */
.cc-zap-modal::backdrop {
	background: rgba(18, 26, 48, 0.55);
}

@media not (prefers-reduced-motion) {
	.cc-zap-modal[open] {
		animation: cc-modal-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.cc-zap-modal[open]::backdrop {
		animation: cc-backdrop-in 0.22s ease both;
	}
}

@keyframes cc-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@keyframes cc-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.cc-zap-modal h2 {
	/* Cabe numa linha até em tela de 320px — título que quebra em duas já dá o
	   tom errado num form que promete ser rápido. */
	margin: 0;
	padding-right: 36px;
	font-size: 24px;
}

.cc-zap-lead {
	margin: 8px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.cc-zap-fechar {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	/* 40px de alvo para um X que, errado, fecha na cara de quem ia mandar. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cc-zap-fechar:hover {
	background: rgba(22, 32, 58, 0.06);
	color: var(--wp--preset--color--navy-deep);
}

.cc-zap-form {
	margin-top: var(--wp--preset--spacing--20);
}

/* auto-fit, e não duas colunas fixas: onde não couberem 150px cada um, eles
   empilham sozinhos, sem media query e sem número mágico de breakpoint. */
.cc-zap-dupla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	column-gap: 12px;
}

.cc-campo {
	margin: 0 0 12px;
}

.cc-campo label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* O asterisco é o único aviso de campo obrigatório antes do envio: laranja para
   ser visto, e aria-hidden no HTML porque quem usa leitor de tela já ouve o
   "obrigatório" do required. */
.cc-campo label span[aria-hidden] {
	color: var(--wp--preset--color--brand);
}

.cc-opcional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.cc-campo input,
.cc-campo select,
.cc-campo textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(22, 32, 58, 0.14);
	border-radius: var(--wp--custom--radius--icon);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy-deep);
	font-family: var(--wp--preset--font-family--sans);
	/* 16px não é escolha estética: abaixo disso o iOS dá zoom sozinho ao focar o
	   campo e a pessoa perde o modal de vista no meio do preenchimento. */
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-campo textarea {
	resize: vertical;
	min-height: 58px;
}

.cc-campo input:focus,
.cc-campo select:focus,
.cc-campo textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(239, 106, 55, 0.12);
}

/* Só depois que a pessoa mexeu no campo: :invalid sozinho pinta de vermelho um
   form em branco, que ninguém errou ainda. */
.cc-campo input:user-invalid {
	border-color: #d5432a;
}

.cc-zap-enviar {
	width: 100%;
	margin-top: 4px;
	border: 0;
	cursor: pointer;
}

/* O flutuante fica sob o fundo escuro do modal (que está no top layer), mas
   atravessa como um borrão laranja no canto — e no celular bem ao lado do
   form. :has() e não `~` porque o botão é impresso ANTES do dialog no rodapé;
   onde :has() não existir, o preço é o borrão de volta. */
body:has(.cc-zap-modal[open]) .cc-zap {
	display: none;
}