/*
Theme Name: Co.Crie
Theme URI: https://agenciacocrie.com.br
Author: Co.Crie
Description: Tema da Co.Crie. Block theme (FSE) construído sobre o sistema de identidade visual v1.0. Sem page builder.
Version: 1.8.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cocrie
Tags: block-theme, full-site-editing, business
*/

/* Cor, tipografia e espaço vivem em theme.json (ADR 0002). Este arquivo só
   contém o que theme.json não sabe expressar: composição, estados e motion. */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

:root {
	/* Altura do cabeçalho. O token não descreve o cabeçalho: ele o define (ver
	   o min-height lá embaixo). Quem precisar se posicionar em relação a ele
	   — âncora, elemento grudado — usa isto em vez de repetir o número. */
	--cocrie-cabecalho-altura: 5rem;
}

html {
	scroll-behavior: smooth;
	/* No html, nunca no body: no body isto torna o body um contêiner de rolagem
	   e mata o position: sticky do cabeçalho — ele acompanhava a página em vez
	   de grudar, e o lead ficava sem navegação em 98% da rolagem. */
	overflow-x: hidden;
	/* As âncoras do índice do hero param abaixo do cabeçalho grudado. */
	scroll-padding-top: var(--cocrie-cabecalho-altura);
}

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

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

/* Foco visível em tudo que é clicável — requisito de marca, não preferência.
   :focus-visible para não punir quem usa mouse. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--custom--foco);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Pular para o conteúdo — só aparece no teclado. */
.cocrie-pular {
	position: absolute;
	left: var(--wp--preset--spacing--4);
	top: var(--wp--preset--spacing--4);
	z-index: 100;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	/* Mesmo motivo do link: em 16px/600 o rótulo é texto normal, e branco sobre
	   o laranja de interface dá 4,36:1. Sobre marca-hover dá 5,44. O primeiro
	   elemento que o teclado encontra não pode ser o que reprova. */
	background: var(--wp--custom--marca-hover);
	color: var(--wp--preset--color--texto-invertido);
	border-radius: var(--wp--custom--raio--p);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--wp--custom--transicao);
}

.cocrie-pular:focus {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Tipografia — ajustes que theme.json não alcança
   -------------------------------------------------------------------------- */

/* Fraunces é variável: opsz alinha o desenho ao tamanho de uso. Sem isso,
   um título em display usa o desenho pensado para texto pequeno.
   Um opsz só para h1, h2 e h3 erra dois deles: o desenho de 96pt tem serifa
   fina e contraste alto, que num h3 de 1,75rem fica quebradiço. A identidade
   já especifica a escala — 96 display, 48 título de bloco, 36 rótulo — e
   .cocrie-ficha__nome já usava 48. Aqui ela vira regra em vez de exceção. */
h1, .cocrie-display {
	font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
	text-wrap: balance;
}

h2 {
	font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
	text-wrap: balance;
}

h3 {
	font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
	text-wrap: balance;
}

h4, h5, h6 {
	font-variation-settings: "opsz" 36;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Medida de leitura confortável no corpo de texto longo. */
.entry-content > p,
.cocrie-prosa > p {
	max-width: var(--wp--custom--largura-leitura);
}

/* --------------------------------------------------------------------------
   Campos marinho — a estrutura da página vem daqui, não de cards
   -------------------------------------------------------------------------- */

/* Campo encosta em campo. O blockGap de 24px do theme.json é o respiro entre
   blocos DE CONTEÚDO; aplicado entre as seções ele abria uma faixa do fundo da
   página em cada emenda. Some entre duas seções claras e aparece como defeito
   em todo o resto: um degrau claro entre o cabeçalho e o hero, e uma tira
   off-white entre o fecho marinho e o rodapé marinho.
   Cada campo já carrega o próprio respiro no padding (40 a 104px) — o vão
   externo não somava ritmo, só desencaixava. */
main,
.wp-block-template-part,
.entry-content > .alignfull {
	margin-block-start: 0;
}

/* A mesma emenda um nível acima. O embrulho do post-content traz respiro de
   prosa — 4rem em cima, 5rem embaixo, mais o blockGap — e esse respiro sobra
   quando a página abre ou fecha em campo sangrado, que já carrega o próprio
   padding. Dava faixa off-white entre o título marinho e o primeiro campo
   (quem somos, soluções) e entre o fecho marinho e o rodapé.
   O :has() desliga só onde tem campo encostando: página de prosa (política de
   privacidade, post do blog) continua com o respiro, que ali é o certo.
   O padding vive aqui, e não no style do template, porque style inline ganha de
   qualquer regra de folha — a classe existia e não desligava nada. */
.cocrie-corpo {
	padding-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--11);
}

.cocrie-corpo:has(> .entry-content > .alignfull:first-child) {
	margin-block-start: 0;
	padding-block-start: 0;
}

.cocrie-corpo:has(> .entry-content > .alignfull:last-child) {
	padding-block-end: 0;
}

/* O marinho ganha profundidade, mas o gradiente varia SÓ no eixo horizontal.
   Qualquer variação vertical reabriria o defeito que a emenda já custou a
   fechar: fecho marinho e rodapé marinho se encostam, e um degradê que
   escurece pra baixo encontraria o topo claro do campo seguinte como uma
   linha. Variando só em x, dois campos escuros seguidos têm o mesmo perfil e
   a costura some.
   Escurece em vez de clarear: o texto invertido e o laranja da logo já vivem
   no limite sobre #192740 — clarear o fundo comeria contraste que não sobra
   (ver laranja/WCAG). O marinho da paleta é o ponto MAIS CLARO do campo e fica
   onde o conteúdo mora; a profundidade cresce pro lado que está vazio. */
.cocrie-campo-escuro {
	background-color: var(--wp--preset--color--apoio);
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--apoio) 0%,
		var(--wp--preset--color--apoio) 22%,
		var(--wp--custom--marinho-profundo) 100%
	);
	color: var(--wp--preset--color--texto-invertido);
}

/* O terceiro campo. Com só dois, o ritmo da home era marinho, claro, claro,
   marinho, claro, claro — duas sequências de dois campos claros seguidos, e é
   nelas que a página achatava. O creme entra com papel próprio: off-white é
   conversa, creme é quando a Co.Crie mostra coisas, marinho é quando se senta
   pra decidir.
   Contraste conferido sobre #FDF0D5: texto-suave 4,97:1 e marca 5,1:1 — esta
   última melhor que sobre branco. Os cards continuam brancos, então ganham
   separação do fundo em vez de perder. */
.cocrie-campo-creme {
	background: var(--wp--preset--color--superficie-alt);
}

.cocrie-campo-escuro :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--texto-invertido);
}

/* No marinho, o laranja da logo tem contraste de sobra — usa o puro. */
.cocrie-campo-escuro a:not(.wp-block-button__link) {
	color: var(--wp--custom--escuro--marca);
}

.cocrie-campo-escuro a:not(.wp-block-button__link):hover {
	color: var(--wp--custom--escuro--marca-hover);
}

/* Texto secundário sobre marinho: tingido do próprio azul, nunca cinza. */
.cocrie-campo-escuro .cocrie-suave {
	color: var(--wp--custom--escuro--texto-suave);
}

.cocrie-suave {
	color: var(--wp--preset--color--texto-suave);
}

/* A marca como marca d'água no fecho da página. O texto ocupa a esquerda do
   campo escuro e sobra vazio à direita — o símbolo entra ali, grande e apagado,
   só nesta seção (não em todo .cocrie-campo-escuro, que se repete em 16
   arquivos e viraria papel de parede). */
.cocrie-cta-conversa {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.cocrie-cta-conversa::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -4rem;
	transform: translateY(-50%);
	inline-size: min(34rem, 55vw);
	aspect-ratio: 1;
	background-color: var(--wp--custom--escuro--superficie-alt);
	-webkit-mask: url("assets/img/marca.svg") center / contain no-repeat;
	mask: url("assets/img/marca.svg") center / contain no-repeat;
	pointer-events: none;
}

@media (max-width: 900px) {
	.cocrie-cta-conversa::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Hero — a promessa à esquerda, o índice da conversa à direita
   -------------------------------------------------------------------------- */

.cocrie-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: var(--wp--preset--spacing--10);
	align-items: start;
}

/* O índice repete as perguntas da página: mostra a estrutura antes de rolar
   e serve de atalho pra quem só quer uma resposta. */
.cocrie-indice {
	padding-top: var(--wp--preset--spacing--3);
}

/* Rótulo do sistema — o microcaixa-alta que nomeia um bloco sem competir com
   ele. Nasceu duplicado em dois lugares do arquivo com valores idênticos; é
   um componente só. A margem fica por uso porque os contextos pedem respiros
   diferentes (aqui encabeça uma lista, no contato encabeça uma linha). */
.cocrie-indice__titulo,
.cocrie-casa__rotulo,
.cocrie-rotulo {
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-suave);
}

.cocrie-campo-escuro :is(.cocrie-indice__titulo, .cocrie-casa__rotulo) {
	color: var(--wp--custom--escuro--texto-suave);
}

.cocrie-indice__titulo {
	margin: 0 0 var(--wp--preset--spacing--4);
}

.cocrie-indice ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pergunta;
}

.cocrie-indice li {
	counter-increment: pergunta;
	border-top: 1px solid var(--wp--custom--escuro--borda);
}

/* Precisa vencer `.cocrie-campo-escuro a`, senão a lista inteira fica laranja
   e o número perde o papel de destaque. */
.cocrie-campo-escuro .cocrie-indice a,
.cocrie-indice a {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--wp--preset--spacing--3);
	padding-block: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--texto-invertido);
	text-decoration: none;
	transition: color var(--wp--custom--transicao);
}

/* A ordem das perguntas é a ordem da conversa — o número é informação. */
.cocrie-indice a::before {
	content: counter(pergunta, decimal-leading-zero);
	color: var(--wp--custom--escuro--marca);
	font-variant-numeric: tabular-nums;
}

.cocrie-campo-escuro .cocrie-indice a:hover {
	color: var(--wp--custom--escuro--marca);
}

@media (max-width: 900px) {
	.cocrie-hero {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--9);
	}
}

/* --------------------------------------------------------------------------
   O sorriso — a assinatura da logo vira grafismo do site

   O arco sob o "co" da marca é a única forma própria da Co.Crie, e o manual
   chama ele de assinatura. Não existia em lugar nenhum do site.

   Agora com o vetor da marca: sorriso.svg é o path do símbolo oficial,
   recortado no bounding box da curva (94,2 x 41,01 do viewBox de 120). Entra
   como máscara, não como imagem, para o currentColor continuar valendo — quem
   aplica escolhe a cor, e o degradê laranja do logo segue não reproduzido: em
   escala grande o laranja é reservado a ação.
   O arco anterior era uma borda de raio elíptico, aproximação medida no PNG.
   Chegava perto na proporção (0,438 contra os 0,435 reais), mas era simétrica:
   o sorriso de verdade tem as pontas com espessuras e cortes diferentes, e é
   isso que faz ele ler como a assinatura da marca em vez de um arco genérico.
   -------------------------------------------------------------------------- */

/* Fecha a seção, centrado. Já ficou no pé da resposta, alinhado à coluna dela:
   com a esteira e os depoimentos saindo pra largura cheia, o arco encalhava no
   meio da seção, e mesmo antes disso ele mudava de altura conforme a resposta
   fosse parágrafo ou grupo com prova. No fim da seção ele é sempre a última
   coisa, e centrado não precisa concordar com coluna nenhuma — some o motivo
   que mantinha o pseudo-elemento preso à resposta.
   :has() carrega a regra de quais seções assinam: as que têm uma troca, ou
   seja, aquelas onde a Co.Crie respondeu algo. Uma por seção, mesmo que a
   seção tenha duas trocas.
   Pequeno de propósito: ele se repete umas quinze vezes na navegação inteira e
   tem que ler como pontuação de fim de fala, não como bloco — em 4,5rem o
   traço proporcional engorda e vira um "U" que disputa atenção com o texto. */
.entry-content > div:has(.cocrie-troca)::after {
	content: "";
	display: block;
	--arco-largura: 2.25rem;
	/* Altura do vetor: 41,01 / 94,2. */
	--arco-altura: 0.435;

	inline-size: var(--arco-largura);
	block-size: calc(var(--arco-largura) * var(--arco-altura));
	margin: var(--wp--preset--spacing--9) auto 0;
	background-color: currentColor;
	color: var(--wp--custom--borda-forte);
	-webkit-mask: url("assets/img/sorriso.svg") center / 100% 100% no-repeat;
	mask: url("assets/img/sorriso.svg") center / 100% 100% no-repeat;
}

.entry-content > div.cocrie-campo-escuro:has(.cocrie-troca)::after {
	color: var(--wp--custom--escuro--borda-forte);
}

/* --------------------------------------------------------------------------
   A conversa — as perguntas do lead conduzem a página
   -------------------------------------------------------------------------- */

/* A pergunta é a voz do cliente: Fraunces itálico, que na Fraunces é um
   itálico desenhado de verdade, não uma inclinação sintética.
   WONK 1 liga as formas caligráficas (o g de um andar, a cauda do y). É o
   eixo mais expressivo da fonte e o único lugar do site onde ele cabe: aqui
   a voz é de uma pessoa falando, não da marca institucional. */
.cocrie-pergunta {
	font-family: var(--wp--preset--font-family--titulo);
	font-style: italic;
	font-variation-settings: "opsz" 96, "SOFT" 20, "WONK" 1;
	font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
	max-width: 22ch;
	margin: 0;
}

/* A resposta é a voz da Co.Crie: sem serifa, direta. */
.cocrie-resposta {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	max-width: 46ch;
	margin: 0;
}

/* Cada troca é pergunta à esquerda, resposta e prova à direita — sempre nessa
   ordem. Os turnos já alternaram de lado, para soar conversa em vez de tabela:
   metade das perguntas caía na coluna da direita e, lendo da esquerda, o olho
   batia primeiro num bloco largo de texto miúdo. A pergunta é a manchete da
   seção; manchete não fica em segundo lugar na varredura. Sem a alternância o
   posicionamento explícito também sai: dois filhos em grid de duas colunas já
   caem um em cada, na mesma linha, por auto-placement. */
.cocrie-troca {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--7) var(--wp--preset--spacing--10);
	align-items: start;
	/* Só padding em cima: o de baixo é do grupo da seção. Os dois somados
	   abriam um vão grande demais depois de cada resposta. */
	padding-top: var(--wp--preset--spacing--8);
	border-top: 1px solid var(--wp--preset--color--borda);
}

/* As duas colunas começam na mesma linha, encostadas no filete que abre a
   troca. Já teve defasagem aqui — a pergunta subia 24px e a resposta descia
   32px, para encenar quem falou primeiro. Com a pergunta grudada fazia sentido;
   sem o grude virou só desencontro, e pior: a defasagem media diferente em cada
   seção, porque nem toda resposta é um parágrafo (algumas são grupo com prova
   junto, que traz o próprio respiro). Quem diz quem falou antes é o itálico da
   pergunta contra o romano da resposta, não meia linha de altura.
   A pergunta já ficou grudada aqui (position: sticky), acompanhando a resposta
   inteira. Saiu a pedido: pergunta que persegue a rolagem chama mais atenção
   para o próprio movimento do que para o que está sendo respondido.
   Na horizontal ela também já invadia a goteira em até 3rem, para soar falada
   em vez de diagramada. Saiu pelo mesmo motivo que a defasagem: é o único
   elemento da página fora do container que todo o resto obedece, e uma régua
   quebrada em um lugar só lê como erro, não como intenção. */
.cocrie-troca > .cocrie-pergunta {
	margin-block-start: 0;
}

/* O blockGap do WordPress cai como margin-block-start em todo filho que não é
   o primeiro — e a resposta é sempre o segundo filho da troca. Sozinho isso já
   a empurrava 24px para baixo da pergunta; quando a resposta é um grupo (traz
   prova junto), o primeiro filho de dentro repete a dose. */
.cocrie-troca > :not(.cocrie-pergunta),
.cocrie-troca > :not(.cocrie-pergunta) > :first-child {
	margin-block-start: 0;
}

.cocrie-campo-escuro .cocrie-troca {
	border-top-color: var(--wp--custom--escuro--borda);
}

@media (max-width: 781px) {
	/* minmax(0, …) como nas duas colunas do desktop: `1fr` sozinho carrega o
	   min-width auto do grid, e aí é o conteúdo mais largo que manda na coluna.
	   Basta um item largo — a esteira de clientes, uma tabela — para a coluna
	   passar da viewport e a página inteira ganhar rolagem lateral. */
	.cocrie-troca {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--6);
		padding-block: var(--wp--preset--spacing--9);
	}

	.cocrie-pergunta {
		max-width: 18ch;
	}
}

/* --------------------------------------------------------------------------
   Serviços — sete frentes em índice, não em cards
   -------------------------------------------------------------------------- */

/* 4 colunas em vez de 3: com 7 itens, 3 colunas deixa o último sozinho numa
   linha; 4 fecha em 4+3, sem item órfão isolado. */
.cocrie-fichas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Sem moldura, o respiro entre itens é o que separa um do outro: a coluna
	   pede mais que o gap de card, e a linha ainda mais, senão a descrição de
	   um encosta no filete do de baixo. */
	column-gap: var(--wp--preset--spacing--7);
	row-gap: var(--wp--preset--spacing--9);
	margin-top: var(--wp--preset--spacing--8);
}

/* As páginas de serviço têm 5 ou 6 itens, não 7 — em 4 colunas isso vira
   4+1 e 4+2, e o órfão sozinho é pior que a sobra. Três colunas fecham o 6
   exato e deixam o 5 em 3+2.
   O min-width não é enfeite: :has() é mais específico que .cocrie-fichas e
   media query não soma especificidade, então sem esse guard esta regra
   venceria as quebras de 900px e 560px e travaria 3 colunas no celular. */
@media (min-width: 901px) {
	.cocrie-fichas:has(> :nth-child(5):last-child),
	.cocrie-fichas:has(> :nth-child(6):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.cocrie-fichas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.cocrie-fichas {
		grid-template-columns: 1fr;
	}
}

/* Sem caixa. O card branco só funcionava sobre o off-white; sobre o creme ele
   virava uma ilha fria — branco azulado e borda cinza-esverdeada brigando com
   um campo quente — e as sobras de altura entre textos desiguais viravam
   buracos visíveis dentro de cada moldura.
   Vira índice: filete em cima, nome em Fraunces, descrição embaixo. O campo
   carrega a cor, a tipografia carrega a estrutura, e sem moldura o texto curto
   ao lado do longo deixa de ser defeito. O filete é marinho translúcido, então
   serve igual no creme da home e no off-white das páginas de serviço.
   Onde a ficha é link (home), a affordance é o filete e o nome virando laranja
   juntos — nas páginas de serviço ela é um <div> e nunca prometeu clique. */
.cocrie-ficha {
	display: flex;
	flex-direction: column;
	padding-block-start: var(--wp--preset--spacing--4);
	border-block-start: 2px solid color-mix(in srgb, var(--wp--preset--color--apoio) 22%, transparent);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--wp--custom--transicao);
}

a.cocrie-ficha:hover {
	border-block-start-color: var(--wp--preset--color--marca);
}

.cocrie-ficha__nome {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	font-variation-settings: "opsz" 48;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--apoio);
}

.cocrie-ficha:hover .cocrie-ficha__nome {
	color: var(--wp--preset--color--marca);
}

.cocrie-ficha__desc {
	margin: 0;
	color: var(--wp--preset--color--texto-suave);
}

/* --------------------------------------------------------------------------
   FAQ — <details>/<summary> nativo: só a pergunta, resposta some até o
   clique. Sem JS, sem estado pra gerenciar.
   -------------------------------------------------------------------------- */

.cocrie-faq {
	display: flex;
	flex-direction: column;
	margin-top: var(--wp--preset--spacing--7);
}

.cocrie-faq__item {
	border-top: 1px solid var(--wp--preset--color--borda);
}

.cocrie-faq__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--borda);
}

.cocrie-faq__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--5);
	padding-block: var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
	transition: color var(--wp--custom--transicao);
}

.cocrie-faq__pergunta::-webkit-details-marker {
	display: none;
}

.cocrie-faq__pergunta:hover {
	color: var(--wp--preset--color--marca);
}

/* Fechado é uma linha reta; abrindo, a linha se curva ponto a ponto até virar
   o sorriso oficial — um morph de verdade, não altura esticando.
   Precisa de um <path> real: a propriedade `d` só anima em elemento SVG, não
   em pseudo-elemento. A linha reta é construída com a mesma sequência de
   comandos do vetor (M + 13×C + Z, coordenadas achatadas numa faixa) —
   interpolar dois `d` só funciona liso quando as duas formas têm a mesma
   estrutura de comandos; foi divergência de estrutura que deixava o arco
   anterior torto. Sem suporte a `d` animável, o atributo `d` do markup já
   é a linha reta — degrada pra estático, não quebra. */
.cocrie-faq__sorriso {
	flex: none;
	inline-size: 1.15em;
	block-size: calc(1.15em * 0.435);
	color: var(--wp--preset--color--marca);
}

.cocrie-faq__sorriso path {
	fill: currentColor;
	d: path("M26.2,99 C22.1,99 17.9,99 13.8,99 C14.5,99 16.4,99 23.5,99 C31.7,99 41.8,99 45.7,99 C55.3,99 65.7,99 75.2,99 C86.4,99 96.4,99 102.5,99 C105.1,99 107,99 108,99 C108,99 95.3,85 95.3,85 C95.5,85 92.8,85 92.6,85 C90.1,85 86.2,85 81.3,85 C73.7,85 63.6,85 54.3,85 C43,85 33.2,85 28.5,85 C28.2,85 28,85 27.7,85 C26.9,85 26.5,85 26.3,85 Z");
	transition: d var(--wp--custom--transicao);
}

.cocrie-faq__item[open] .cocrie-faq__sorriso path {
	d: path("M26.2,71.6 C22.1,72.7 17.9,73.7 13.8,74.8 C14.5,78.9 16.4,87.7 23.5,96.2 C31.7,106.1 41.8,109.6 45.7,110.7 C55.3,113.4 65.7,113.2 75.2,110.3 C86.4,106.8 96.4,99.3 102.5,89.2 C105.1,84.9 107,80.1 108,75.2 C108,75.2 95.3,71.7 95.3,71.7 C95.5,71.7 92.8,77.8 92.6,78.3 C90.1,83.8 86.2,88.7 81.3,92.4 C73.7,98.1 63.6,100.7 54.3,99.1 C43,97.1 33.2,88.7 28.5,78.4 C28.2,77.8 28,77.2 27.7,76.5 C26.9,74.5 26.5,72.8 26.3,71.7 Z");
}

@media (prefers-reduced-motion: reduce) {
	.cocrie-faq__sorriso path {
		transition: none;
	}
}


.cocrie-faq__resposta {
	padding-bottom: var(--wp--preset--spacing--6);
	max-width: 64ch;
	color: var(--wp--preset--color--texto-suave);
}

.cocrie-faq__resposta p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Processo — quatro etapas em trilha contínua
   -------------------------------------------------------------------------- */

.cocrie-trilha {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--7);
	counter-reset: etapa;
}

.cocrie-etapa {
	position: relative;
	counter-increment: etapa;
	padding-top: var(--wp--preset--spacing--6);
	border-top: 2px solid var(--wp--custom--escuro--borda-forte);
}

/* A marca no topo da trilha marca onde a etapa começa. */
.cocrie-etapa::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: var(--wp--preset--spacing--7);
	height: 2px;
	background: var(--wp--custom--escuro--marca);
}

/* O número da etapa. O counter-reset já estava declarado no .cocrie-trilha e
   nunca foi impresso — faltava o counter-increment e alguém para mostrar.
   Grande porque o tom de voz da marca manda número antes de adjetivo: aqui
   ele é a estrutura da seção, não um rótulo. Baixo contraste porque estrutura
   se lê primeiro e se nota depois; se disputasse com o título, viraria enfeite.
   tabular-nums para os quatro alinharem entre si.
   Nasce do título e não de um elemento novo: os patterns não mudam. */
.cocrie-etapa__titulo::before {
	content: counter(etapa, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
	font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	/* A DESIGN.md diz que estes numerais são estrutura da seção, não enfeite —
	   então o piso deles é 3:1, e em borda-forte puro davam 2,24:1 sobre o
	   marinho. 30% de texto-suave sobe para 3,36:1 sem virar texto de corpo
	   (o suave puro mede 7,53 e passaria a gritar em 72px). Mistura de dois
	   tokens, não hex novo. */
	color: color-mix(in srgb, var(--wp--custom--escuro--texto-suave) 30%, var(--wp--custom--escuro--borda-forte));
	margin-bottom: var(--wp--preset--spacing--5);
}

.cocrie-etapa__titulo {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--3);
}

.cocrie-etapa__texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

@media (max-width: 900px) {
	.cocrie-trilha {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--6);
	}
}

@media (max-width: 540px) {
	.cocrie-trilha {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Linha do tempo — o trilho horizontal
   -------------------------------------------------------------------------- */

/* A história é longa e a página não pode ser. Empilhada, a linha do tempo
   cobrava 1.400px de rolagem de quem não veio ler história nenhuma. Deitada,
   cobra uma faixa: quem se interessou arrasta pro lado, quem não, passa reto.

   O trilho sangra até a borda direita da tela de propósito — a linha correndo
   pra fora do quadro é o que diz "tem mais" sem seta e sem texto. O `html` já
   tem overflow-x: hidden, então o 50vw não cria barra na página. */
.cocrie-linha {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* `contain` para o arrasto lateral não virar "voltar" no navegador. */
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--custom--escuro--borda-forte) transparent;
	list-style: none;
	margin: var(--wp--preset--spacing--9) calc(50% - 50vw) 0 0;
	padding: 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--5) 0;
}

/* O degrau. Cada ano ocupa 2,4rem a mais de trilho que o anterior, e como a
   foto tem proporção fixa, ela cresce nos dois eixos junto: 2024 é quase o
   dobro de 2019. A borda de cima é o trilho e não se mexe; o pé de cada ano
   desce um degrau. Lida da esquerda pra direita, a fileira é uma escada.

   O `min()` guarda dois degraus, um em rem e outro em vw, e a tela escolhe:
   no desktop manda o rem, no celular manda o vw. Com um degrau só, ou o último
   ano não cabia na tela pequena, ou a escada morria depois do terceiro. Nos
   dois casos o ano seguinte continua aparecendo pela metade — que é o convite
   pra arrastar.

   Os anos se encostam e o respiro vem de dentro: com `gap`, o trilho ficaria
   picotado nos vãos, e o trilho é uma linha só. */
.cocrie-ano {
	position: relative;
	flex: 0 0 min(calc(55vw + var(--n) * 7vw), calc(16rem + var(--n) * 2.4rem));
	scroll-snap-align: start;
	border-top: 2px solid var(--wp--custom--escuro--borda);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--7) 0 0;
}

/* O traço que marca o ponto no trilho — o mesmo gesto da trilha do processo.
   Em `borda-forte` contra o trilho em `borda`: quem marca o ponto precisa ser
   mais claro que o caminho. Nada de laranja aqui (regra 4): não é clicável. */
.cocrie-ano::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: var(--wp--preset--spacing--7);
	height: 2px;
	background: var(--wp--custom--escuro--borda-forte);
}

/* Mesmo tratamento dos numerais da trilha, e pelo mesmo motivo: o número é a
   estrutura da seção, não um rótulo. Lida da esquerda pra direita, a fileira
   de anos é o índice da história. */
.cocrie-ano__numero {
	/* <span> dentro do <label> que carrega o clique — sem isto ele fica inline
	   e a margem de baixo não empurra a foto. */
	display: block;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--wp--custom--escuro--texto-suave) 30%, var(--wp--custom--escuro--borda-forte));
	margin: 0 0 var(--wp--preset--spacing--4);
}

/* 16/10 é a proporção dos arquivos originais — nesta moldura nenhuma das seis
   perde gente pra fora do quadro. O texto vem logo abaixo, sem alinhar com o
   dos vizinhos: alinhar abriria um palmo de vazio embaixo das fotos menores,
   e o pé irregular é justamente o desenho da escada. */
.cocrie-ano__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--raio--g);
}

.cocrie-ano__texto {
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--custom--escuro--texto-suave);
}

/* --------------------------------------------------------------------------
   Linha do tempo — o ano que fala

   Tudo acima é o desenho sem movimento, e ele é a base de propósito: sem
   classe nenhuma, a seção já é a escada rolável com os seis anos abertos,
   coloridos e legíveis. O que vem abaixo é a camada de sanfona, e ela só
   existe depois que `assets/js/linha-do-tempo.js` põe a classe
   `cocrie-linha--anima` — o que ele não faz sob `prefers-reduced-motion`.
   Sem JS, ou com JS quebrado, ninguém cai num estado meio-morto: cai na
   escada.

   A seção é a Co.Crie contando a história em voz alta, e a lei já existe na
   DESIGN.md: escala é volume de voz. Um ano fala de cada vez — abre pra ~55%
   da faixa, ganha cor, acende o trilho em cima dele e mostra o texto. Os
   outros cinco continuam na tela em preto e branco, como película. É turno de
   fala aplicado ao tempo em vez de a duas pessoas.

   Aqui o CSS desenha os dois estados e faz a transição entre eles; quem diz de
   quem é a vez é o JS, pela classe `esta-falando`. A divisão é essa e não tem
   exceção — nenhuma regra daqui sabe contar tempo.

   Teto conhecido: transicionar flex-grow é layout a cada quadro. É deliberado
   — a alternativa (transform: scale) distorceria as fotos — e acontece uma vez
   a cada 5,5s, com seis itens numa fileira.
   -------------------------------------------------------------------------- */

/* O rádio some da tela e continua no foco do teclado: quem carrega o clique é
   ele, e sumi-lo com display:none ou visibility:hidden o tiraria da navegação.
   1px em vez de 0 porque caixa sem área não recebe foco em todo navegador. */
.cocrie-ano__escolha {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* O alvo do clique é a foto. Label é inline por padrão; sem isto ela some. */
.cocrie-ano__alvo {
	display: block;
	cursor: pointer;
}

/* Foto que dá destaque precisa parecer clicável, e o aviso é `outline`.
   Ele não pode morar dentro da <img>: `filter` tinge o elemento inteiro,
   contorno incluído, e sobre a película em preto e branco o #AEB9C9 chegava
   medido em 101,101,101 — cinza-escuro, justo onde o aviso mais precisa
   aparecer. O label é o mesmo retângulo da foto e não é filtrado; o ano ficou
   de fora dele, senão o contorno subia até lá em cima e agrupava os dois. */
.cocrie-ano__alvo:hover,
.cocrie-ano__escolha:focus-visible ~ .cocrie-ano__alvo {
	outline: 2px solid var(--wp--custom--escuro--texto-suave);
	outline-offset: 3px;
	border-radius: var(--wp--custom--raio--g);
}

.cocrie-ano__escolha:focus-visible ~ .cocrie-ano__alvo {
	outline-color: var(--wp--custom--escuro--foco);
}

.cocrie-linha--anima {
	display: flex;
	/* A altura acompanha a largura da tela, e isso é obrigação, não capricho.
	   Com altura fixa a foto aberta ficava com 1,00 de proporção em 830px
	   (38% das laterais fora — e é nas laterais que as pessoas estão) e 2,26
	   em 1920px. A conta sai de duas medidas do próprio layout: a foto aberta
	   mede `0,546 × trilho − 114px` de largura, e a altura dela é `faixa −
	   216px`. Igualando a 1,6 (a proporção dos arquivos) chega-se nesta reta;
	   ela acerta 1,6 nas pontas e não passa de 1,75 no meio. O clamp só
	   segura o ultrawide e o quase-celular. */
	height: clamp(25rem, calc(24vw + 14rem), 46rem);
	/* Em sanfona nada rola: os seis cabem sempre. O corte existe para aparar o
	   texto dos anos fechados, que tem largura fixa pra não refluir no meio da
	   abertura e por isso transborda o cartão estreito.

	   `clip` com margem em vez de `hidden` porque o primeiro ano encosta na
	   borda esquerda da faixa, e com corte rente o contorno de hover dele era
	   decepado — some justo a borda que anuncia o clique. 6px é o que o
	   contorno ocupa (2px de traço + 3px de folga) com um de sobra; os 200px do
	   texto transbordando continuam aparados. O `hidden` fica na frente como
	   piso pra quem não conhece `clip`. */
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 6px;
}

/* flex-basis 0 com grow variável: a soma fecha 100% da faixa sozinha, em
   qualquer ponto da transição. Cinco fechados em 1 e um aberto em 6 dão
   6/11 ≈ 55% pra quem está falando. */
.cocrie-linha--anima .cocrie-ano {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	/* Menos goteira que na escada: aqui ela sai do bolso das fatias fechadas,
	   e fatia de 80px não lê mais como foto. */
	padding-right: var(--wp--preset--spacing--6);
	padding-bottom: var(--wp--preset--spacing--12);
}

/* A moldura toma a altura que sobra no cartão, e a foto preenche ela por
   posicionamento absoluto — não por uma segunda corrente de flex dentro da
   primeira. Encaixada em `inset: 0` ela acompanha a moldura em qualquer altura,
   em qualquer quadro da transição, sem depender de como `flex-basis: 0` resolve
   num item substituído. */
.cocrie-linha--anima .cocrie-ano__alvo {
	position: relative;
	display: block;
	flex: 1;
	min-height: 0;
}

/* Uma transição para os quatro, com a mesma curva e o mesmo tempo — é ela que
   faz a troca de vez ser andada em vez de saltada. */
.cocrie-linha--anima .cocrie-ano,
.cocrie-linha--anima .cocrie-ano__numero,
.cocrie-linha--anima .cocrie-ano__foto,
.cocrie-linha--anima .cocrie-ano__texto {
	transition: flex-grow 500ms cubic-bezier(0.4, 0, 0.2, 1),
		border-top-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
		font-size 500ms cubic-bezier(0.4, 0, 0.2, 1),
		color 500ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 500ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Calado: estreito, em preto e branco, com o trilho apagado em cima. */
.cocrie-linha--anima .cocrie-ano {
	flex-grow: 1;
	border-top-color: var(--wp--custom--escuro--borda);
}

/* Caixa de altura fixa com o ano encostado embaixo: assim o corpo pode crescer
   de 1rem pra 3rem sem empurrar a foto um pixel. Os seis anos ficam legíveis o
   tempo todo — a linha do tempo nunca deixa de ler 2019 → 2024. */
.cocrie-linha--anima .cocrie-ano__numero {
	display: flex;
	align-items: flex-end;
	height: 3.4rem;
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 1rem;
	color: color-mix(in srgb, var(--wp--custom--escuro--texto-suave) 30%, var(--wp--custom--escuro--borda-forte));
}

/* A foto toma a altura que sobra. aspect-ratio sai de cena: aqui quem dita a
   proporção é a fatia, e o cover resolve o corte. A cor é de quem está
   falando — seis fotos coloridas ao mesmo tempo viram barulho; em p&b as cinco
   caladas viram película. */
.cocrie-linha--anima .cocrie-ano__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	filter: grayscale(1) brightness(0.55);
}

/* Fora do fluxo, com a altura reservada pelo padding-bottom do cartão. No
   fluxo, o texto de um cartão de 100px quebraria em dez linhas e esticaria a
   fileira inteira. Largura em ch e não em %: em % ele refluiria durante a
   abertura, e reflow no meio de um fade se vê. */
.cocrie-linha--anima .cocrie-ano__texto {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34ch;
	margin: 0;
	opacity: 0;
}

/* O sorriso é pontuação de fim de fala (regra 5) e aqui ele viaja com quem
   está falando. Mesma receita de máscara do arco que fecha as seções de
   troca — vetor oficial, currentColor, nenhum arquivo novo. */
.cocrie-linha--anima .cocrie-ano__texto::after {
	content: "";
	display: block;
	inline-size: 2.25rem;
	/* Altura do vetor: 41,01 / 94,2. */
	block-size: calc(2.25rem * 0.435);
	margin-top: var(--wp--preset--spacing--4);
	background-color: currentColor;
	color: var(--wp--custom--escuro--borda-forte);
	-webkit-mask: url("assets/img/sorriso.svg") center / 100% 100% no-repeat;
	mask: url("assets/img/sorriso.svg") center / 100% 100% no-repeat;
}

/* Falando. Mesma especificidade da regra que cala, e vem depois — quem manda é
   a ordem, não um peso maior. */
.cocrie-linha--anima .esta-falando {
	flex-grow: var(--cocrie-ano-aberto, 6);
	border-top-color: var(--wp--custom--escuro--texto-suave);
}

.cocrie-linha--anima .esta-falando .cocrie-ano__numero {
	font-size: 3rem;
	color: var(--wp--custom--escuro--texto);
}

.cocrie-linha--anima .esta-falando .cocrie-ano__foto {
	filter: grayscale(0) brightness(1);
}

.cocrie-linha--anima .esta-falando .cocrie-ano__texto {
	opacity: 1;
}

/* Deitada a sanfona reparte largura; em pé reparte altura. Nenhum estado novo
   — muda a direção do flex e a altura da faixa. Em pé o ano fechado cabe
   escrito por extenso, que na fatia vertical do desktop não caberia.

   Duas coisas mudam de lugar aqui, e nenhuma é gosto:

   `min-height: 0` porque item de flex tem min-height auto, e em coluna esse
   auto é o piso do conteúdo — sem ele as faixas se recusam a encolher e a
   sanfona vira uma lista comprida que estoura a altura.

   E o texto passa a se ancorar na lista, não no cartão: em pé, reservar a
   altura dele dentro de cada faixa daria um piso de 5rem em cada uma das seis,
   que sozinho já passa da altura toda. Ancorado na lista, ele vira uma legenda
   embaixo da sanfona — os seis continuam empilhados no mesmo lugar e só o que
   está falando aparece. */
/* No celular a sanfona vira palco, e não é gosto: medida em 360px, ela gastava
   33% da altura em cinco faixas que só mostram o ano e deixava a foto — que é a
   prova da seção — com 32%. Deitada a sanfona funciona porque largura sobra;
   em pé o que falta é justamente altura.

   Então os seis anos viram uma fileira só, no trilho, e as seis fotos se
   empilham num palco embaixo, onde só a que fala aparece. A troca vira fusão
   em vez de morfar de tamanho, que é o certo quando a foto é uma só.

   Quem escolhe passa a ser o ano, não a foto: com uma foto por vez, tocar nela
   não significa "quero esta". Daí o segundo <label> no markup. */
@media (max-width: 781px) {
	.cocrie-linha--anima {
		position: relative;
		flex-direction: row;
		height: auto;
		/* A sangria até a borda da tela é da versão deitada, onde ela diz "o
		   trilho continua". No palco não continua nada à direita — e sangrar só
		   de um lado deixava a foto 24px fora da régua do container, encostada
		   na borda da tela com goteira do lado esquerdo. */
		margin-right: 0;
		/* A fileira de anos fica no fluxo; palco e legenda são reservados aqui
		   embaixo. O palco é a largura do trilho — a tela menos as duas
		   goteiras — dividida por 1,6, a proporção dos arquivos. Por isso a
		   foto nunca corta, em tela nenhuma. */
		padding-bottom: calc((100vw - 3rem) / 1.6 + 8rem);
		/* Na fileira ninguém cresce de largura: os seis dividem igual. */
		--cocrie-ano-aberto: 1;
	}

	.cocrie-linha--anima .cocrie-ano {
		position: static;
		flex: 1 1 0;
		min-width: 0;
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--1) 0 0;
	}

	.cocrie-linha--anima .cocrie-ano__numero {
		height: auto;
		margin: 0;
		font-size: 0.875rem;
	}

	.cocrie-linha--anima .esta-falando .cocrie-ano__numero {
		font-size: 1.25rem;
	}

	/* No palco quem anuncia o clique é o ano, que virou o alvo. */
	.cocrie-linha--anima .cocrie-ano__numero:hover,
	.cocrie-linha--anima .cocrie-ano__escolha:focus-visible ~ .cocrie-ano__numero {
		outline: 2px solid var(--wp--custom--escuro--texto-suave);
		outline-offset: 3px;
		border-radius: var(--wp--custom--raio--p);
	}

	.cocrie-linha--anima .cocrie-ano__escolha:focus-visible ~ .cocrie-ano__numero {
		outline-color: var(--wp--custom--escuro--foco);
	}

	/* As seis no mesmo lugar, logo abaixo da fileira. `pointer-events` desligado
	   porque no palco a foto não escolhe nada — e sem isso a de cima roubaria o
	   toque das outras. */
	.cocrie-linha--anima .cocrie-ano__alvo {
		position: absolute;
		left: 0;
		right: 0;
		top: 3rem;
		display: block;
		opacity: 0;
		pointer-events: none;
	}

	.cocrie-linha--anima .esta-falando .cocrie-ano__alvo {
		opacity: 1;
	}

	/* Deitada, a foto é absoluta preenchendo o cartão. Em pé ela precisa voltar
	   pro fluxo: é ela que dá altura ao palco, e absoluta o palco fica com zero
	   e a foto some da tela. */
	.cocrie-linha--anima .cocrie-ano__foto {
		position: static;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.cocrie-linha--anima .cocrie-ano__alvo,
	.cocrie-linha--anima .cocrie-ano__numero {
		transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
			font-size 500ms cubic-bezier(0.4, 0, 0.2, 1),
			color 500ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.cocrie-linha--anima .cocrie-ano__texto {
		width: 100%;
	}
}

/* O JS não liga a sanfona sob prefers-reduced-motion, então este bloco é só
   para quem muda a preferência com a página já aberta: o desenho fica, o
   caminho entre os estados some. */
@media (prefers-reduced-motion: reduce) {
	.cocrie-linha--anima .cocrie-ano,
	.cocrie-linha--anima .cocrie-ano__numero,
	.cocrie-linha--anima .cocrie-ano__foto,
	.cocrie-linha--anima .cocrie-ano__texto {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Valores — o jogo "Co." da marca, em cards
   -------------------------------------------------------------------------- */

/* Colunas fixas em vez de auto-fit: são seis valores, e 3×2 fecha a grade.
   O auto-fit dava 4+2 e deixava dois órfãos na segunda linha. */
.cocrie-valores {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
	list-style: none;
	margin: var(--wp--preset--spacing--9) 0 0;
	padding: 0;
}

@media (max-width: 900px) {
	.cocrie-valores {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.cocrie-valores {
		grid-template-columns: 1fr;
	}
}

/* Ícone e nome na mesma linha, texto embaixo atravessando as duas colunas.
   Grade em vez de wrapper no HTML: a ordem do DOM (ícone, nome, texto) já é a
   da leitura, então o posicionamento automático resolve — o pattern não muda. */
.cocrie-valor {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--m);
	transition: box-shadow var(--wp--custom--transicao);
}

/* O valor é um <li>: não leva a lugar nenhum. O hover anterior — borda
   marinho, sombra 2 e 3px de levantada — era vocabulário de card clicável e
   prometia um clique que não existe. Sobra a sombra 1, só o bastante pra
   confirmar que o cursor está sobre um cartão. */
.cocrie-valor:hover {
	background: color-mix(in srgb, var(--wp--preset--color--apoio) 5%, var(--wp--preset--color--superficie));
	box-shadow: var(--wp--custom--sombra--1);
}

.cocrie-valor__icone {
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
	object-position: left center;
}

.cocrie-valor__nome {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	font-variation-settings: "opsz" 48;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--wp--preset--color--apoio);
	margin: 0;
}

/* O "Co." é a marca dentro da palavra — mesmo laranja da logo. */
.cocrie-valor__co {
	color: var(--wp--preset--color--marca);
}

.cocrie-valor__texto {
	grid-column: 1 / -1;
	margin: var(--wp--preset--spacing--5) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--texto-suave);
}

/* --------------------------------------------------------------------------
   Prova — logos de clientes e depoimentos
   -------------------------------------------------------------------------- */

/* Nove nomes empilhados viravam bloco de texto: parágrafo de marcas, lido
   como poluição e não como prova. Em faixa, os mesmos nove dizem "são muitos"
   ocupando uma linha — a lista deixa de ser inventário e vira movimento.
   Margem própria em vez de 0: o blockGap do WordPress usa margin-block-start
   em layout flow, e um `margin: 0` aqui o venceria por especificidade. */
.cocrie-esteira {
	margin: var(--wp--preset--spacing--8) 0 0;
	overflow: hidden;
	/* Sem as pontas apagadas o nome não sai da faixa: ele é decepado na borda. */
	mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

/* O trilho carrega a lista duas vezes e anda exatamente metade de si mesmo —
   ao fim do ciclo o quadro é idêntico ao início e a volta não tem emenda.
   O respiro mora no li, não em gap: com gap, "metade" cairia meio vão fora do
   lugar e o laço daria um tranco a cada volta. */
.cocrie-esteira__trilho {
	display: flex;
	width: max-content;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	animation: cocrie-esteira 48s linear infinite;
}

.cocrie-esteira:hover .cocrie-esteira__trilho {
	animation-play-state: paused;
}

@keyframes cocrie-esteira {
	to {
		transform: translateX(-50%);
	}
}

.cocrie-esteira li {
	padding-inline: calc(var(--wp--preset--spacing--8) / 2);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	font-variation-settings: "opsz" 36;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--wp--preset--color--apoio);
}

.cocrie-campo-escuro .cocrie-esteira li {
	color: var(--wp--preset--color--texto-invertido);
}

/* Quem pediu menos movimento recebe a lista parada de sempre: a segunda volta
   some, porque fora do laço ela é o mesmo nome repetido. */
@media (prefers-reduced-motion: reduce) {
	.cocrie-esteira {
		mask-image: none;
	}

	.cocrie-esteira__trilho {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		row-gap: var(--wp--preset--spacing--5);
		/* Parada, a lista volta a ter borda esquerda: o meio-vão que era respiro
		   entre nomes viraria recuo do primeiro contra a coluna do texto. */
		margin-inline: calc(var(--wp--preset--spacing--8) / -2);
	}

	.cocrie-esteira li[aria-hidden="true"] {
		display: none;
	}
}

/* Faixa de prova na largura cheia da seção, abaixo da troca. Um depoimento
   sozinho era destaque na coluna da resposta; quatro ali disputavam 42rem e
   saíam apertados.
   26rem de mínimo é o que trava a grade em duas colunas nos 76rem: uma
   terceira pediria 3×26rem mais dois vãos, ou seja mais que a largura toda.
   Quatro colunas caberiam, e é justo o que não se quer — 18rem por depoimento
   é mais estreito do que eles já tinham. No telefone cai pra uma, sem media
   query. */
.cocrie-depoimentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: var(--wp--preset--spacing--7) var(--wp--preset--spacing--8);
	margin-block-start: var(--wp--preset--spacing--10);
}

.cocrie-depoimento {
	margin: var(--wp--preset--spacing--9) 0 0;
	padding: var(--wp--preset--spacing--6) 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--borda);
}

/* Quem separa os depoimentos é o gap da grade; o filete de cada um vira
   régua de topo repetida, e a margem de destaque solitário sai. */
.cocrie-depoimentos .cocrie-depoimento {
	margin: 0;
}

/* Na coluna larga é a coluna que dá a medida. Os 38ch do depoimento solitário
   valiam contra a resposta inteira; aqui parariam o texto em 365px dentro de
   uma célula de 588px, com um terço da célula vazio à direita. */
.cocrie-depoimentos blockquote {
	max-width: none;
}

.cocrie-depoimento blockquote {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--lg);
	font-style: italic;
	font-variation-settings: "opsz" 48, "SOFT" 20;
	line-height: 1.4;
	letter-spacing: -0.015em;
	margin: 0 0 var(--wp--preset--spacing--4);
	max-width: 38ch;
}

.cocrie-depoimento figcaption {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.cocrie-depoimento cite {
	font-style: normal;
	font-weight: 600;
	display: block;
}

/* --------------------------------------------------------------------------
   Cartões de post — o blog é conteúdo, não vitrine
   -------------------------------------------------------------------------- */

.cocrie-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: var(--wp--preset--spacing--8);
}

/* O layout "flow" do post-template soma margin-block-start nos filhos
   (menos o primeiro) por baixo do gap do grid — sobra empurra só os dois
   últimos posts pra baixo e desalinha a fileira. */
.cocrie-posts > * {
	margin-block-start: 0;
}

.cocrie-post-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.cocrie-post-link:hover .cocrie-post-titulo {
	color: var(--wp--preset--color--marca);
}

.cocrie-post-titulo {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	/* 1.2 apertava demais para título de três linhas, que é o caso do card 1. */
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: var(--wp--preset--spacing--4) 0 var(--wp--preset--spacing--2);
	transition: color var(--wp--custom--transicao);
}

/* O post-title com isLink herda o laranja de `elements.link`. Numa grade de
   nove, nove títulos laranja viram ruído — e o laranja é reservado para ação.
   Título fica marinho; a marca aparece no hover. */
.cocrie-post-titulo a {
	color: var(--wp--preset--color--apoio);
	text-decoration: none;
}

.cocrie-post-titulo a:hover {
	color: var(--wp--preset--color--marca);
}

.cocrie-posts .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* Resultado de busca é lista, não vitrine: o alcance inclui página, que não
   tem imagem destacada, e em grade a fileira sairia desigual. O filete é a
   mesma estrutura que organiza o FAQ e a troca — borda, não cartão. */
.cocrie-resultados > * {
	margin-block-start: 0;
	padding-block: var(--wp--preset--spacing--6);
	border-block-start: 1px solid var(--wp--preset--color--borda);
}

.cocrie-resultados > :last-child {
	border-block-end: 1px solid var(--wp--preset--color--borda);
}

/* O título abre a linha, encostado no filete: o margin-block-start que separa
   ele do excerpt vizinho na grade aqui não tem vizinho pra separar. */
.cocrie-resultados .cocrie-post-titulo {
	margin-block-start: 0;
}

/* Medida de leitura na linha inteira. A linha ocupa os 76rem da coluna e o
   filete tem que atravessar tudo, mas texto corrido em 1216px passa de 100
   caracteres e deixa de ser legível. */
.cocrie-resultados :is(.cocrie-post-titulo, .wp-block-post-excerpt) {
	max-width: var(--wp--custom--largura-leitura);
}

/* --------------------------------------------------------------------------
   Cabeçalho e rodapé
   -------------------------------------------------------------------------- */

/* O wp:template-part embrulha o cabeçalho num <header> próprio de 80px. Um
   elemento sticky só gruda enquanto o pai está em tela, e esse pai acaba na
   mesma linha que ele — o cabeçalho ia embora nos primeiros 80px de rolagem.
   display: contents dissolve o embrulho e devolve o cabeçalho para a altura
   inteira da página, sem tocar no markup do template. */
header.wp-block-template-part:has(> .cocrie-cabecalho) {
	display: contents;
}

.cocrie-cabecalho {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Fonte de verdade da altura: é o que a pergunta grudada usa para não
	   parar atrás do cabeçalho. Mexeu aqui, mexeu no token. */
	min-height: var(--cocrie-cabecalho-altura);
	border-bottom: 1px solid var(--wp--preset--color--borda);
}

/* O véu translúcido mora aqui, não no próprio cabeçalho. backdrop-filter cria
   bloco de contenção para position: fixed — com ele no header, o overlay do
   menu mobile resolvia inset:0 contra os 5rem do cabeçalho em vez da viewport
   e três dos quatro links caíam fora da borda inferior, invisíveis. */
.cocrie-cabecalho::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--fundo) 88%, transparent);
	backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(12px)) {
	.cocrie-cabecalho::before {
		background: var(--wp--preset--color--fundo);
	}
}

/* O hambúrguer é o controle de navegação primário do mobile inteiro e vinha
   com 24x24 — o mínimo cru do ícone, sem folga de dedo. */
.cocrie-cabecalho .wp-block-navigation__responsive-container-open {
	padding: 0.625rem;
	margin: -0.625rem;
}

/* Dentro do overlay não existe "à direita": a lista é uma coluna e começa na
   margem. O justifyContent: right do cabeçalho é regra de barra, não de menu —
   herdado, ele deixava os quatro links ragged, cada um começando num x.
   O core alinha a coluna por esta variável; é nela que se mexe, não no
   align-items dos três níveis que a leem. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
}

/* E a linha inteira vira alvo: no overlay o dedo acerta a linha, não a palavra. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-self: stretch;
}

/* O hambúrguer do core entra abaixo de 600px; o layout deste tema vira coluna
   única em 781px. Entre os dois sobrava uma faixa sem saída: os quatro links e
   o botão não cabiam lado a lado e quebravam em duas linhas cada, com linhas de
   base desencontradas. A faixa passa a usar o overlay, que é o que o resto do
   tema já faz nessa largura. */
@media (max-width: 780px) {
	.cocrie-cabecalho .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.cocrie-cabecalho .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* O X de fechar vinha com o mesmo 24x24 cru do hambúrguer. */
.wp-block-navigation__responsive-container-close {
	padding: 0.625rem;
	margin: -0.625rem;
}

.cocrie-cabecalho .wp-block-navigation a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* O CTA do cabeçalho é chrome, não conteúdo: ele acompanha o leitor pela página
   inteira e não pode ter o peso de um botão de seção. Volta ao tamanho de barra.
   Para caber em 14px sem reprovar AA o fundo é marca-hover (5,44:1) — o branco
   sobre marca só passa como texto grande, que é o que sustenta os botões de
   conteúdo em lg/700. Fundo escuro aqui, claro lá: a diferença é de papel. */
.cocrie-cabecalho__acao .wp-block-button__link {
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.625rem 1.25rem;
	background: var(--wp--custom--marca-hover);
}

.cocrie-cabecalho__acao .wp-block-button__link:hover {
	background: var(--wp--custom--marca-ativa);
}

.cocrie-cabecalho .wp-block-navigation a:hover {
	color: var(--wp--preset--color--marca);
}

/* Soluções abre no hover — o abrir/fechar é do core (hover e focus-within).
   A cor também: o core pinta o painel com as cores de overlay da navegação
   (apoio + texto invertido), as mesmas do menu mobile. Aqui só a forma, para
   o painel não sair com o retângulo cru do block library. */
.cocrie-cabecalho .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	border: 0;
	border-radius: 0.75rem;
	padding: 0.5rem;
	/* O core trava o painel em 200px e três dos sete nomes quebravam em duas
	   linhas. Nome de solução é rótulo, não frase: não quebra. */
	min-width: max-content;
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.24);
}

.cocrie-cabecalho .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	font-weight: 500;
	white-space: nowrap;
}

/* O laranja da marca não passa em AA sobre o apoio escuro; no painel escuro
   quem marca o item sob o cursor é o fundo, e o texto continua invertido. */
.cocrie-cabecalho .wp-block-navigation__submenu-container a:hover {
	background: rgb(255 255 255 / 0.12);
	color: var(--wp--preset--color--texto-invertido);
}

/* Dentro do overlay não há painel flutuante: a lista já vem aberta em coluna,
   e o que separa nível 1 de nível 2 é o recuo, não a moldura. */
.cocrie-cabecalho .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	box-shadow: none;
	border-radius: 0;
	padding: 0 0 0 1rem;
}

/* Sublinhado que cresce do centro no item de menu ativo. */
.cocrie-cabecalho .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--marca);
}

.cocrie-logo img {
	height: 2.25rem;
	width: auto;
	display: block;
}

/* O rosto acompanha. No topo, o lockup inteiro; descendo, ele dá lugar ao
   símbolo — os dois olhos e o sorriso — que fica te olhando enquanto você lê.
   É o conceito da página numa imagem: alguém sentado do outro lado.
   Caixa de largura fixa e cross-fade por dentro: encolher o lockup de verdade
   mexeria no flex do cabeçalho e daria solavanco a cada rolagem.
   Sem scroll-timeline (Firefox hoje) o ::after fica em opacity 0 e o lockup
   nunca sai — degrada para o cabeçalho de sempre, que é o certo. */
.cocrie-cabecalho .cocrie-logo {
	position: relative;
}

.cocrie-cabecalho .cocrie-logo::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	/* Quadrado porque o viewBox do símbolo é 120x120 — a marca já vem com a
	   folga dela dentro do arquivo. */
	aspect-ratio: 1 / 1;
	background: url("assets/img/marca.svg") left center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
}

@supports (animation-timeline: scroll()) {
	.cocrie-cabecalho .cocrie-logo img,
	.cocrie-cabecalho .cocrie-logo::after {
		animation: linear both;
		animation-timeline: scroll(root block);
		animation-range: 4rem 14rem;
	}

	.cocrie-cabecalho .cocrie-logo img {
		animation-name: cocrie-lockup-sai;
	}

	.cocrie-cabecalho .cocrie-logo::after {
		animation-name: cocrie-marca-entra;
	}
}

@keyframes cocrie-lockup-sai {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes cocrie-marca-entra {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* No rodapé o laranja em cada link vira ruído — a navegação é secundária.
   Fica em off-white, e o laranja volta só no hover.
   Precisa do seletor duplo: `.cocrie-campo-escuro a` (0-2-1) vencia
   `.cocrie-rodape a` (0-1-1) e pintava os 13 links de laranja. */
.cocrie-rodape.cocrie-campo-escuro a,
.cocrie-rodape a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	color: var(--wp--preset--color--texto-invertido);
	transition: color var(--wp--custom--transicao),
		text-decoration-color var(--wp--custom--transicao);
}

.cocrie-rodape.cocrie-campo-escuro a:hover,
.cocrie-rodape a:hover {
	color: var(--wp--custom--escuro--marca);
	text-decoration-color: currentColor;
}

/* Links do rodapé ganham respiro real entre si — o blockGap do wp:list não
   chega a virar espaçamento no <li>. */
.is-style-cocrie-lista-limpa li + li {
	margin-top: var(--wp--preset--spacing--3);
}

.cocrie-rodape .cocrie-logo img {
	height: 2.5rem;
	width: auto;
}

/* Ícones de redes sociais — mesma bolinha do WhatsApp flutuante, só que em
   contorno: aqui é navegação secundária, não um CTA. */
.cocrie-rodape .cocrie-redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: var(--wp--preset--spacing--5) 0 0;
	padding: 0;
	list-style: none;
}

.cocrie-rodape .cocrie-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wp--custom--escuro--borda);
	border-radius: var(--wp--custom--raio--total);
	text-decoration: none;
	transition: background-color var(--wp--custom--transicao),
		border-color var(--wp--custom--transicao),
		color var(--wp--custom--transicao);
}

.cocrie-rodape .cocrie-redes a:hover {
	background: var(--wp--custom--escuro--marca);
	border-color: var(--wp--custom--escuro--marca);
	color: var(--wp--preset--color--texto-invertido);
}

/* --------------------------------------------------------------------------
   Botões e listas sobre o campo marinho
   -------------------------------------------------------------------------- */

/* O botão vazado herda a cor do texto ao redor — no marinho ele precisa ser
   claro, no off-white ele precisa ser marinho. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	color: var(--wp--preset--color--apoio);
	background: transparent;
	transition: background-color var(--wp--custom--transicao),
		color var(--wp--custom--transicao);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--apoio);
	color: var(--wp--preset--color--texto-invertido);
}

.cocrie-campo-escuro .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--texto-invertido);
}

.cocrie-campo-escuro .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--texto-invertido);
	color: var(--wp--preset--color--apoio);
}

/* Lista sem marcador, para navegação de rodapé. */
.is-style-cocrie-lista-limpa {
	list-style: none;
	padding-left: 0;
}

/* --------------------------------------------------------------------------
   Motion — um momento autorado, não efeito espalhado.
   O conteúdo é visível por padrão; a animação só refina a entrada.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/* A pergunta não anima, e não é esquecimento: quem entra é a resposta,
		   que é a encenação certa da conversa — a pergunta já está lá quando a
		   resposta chega. */
		.cocrie-troca > :not(.cocrie-pergunta),
		.cocrie-ficha,
		.cocrie-etapa,
		.cocrie-valor,
		.cocrie-caminho {
			animation: cocrie-entrada linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		/* A linha entra da esquerda pra direita. Em timeline de rolagem
		   animation-delay não vale — quem atrasa é a faixa. */
		@media (min-width: 901px) {
			.cocrie-fichas > :nth-child(4n + 2),
			.cocrie-trilha > :nth-child(4n + 2),
			.cocrie-valores > :nth-child(3n + 2) {
				animation-range: entry 6% entry 61%;
			}

			.cocrie-fichas > :nth-child(4n + 3),
			.cocrie-trilha > :nth-child(4n + 3),
			.cocrie-valores > :nth-child(3n + 3) {
				animation-range: entry 12% entry 67%;
			}

			.cocrie-fichas > :nth-child(4n + 4),
			.cocrie-trilha > :nth-child(4n + 4) {
				animation-range: entry 18% entry 73%;
			}
		}

		/* A sala deriva devagar, como quem olha em volta. Anima
		   object-position, não transform: a foto desliza dentro da moldura que
		   já existe, sem wrapper, sem overflow e sem chance de mexer no layout. */
		#com-quem-falo .wp-block-image img {
			animation: cocrie-deriva linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

/* O cabeçalho descola: liso no topo, ganha filete e sombra ao sair do hero.
   Sem guard de reduced-motion de propósito — não há movimento nenhum aqui, só
   mudança de superfície acompanhando a rolagem. */
@supports (animation-timeline: scroll()) {
	.cocrie-cabecalho {
		animation: cocrie-cabecalho-descola linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 6rem;
	}
}

@keyframes cocrie-entrada {
	from {
		opacity: 0.3;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* O par do assets/js/cocrie.js — só para navegador sem scroll-timeline.
   As classes só existem se o script rodar, então quem está com JS desligado
   nunca cai no estado escondido. */
.cocrie-aguarda {
	opacity: 0.3;
	transform: translateY(1.5rem);
	transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.cocrie-entrou {
	opacity: 1;
	transform: none;
}

@keyframes cocrie-deriva {
	from {
		object-position: 50% 35%;
	}
	to {
		object-position: 50% 65%;
	}
}

@keyframes cocrie-cabecalho-descola {
	from {
		border-block-end-color: transparent;
		box-shadow: none;
	}
	to {
		border-block-end-color: var(--wp--preset--color--borda);
		box-shadow: var(--wp--custom--sombra--1);
	}
}

/* --------------------------------------------------------------------------
   WhatsApp flutuante — o contato de menor atrito, em toda página
   -------------------------------------------------------------------------- */

.cocrie-zap {
	position: fixed;
	right: var(--wp--preset--spacing--5);
	bottom: var(--wp--preset--spacing--5);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--raio--total);
	background: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--texto-invertido);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--wp--custom--sombra--3);
	transition: background-color 350ms ease-out;
}

/* Com o menu mobile aberto ela some: um botão flutuante por cima de um modal
   aberto é camada errada, e o alvo que o dedo procura ali é o menu. */
.has-modal-open .cocrie-zap {
	display: none;
}

.cocrie-zap:hover,
.cocrie-zap:focus-visible {
	background: var(--wp--custom--marca-hover);
}

.cocrie-zap:focus-visible {
	outline: 2px solid var(--wp--custom--foco);
	outline-offset: 3px;
}

.cocrie-zap__icone {
	flex: none;
}

/* Bolinha por padrão — o rótulo só aparece no hover/foco, pra não tomar
   espaço fixo da tela. Ícone do WhatsApp já é reconhecido sozinho.
   grid-template-columns 0fr→1fr em vez de max-width: acompanha a largura
   real do texto, sem "sobra" de animação depois que o texto já apareceu. */
.cocrie-zap__texto {
	display: grid;
	grid-template-columns: 0fr;
	margin-left: 0;
	opacity: 0;
	transition: grid-template-columns 350ms ease-out,
		margin-left 350ms ease-out,
		opacity 350ms ease-out 80ms;
}

.cocrie-zap__texto-inner {
	overflow: hidden;
	white-space: nowrap;
}

.cocrie-zap:hover .cocrie-zap__texto,
.cocrie-zap:focus-visible .cocrie-zap__texto {
	grid-template-columns: 1fr;
	margin-left: var(--wp--preset--spacing--3);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Contato — dois caminhos, um deles claramente o principal
   -------------------------------------------------------------------------- */

.cocrie-caminhos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--5);
	margin-top: var(--wp--preset--spacing--9);
}

.cocrie-caminho {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--7);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--m);
	background: var(--wp--preset--color--superficie);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--wp--custom--transicao),
		box-shadow var(--wp--custom--transicao);
}

.cocrie-caminho:hover {
	border-color: var(--wp--preset--color--apoio);
	box-shadow: var(--wp--custom--sombra--2);
}

/* O formulário é o caminho preferido: chega qualificado. O WhatsApp fica
   disponível sem competir visualmente. */
.cocrie-caminho--principal {
	background: var(--wp--preset--color--apoio);
	border-color: var(--wp--preset--color--apoio);
	color: var(--wp--preset--color--texto-invertido);
}

.cocrie-caminho__titulo {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	font-variation-settings: "opsz" 48;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.cocrie-caminho__texto {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--texto-suave);
}

.cocrie-caminho--principal .cocrie-caminho__texto {
	color: var(--wp--custom--escuro--texto-suave);
}

.cocrie-caminho__acao {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--marca);
}

.cocrie-caminho--principal .cocrie-caminho__acao {
	color: var(--wp--custom--escuro--marca);
}

.cocrie-caminho__acao::after {
	content: " →";
}

.cocrie-casa {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--7);
	margin-top: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--7);
	border-top: 1px solid var(--wp--preset--color--borda);
}

.cocrie-casa p {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

/* O resto do rótulo mora junto com .cocrie-indice__titulo, lá em cima. */
.cocrie-casa__rotulo {
	margin: 0 0 var(--wp--preset--spacing--2);
}

/* --------------------------------------------------------------------------
   Formulários — mantido para formulários nativos (busca, comentário)
   -------------------------------------------------------------------------- */

.cocrie-form {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	max-width: 34rem;
}

.cocrie-form label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--2);
}

.cocrie-form :is(input, select, textarea) {
	width: 100%;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--texto);
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--borda-forte);
	border-radius: var(--wp--custom--raio--p);
	transition: border-color var(--wp--custom--transicao);
}

.cocrie-form :is(input, select, textarea):hover {
	border-color: var(--wp--preset--color--apoio);
}

.cocrie-form :is(input, select, textarea)::placeholder {
	color: var(--wp--preset--color--texto-suave);
}

.cocrie-form :is(input, select, textarea):user-invalid {
	border-color: var(--wp--custom--aviso--erro);
}

.cocrie-form :is(input, select, textarea):user-invalid + .cocrie-erro {
	display: block;
}

.cocrie-erro {
	display: none;
	margin-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--aviso--erro);
}

/* --------------------------------------------------------------------------
   Artigo do blog — a capa abre a leitura, o texto sobe por cima dela

   A capa é a arte de card do post, com o título já escrito nela. Em tamanho
   de pôster ela duplicava o <h1> logo acima; aqui entra como faixa, e o card
   de texto come a borda de baixo — a arte vira abertura da leitura em vez de
   segunda capa.
   -------------------------------------------------------------------------- */

/* Respiro curto abaixo da barra: encostada nela a capa vira faixa do topo e os
   cantos arredondados brigam com a borda reta do cabeçalho. Solta, ela lê como
   cartão — a mesma linguagem da folha que vem por cima. */
.cocrie-artigo__capa {
	width: min(60rem, calc(100% - 2 * var(--wp--preset--spacing--6)));
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--7);
}

/* O card é sempre um --recuo mais estreito que a capa de cada lado, até os dois
   baterem no teto: é essa diferença que faz a sobreposição ler como card sobre
   imagem em vez de dois blocos empilhados. Sem amarrar um ao outro, entre 880 e
   1010px de viewport a capa encosta no teto de 60rem enquanto o card ainda
   cresce, os dois quase se igualam e a sobreposição desaparece.
   No teto, 46rem de texto mais 3rem de recuo de cada lado: a coluna de leitura
   cai exatamente sob o título, que também é 46rem centrado no campo escuro.
   z-index porque a sombra precisa pintar sobre a capa, não sob ela. */
.cocrie-artigo__card {
	--recuo: var(--wp--preset--spacing--9);

	position: relative;
	z-index: 1;
	width: min(
		calc(46rem + 2 * var(--recuo)),
		calc(100% - 2 * var(--wp--preset--spacing--6) - 2 * var(--recuo))
	);
	margin-inline: auto;
	margin-block-start: calc(-1 * var(--wp--preset--spacing--9));
	padding: var(--wp--preset--spacing--10) var(--recuo) var(--wp--preset--spacing--11);
	background-color: var(--wp--preset--color--superficie);
	border-radius: var(--wp--custom--raio--g);
	box-shadow: var(--wp--custom--sombra--3);
}

/* O recuo lateral é do card. post-content é constrained e o WordPress lhe dá
   has-global-padding, que somaria um segundo recuo por dentro. */
.cocrie-artigo__card > .entry-content {
	margin-block-start: var(--wp--preset--spacing--8);
	padding-inline: 0;
}

/* A folha carrega o próprio cabeçalho — o campo escuro do topo era herança do
   template, não do artigo, e a mesma faixa em toda página do site. O filete
   fecha a identificação do post: sem ele, título, autor e primeiro parágrafo
   leem como um bloco só. */
.cocrie-artigo__meta {
	padding-block-end: var(--wp--preset--spacing--7);
	border-block-end: 1px solid var(--wp--preset--color--borda);
}

/* A saída da leitura. Suave por padrão pra não competir com o título — o
   laranja fica pro hover. */
.cocrie-voltar a {
	color: var(--wp--preset--color--texto-suave);
	text-decoration: none;
}

.cocrie-voltar a:hover {
	color: var(--wp--preset--color--marca);
}

@media (max-width: 600px) {
	/* 3/1 numa largura de 342px dá uma faixa de 114px e a arte fica ilegível.
	   No estreito a capa volta pro 16/9 nativo.
	   !important porque o aspectRatio do bloco sai como style inline no
	   <figure> — é ele que manda na altura, o <img> dentro é height:100%. */
	.cocrie-artigo__capa {
		aspect-ratio: 16 / 9 !important;
	}

	/* No telefone o card acompanha a largura da capa: descontar mais um recuo
	   de cada lado deixaria a coluna de leitura em 246px. */
	.cocrie-artigo__card {
		--recuo: var(--wp--preset--spacing--6);

		width: calc(100% - 2 * var(--wp--preset--spacing--6));
		margin-block-start: calc(-1 * var(--wp--preset--spacing--6));
		padding-block: var(--wp--preset--spacing--9) var(--wp--preset--spacing--10);
	}
}

/* --------------------------------------------------------------------------
   Paginação do blog — números em bolinha, a mesma linguagem dos ícones
   do rodapé, com a página atual preenchida na cor da marca.
   -------------------------------------------------------------------------- */

.wp-block-query-pagination {
	align-items: center;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--wp--preset--spacing--2);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--total);
	color: var(--wp--preset--color--texto);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--wp--custom--transicao),
		border-color var(--wp--custom--transicao),
		color var(--wp--custom--transicao);
}

a.page-numbers:hover {
	border-color: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--marca);
}

.page-numbers.current {
	background: var(--wp--preset--color--marca);
	border-color: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--texto-invertido);
}

.page-numbers.dots {
	border: none;
	min-width: auto;
	color: var(--wp--preset--color--texto-suave);
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	font-weight: 600;
	color: var(--wp--preset--color--texto);
	text-decoration: none;
	transition: color var(--wp--custom--transicao);
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--marca);
}

/* --------------------------------------------------------------------------
   Busca e tags do blog
   -------------------------------------------------------------------------- */

/* O core dá border ao __inside-wrapper (button-inside) e zera a do __input —
   eu tinha posto borda nos dois, aí sobrava a cinza padrão do core por fora
   da pill laranja. A borda vive só no wrapper. */
.cocrie-busca {
	max-width: 24rem;
}

.cocrie-busca .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--borda-forte);
	border-radius: var(--wp--custom--raio--total);
	background: var(--wp--preset--color--superficie);
	transition: border-color var(--wp--custom--transicao);
}

.cocrie-busca .wp-block-search__inside-wrapper:hover,
.cocrie-busca .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--apoio);
}

.cocrie-busca .wp-block-search__input {
	padding-inline: var(--wp--preset--spacing--3);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--texto);
	background: transparent;
}

.cocrie-busca .wp-block-search__button {
	border-radius: var(--wp--custom--raio--total);
	background: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--texto-invertido);
	transition: background-color var(--wp--custom--transicao);
}

.cocrie-busca .wp-block-search__button:hover {
	background: var(--wp--custom--marca-hover);
}

.cocrie-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	list-style: none;
	/* Mesma especificidade do margin-block-start que o WP injeta pro blockGap
	   do grupo — quem carrega por último no <head> vencia e zerava o respiro
	   entre a busca e as tags. Assume o espaço aqui, direto. */
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
}

.cocrie-tags a {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--total);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-suave);
	text-decoration: none;
	transition: background-color var(--wp--custom--transicao),
		border-color var(--wp--custom--transicao),
		color var(--wp--custom--transicao);
}

.cocrie-tags a:hover {
	background: var(--wp--preset--color--marca);
	border-color: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--texto-invertido);
}