/*
 * O visual das páginas do catálogo (/agentes-de-ia e as de plataforma, objetivo
 * e agente), das auditorias em docs/notas/catalogo-auditoria-de-design.md. Só os
 * blocos modelo-* pedem este arquivo (o "style" do block.json), então a home e
 * as outras páginas não o carregam.
 *
 * Paleta (rodada 2, a "B"): a tinta da marca (#1a1a2e) no topo e nos cartões de
 * destaque, o laranja (#cf4a0c: texto branco a 4.53:1) em toda ação, neutros
 * frios no resto. O roxo fica no header e no logo, que são do site todo.
 *
 * Raios (uma regra só): controles (botões, campos, chips) 12px; cards, painéis
 * e grupos 20px; selos 8px; logos em "squircle" (28%); números e o "e" em
 * círculo.
 *
 * Fica no @layer components, como as classes de componente do Tailwind: uma
 * utilidade no mesmo elemento ainda vence, e o [hidden] do preflight (base,
 * !important) continua escondendo os cards fora da leva. A ordem das camadas é
 * a do utilitarios.css, repetida aqui porque este arquivo pode chegar antes
 * dele (no <head> e no iframe do editor): vale a 1ª declaração.
 */

@layer properties, theme, base, components, utilities;

@layer components {
	:root {
		--cat-tinta: var(--foreground);
		--cat-grafite: #4b5563;
		--cat-lapis: #5f6673;
		--cat-papel: #f4f5f8;
		--cat-papel-forte: #e9ebf1;
		--cat-linha: rgb(26 26 46 / 0.08);
		--cat-linha-forte: rgb(26 26 46 / 0.16);
		--cat-escuro: #1a1a2e;
		--cat-acento: #cf4a0c;
		--cat-acento-rgb: 207 74 12;
		--cat-acento-forte: #b13e0a;
		--cat-acento-suave: #ffedd5;
		--cat-acento-suave-forte: #fed7aa;
		--cat-acento-escuro: #9a3412;
		--cat-acento-texto: #fff;
		--cat-acento-fundo: #fff7ed;
		/* O texto de link no destaque: o laranja fundo no claro, o claro no escuro. */
		--cat-link: var(--cat-acento-forte);
		--cat-chip-borda: transparent;
		--cat-verde: #047857;
		--cat-verde-fundo: #ecfdf5;
		--cat-verde-linha: #a7f3d0;
		/* Sombras na tinta da marca, luz de cima; sem brilho colorido. */
		--cat-sombra-1: 0 1px 2px rgb(26 26 46 / 0.06), 0 1px 1px rgb(26 26 46 / 0.03);
		--cat-sombra-2: 0 2px 6px -2px rgb(26 26 46 / 0.08), 0 18px 36px -20px rgb(26 26 46 / 0.3);
		--cat-raio-controle: 0.75rem;
		--cat-raio-card: 1.25rem;
		--cat-raio-selo: 0.5rem;
		--cat-display: var(--font-bricolage), var(--font-geist-sans), system-ui, sans-serif;
	}

	/* Os escuros (o topo, o nº 1 dos populares e a chamada): os tokens de texto e de linha mudam só aqui. */
	:is(.cat-heroi, .cat-chamada, .cat-destaque--grande) {
		--cat-tinta: #fff;
		--cat-grafite: #c9cbdc;
		--cat-lapis: #a6a9c2;
		--cat-linha: rgb(255 255 255 / 0.1);
		--cat-linha-forte: rgb(255 255 255 / 0.26);
		--cat-papel: rgb(255 255 255 / 0.06);
		--cat-papel-forte: rgb(255 255 255 / 0.1);
		--cat-acento-suave: rgb(255 255 255 / 0.1);
		--cat-acento-suave-forte: rgb(255 255 255 / 0.18);
		--cat-acento-escuro: #fff;
		--cat-link: #fdba74;
		--cat-chip-borda: rgb(255 255 255 / 0.26);
		color: var(--cat-tinta);
	}

	/* Os brancos dentro do escuro (o fluxo, o painel, a busca, os logos) voltam aos tokens claros. */
	:is(.cat-heroi, .cat-chamada, .cat-destaque--grande) :is(.cat-fluxo, .cat-painel, .cat-busca, .cat-tile, .cat-mosaico__item) {
		--cat-tinta: var(--foreground);
		--cat-grafite: #4b5563;
		--cat-lapis: #5f6673;
		--cat-linha: rgb(26 26 46 / 0.08);
		--cat-linha-forte: rgb(26 26 46 / 0.16);
		--cat-papel: #f4f5f8;
		--cat-acento-suave: #ffedd5;
		--cat-acento-suave-forte: #fed7aa;
		--cat-acento-escuro: #9a3412;
		--cat-link: var(--cat-acento-forte);
		--cat-chip-borda: transparent;
		color: var(--cat-tinta);
	}

	@media (prefers-reduced-motion: no-preference) {
		html:has(.cat-heroi) {
			scroll-behavior: smooth;
		}
	}

	/* ------------------------------------------------------------------ Tipos */

	.cat-h1,
	.cat-h2,
	.cat-h3 {
		font-family: var(--cat-display);
		color: var(--cat-tinta);
		text-wrap: balance;
	}

	.cat-h1 {
		font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem);
		font-weight: 700;
		line-height: 1.02;
		letter-spacing: -0.035em;
	}

	.cat-h2 {
		font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.375rem);
		font-weight: 700;
		line-height: 1.08;
		letter-spacing: -0.03em;
	}

	.cat-h3 {
		font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
		font-weight: 600;
		line-height: 1.18;
		letter-spacing: -0.02em;
	}

	.cat-lead {
		max-width: 60ch;
		font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
		line-height: 1.6;
		color: var(--cat-grafite);
		text-wrap: pretty;
	}

	.cat-texto {
		max-width: 65ch;
		font-size: 1rem;
		line-height: 1.65;
		color: var(--cat-grafite);
		text-wrap: pretty;
	}

	.cat-texto > * + * {
		margin-top: 0.875rem;
	}

	.cat-texto strong {
		color: var(--cat-tinta);
	}

	.cat-rotulo {
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		color: var(--cat-lapis);
	}

	.cat-num {
		font-variant-numeric: tabular-nums;
	}

	/* ---------------------------------------------------------------- Seções */

	/* O fundo do template é o cinza (bg-secondary): a seção comum é branca. */
	.cat-secao {
		padding-block: 3.5rem 4rem;
		background: #fff;
	}

	.cat-secao--papel {
		background: var(--cat-papel);
	}

	/* A seção logo depois do topo: começa perto dele, para a dobra. */
	.cat-secao--colada {
		padding-top: 1.5rem;
	}

	.cat-cabecalho {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1rem 2rem;
		margin-bottom: 1.25rem;
	}

	.cat-cabecalho__texto {
		display: flex;
		min-width: 0;
		max-width: 46rem;
		flex-direction: column;
		gap: 0.625rem;
	}

	@media (min-width: 640px) {
		.cat-secao {
			padding-block: 4.5rem 5.25rem;
		}

		.cat-secao--colada {
			padding-top: 2.25rem;
		}

		.cat-cabecalho {
			margin-bottom: 2rem;
		}
	}

	@media (min-width: 1024px) {
		.cat-secao {
			padding-block: 5.5rem 6.25rem;
		}

		.cat-secao--colada {
			padding-top: 2.5rem;
		}
	}

	/* ---------------------------------------------------- Botões, links, foco */

	.cat-botao {
		display: inline-flex;
		height: 3rem;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding-inline: 1.25rem;
		border-radius: var(--cat-raio-controle);
		background: var(--cat-acento);
		color: var(--cat-acento-texto);
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: -0.005em;
		white-space: nowrap;
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px rgb(26 26 46 / 0.16);
		transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}

	.cat-botao:hover {
		background: var(--cat-acento-forte);
	}

	.cat-botao:active {
		transform: scale(0.98);
	}

	.cat-botao--grande {
		height: 3.25rem;
		padding-inline: 1.5rem;
		font-size: 1.0625rem;
	}

	/* No celular, os dois botões do topo cabem lado a lado quando os rótulos são curtos. */
	@media (max-width: 479px) {
		.cat-botao--grande {
			height: 3rem;
			padding-inline: 1rem;
			font-size: 1rem;
		}

		.cat-acoes {
			gap: 0.5rem;
		}
	}

	/* O secundário no claro: branco com contorno. */
	.cat-botao--claro {
		background: #fff;
		color: var(--cat-tinta);
		box-shadow: inset 0 0 0 1px var(--cat-linha-forte), var(--cat-sombra-1);
	}

	.cat-botao--claro:hover {
		background: var(--cat-papel);
		box-shadow: inset 0 0 0 1px var(--cat-tinta), var(--cat-sombra-1);
	}

	/* O secundário no escuro: vidro claro com contorno, ainda com cara de botão. */
	.cat-botao--vidro {
		background: rgb(255 255 255 / 0.08);
		color: #fff;
		box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
	}

	.cat-botao--vidro:hover {
		background: rgb(255 255 255 / 0.16);
	}

	.cat-botao svg {
		width: 1.125rem;
		height: 1.125rem;
		flex-shrink: 0;
	}

	/* Link de texto: sublinhado sempre (é texto que leva a algum lugar), sem seta. */
	.cat-link {
		border-radius: 0.25rem;
		font-weight: 600;
		color: var(--cat-tinta);
		text-decoration-line: underline;
		text-decoration-color: var(--cat-linha-forte);
		text-decoration-thickness: 1.5px;
		text-underline-offset: 0.25em;
		transition: color 0.2s ease, text-decoration-color 0.2s ease;
	}

	.cat-link:hover {
		text-decoration-color: currentColor;
	}

	.cat-link--acento {
		color: var(--cat-link);
	}

	:where(.cat-heroi, .cat-secao, .cat-barra-fixa) :is(a, button, summary):focus-visible {
		outline: 2px solid var(--cat-acento);
		outline-offset: 3px;
	}

	/* A trilha de navegação (Início › Agentes de IA › …). */
	.cat-trilha {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 0.5rem;
		color: var(--cat-lapis);
		font-size: 1rem;
		font-weight: 500;
	}

	.cat-trilha li {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.cat-trilha a:hover {
		color: var(--cat-tinta);
	}

	.cat-trilha [aria-current] {
		color: var(--cat-grafite);
	}

	/* ------------------------------------------------------------------ Topo */

	/* O topo é o bloco escuro da página: a tinta da marca com o laranja ao fundo. */
	.cat-heroi {
		position: relative;
		overflow: hidden;
		padding-block: 1.5rem 2.25rem;
		background:
			radial-gradient(50rem 28rem at 90% -22%, rgb(var(--cat-acento-rgb) / 0.26), transparent 62%),
			radial-gradient(40rem 22rem at -10% 120%, rgb(255 255 255 / 0.05), transparent 60%),
			var(--cat-escuro);
	}

	.cat-heroi__grade {
		display: grid;
		gap: 2rem;
	}

	.cat-heroi__texto {
		display: flex;
		min-width: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.cat-heroi__lado {
		display: none;
		min-width: 0;
	}

	.cat-heroi__lado--sempre {
		display: block;
	}

	@media (min-width: 1024px) {
		.cat-so-celular {
			display: none;
		}
	}

	.cat-icone-pequeno {
		width: 2.75rem;
		height: 2.75rem;
	}

	.cat-objetivo-rotulo {
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	.cat-acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
	}

	@media (min-width: 640px) {
		.cat-heroi {
			padding-block: 2rem 2.75rem;
		}

		.cat-heroi__texto {
			gap: 1.125rem;
		}
	}

	@media (min-width: 1024px) {
		.cat-heroi {
			padding-block: 2.25rem 3rem;
		}

		.cat-heroi__grade {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			align-items: center;
			gap: 3.5rem;
		}

		/* No agente, até 1279px, as colunas iguais: o painel do fluxo precisa da largura para caber na dobra. */
		.cat-heroi__grade--alto {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			gap: 3rem;
		}

		.cat-heroi__lado {
			display: block;
		}
	}

	@media (min-width: 1280px) {
		.cat-heroi__grade--alto {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		}
	}

	/* O selo da plataforma ao lado do H1. */
	.cat-identidade {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.cat-identidade > :last-child {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.375rem;
	}

	/* No celular, no topo, o selo encolhe e vai ao lado do rótulo; o H1 ganha a largura toda. */
	@media (max-width: 639px) {
		.cat-heroi .cat-identidade {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			align-items: center;
			gap: 0.75rem;
		}

		.cat-heroi .cat-identidade > :last-child {
			display: contents;
		}

		.cat-heroi .cat-identidade > :last-child > .cat-h1 {
			grid-column: 1 / -1;
		}

		.cat-heroi .cat-identidade .cat-tile--g {
			width: 2.75rem;
			height: 2.75rem;
		}

		.cat-heroi .cat-identidade .cat-tile--g > * {
			transform: scale(0.64);
		}
	}

	/* ------------------------------------------------------------- A busca */

	/* O rótulo fica em cima do campo; o campo só mostra um exemplo curto. */
	.cat-campo {
		display: flex;
		width: 100%;
		max-width: 40rem;
		flex-direction: column;
		gap: 0.5rem;
	}

	.cat-campo__rotulo {
		color: var(--cat-tinta);
		font-size: 1rem;
		font-weight: 600;
	}

	.cat-busca {
		position: relative;
		display: flex;
		width: 100%;
		max-width: 40rem;
		align-items: center;
		border-radius: var(--cat-raio-controle);
		background: #fff;
		box-shadow: inset 0 0 0 1px var(--cat-linha-forte), var(--cat-sombra-1);
		transition: box-shadow 0.2s ease;
	}

	.cat-busca:focus-within {
		box-shadow: inset 0 0 0 2px var(--cat-acento), var(--cat-sombra-1);
	}

	.cat-busca > svg {
		position: absolute;
		left: 1.125rem;
		width: 1.375rem;
		height: 1.375rem;
		color: var(--cat-lapis);
		pointer-events: none;
	}

	.cat-busca__campo {
		height: 3.5rem;
		min-width: 0;
		flex: 1;
		padding: 0 0.75rem 0 3.25rem;
		border: 0;
		border-radius: var(--cat-raio-controle);
		background: transparent;
		color: var(--cat-tinta);
		font-size: 1.0625rem;
		outline: none;
	}

	/* O exemplo do campo com contraste AA (4.8:1 no branco), não um cinza esmaecido. */
	.cat-busca__campo::placeholder {
		color: var(--cat-lapis);
		opacity: 1;
	}

	.cat-busca .cat-botao {
		height: 2.75rem;
		margin-right: 0.375rem;
		padding-inline: 1.125rem;
	}

	.cat-busca--pequena {
		max-width: 22rem;
		box-shadow: inset 0 0 0 1px var(--cat-linha-forte);
	}

	.cat-busca--pequena > svg {
		left: 0.875rem;
		width: 1.125rem;
		height: 1.125rem;
	}

	.cat-busca--pequena .cat-busca__campo {
		height: 2.75rem;
		padding-left: 2.625rem;
		font-size: 1rem;
	}

	@media (max-width: 479px) {
		.cat-busca .cat-botao span {
			display: none;
		}

		.cat-busca .cat-botao {
			width: 2.75rem;
			padding-inline: 0;
		}

		.cat-busca__campo {
			font-size: 1rem;
		}
	}

	@media (min-width: 640px) {
		.cat-busca__campo {
			height: 3.75rem;
			font-size: 1.125rem;
		}

		.cat-busca .cat-botao {
			height: 3rem;
		}
	}

	.cat-busca-grande {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 1.75rem;
	}

	.cat-chips {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
	}

	/* O chip é um botão: fundo cheio no tom do destaque (no escuro, vidro com contorno). */
	.cat-chip {
		display: inline-flex;
		min-height: 2.25rem;
		align-items: center;
		gap: 0.375rem;
		padding-inline: 0.875rem;
		border-radius: var(--cat-raio-controle);
		background: var(--cat-acento-suave);
		color: var(--cat-acento-escuro);
		font-size: 1rem;
		font-weight: 600;
		box-shadow: inset 0 0 0 1px var(--cat-chip-borda);
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	}

	.cat-chip:hover {
		background: var(--cat-acento-suave-forte);
	}

	.cat-chip:active {
		transform: scale(0.97);
	}

	/* Os logos das plataformas com agente, ao lado da busca do catálogo. */
	.cat-mosaico {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.875rem;
		max-width: 28rem;
		margin-left: auto;
	}

	.cat-mosaico > :nth-child(4n + 2),
	.cat-mosaico > :nth-child(4n + 4) {
		transform: translateY(1.25rem);
	}

	.cat-mosaico__item {
		display: flex;
		aspect-ratio: 1;
		align-items: center;
		justify-content: center;
		border-radius: 28%;
		background: #fff;
		box-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.5);
		transition: translate 0.2s ease;
	}

	.cat-mosaico__item:hover {
		translate: 0 -3px;
	}

	/* --------------------------------------------- Os tiles e logos juntos */

	.cat-tile {
		display: inline-flex;
		width: 2.75rem;
		height: 2.75rem;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		border-radius: 28%;
		background: #fff;
		box-shadow: inset 0 0 0 1px var(--cat-linha), var(--cat-sombra-1);
	}

	.cat-tile--p {
		width: 2.25rem;
		height: 2.25rem;
	}

	.cat-tile--g {
		width: 4rem;
		height: 4rem;
	}

	@media (min-width: 640px) {
		.cat-tile--g {
			width: 4.5rem;
			height: 4.5rem;
		}
	}

	.cat-logos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.375rem;
	}

	.cat-logos__mais {
		color: var(--cat-grafite);
		font-size: 1rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* -------------------------------------------------- O card do agente */

	.cat-grade {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.875rem;
	}

	@media (min-width: 640px) {
		.cat-grade {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
		}
	}

	@media (min-width: 1024px) {
		.cat-grade {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.25rem;
		}
	}

	.cat-cartao {
		display: flex;
		height: 100%;
		flex-direction: column;
		padding: 1.25rem 1.25rem 0;
		border-radius: var(--cat-raio-card);
		background: #fff;
		color: var(--cat-tinta);
		box-shadow: var(--cat-sombra-1);
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

	/* Numa seção branca, o card ganha o fio que o fundo cinza dispensa. */
	.cat-secao:not(.cat-secao--papel) .cat-cartao {
		box-shadow: inset 0 0 0 1px var(--cat-linha), var(--cat-sombra-1);
	}

	.cat-cartao:hover {
		transform: translateY(-2px);
		box-shadow: var(--cat-sombra-2);
	}

	.cat-cartao:active {
		transform: translateY(0) scale(0.995);
	}

	.cat-cartao__corpo {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0.5rem;
		padding: 1rem 0 1.25rem;
	}

	.cat-cartao__titulo {
		font-family: var(--cat-display);
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.02em;
		text-wrap: balance;
	}

	.cat-cartao__resumo {
		display: -webkit-box;
		overflow: hidden;
		color: var(--cat-grafite);
		font-size: 1rem;
		line-height: 1.6;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.cat-cartao__rodape {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding-block: 0.875rem 1rem;
		border-top: 1px solid var(--cat-linha);
		color: var(--cat-grafite);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.4;
	}

	.cat-cartao__rodape > span {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.cat-cartao__rodape svg,
	.cat-destaque__fim svg {
		width: 1.125rem;
		height: 1.125rem;
		flex-shrink: 0;
		color: var(--cat-lapis);
		transition: color 0.2s ease, transform 0.2s ease;
	}

	.cat-cartao:hover .cat-cartao__rodape svg,
	.cat-destaque:hover .cat-destaque__fim svg {
		color: var(--cat-acento);
		transform: translateX(3px);
	}

	.cat-mais {
		display: flex;
		justify-content: center;
		margin-top: 1.75rem;
	}

	.cat-vazio {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
		padding: 1.75rem;
		border: 1px dashed var(--cat-linha-forte);
		border-radius: var(--cat-raio-card);
		background: #fff;
	}

	.cat-vazio__texto {
		max-width: 52ch;
		color: var(--cat-tinta);
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.5;
	}

	/* ------------------------------------------- Os populares, em bento */

	.cat-bento {
		display: flex;
		gap: 0.75rem;
		margin-inline: -1rem;
		padding: 0.25rem 1rem 0.75rem;
		overflow-x: auto;
		scroll-padding-inline: 1rem;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.cat-bento::-webkit-scrollbar {
		display: none;
	}

	.cat-bento > * {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	@media (min-width: 768px) {
		.cat-bento {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
			margin-inline: 0;
			padding: 0;
			overflow: visible;
		}

		.cat-bento > :first-child {
			grid-column: span 2;
		}
	}

	@media (min-width: 1024px) {
		.cat-bento {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.25rem;
		}

		.cat-bento > :first-child {
			grid-row: span 2;
		}
	}

	.cat-destaque {
		position: relative;
		display: flex;
		height: 100%;
		min-height: 15rem;
		flex-direction: column;
		gap: 0.875rem;
		overflow: hidden;
		padding: 1.5rem;
		border-radius: var(--cat-raio-card);
		background: #fff;
		color: var(--cat-tinta);
		box-shadow: inset 0 0 0 1px var(--cat-linha), var(--cat-sombra-1);
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

	.cat-destaque:hover {
		transform: translateY(-3px);
		box-shadow: inset 0 0 0 1px var(--cat-linha), var(--cat-sombra-2);
	}

	/* O 2º e o 3º no laranja bem claro: o bento não é só branco sobre branco. */
	.cat-destaque--tom {
		background: var(--cat-acento-fundo);
		box-shadow: inset 0 0 0 1px rgb(var(--cat-acento-rgb) / 0.14);
	}

	.cat-destaque__titulo {
		font-family: var(--cat-display);
		font-size: 1.3125rem;
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: -0.02em;
		text-wrap: balance;
	}

	.cat-destaque__resumo {
		display: -webkit-box;
		overflow: hidden;
		color: var(--cat-grafite);
		font-size: 1rem;
		line-height: 1.6;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.cat-destaque__fim {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-top: auto;
		padding-top: 0.875rem;
		border-top: 1px solid var(--cat-linha);
		color: var(--cat-grafite);
		font-size: 1rem;
		font-weight: 600;
	}

	/* O nº 1: o cartão escuro, com o laranja ao fundo. */
	.cat-destaque--grande {
		background:
			radial-gradient(30rem 18rem at 100% 0%, rgb(var(--cat-acento-rgb) / 0.3), transparent 65%),
			var(--cat-escuro);
		box-shadow: none;
	}

	.cat-destaque--grande:hover {
		box-shadow: var(--cat-sombra-2);
	}

	.cat-destaque--grande .cat-destaque__fim svg {
		color: var(--cat-link);
	}

	.cat-destaque__entrega {
		display: none;
	}

	@media (min-width: 768px) {
		.cat-destaque--grande {
			padding: 2rem;
		}

		.cat-destaque--grande .cat-destaque__titulo {
			font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem);
			line-height: 1.06;
			letter-spacing: -0.03em;
		}

		.cat-destaque--grande .cat-destaque__resumo {
			max-width: 46ch;
			font-size: 1.0625rem;
			-webkit-line-clamp: 4;
		}

		/* No nº 1, a entrega fica perto do rodapé: o título em cima, o resultado embaixo. */
		.cat-destaque__entrega {
			display: flex;
			max-width: 46ch;
			gap: 0.625rem;
			margin-top: auto;
			padding: 0.875rem 1rem;
			border-radius: var(--cat-raio-controle);
			background: rgb(255 255 255 / 0.08);
			color: var(--cat-grafite);
			font-size: 1rem;
			line-height: 1.55;
		}

		.cat-destaque__entrega + .cat-destaque__fim {
			margin-top: 0;
		}

		.cat-destaque__entrega svg {
			width: 1.125rem;
			height: 1.125rem;
			flex-shrink: 0;
			margin-top: 0.125rem;
			color: var(--cat-link);
		}
	}

	/* ---------------------------------------------- A vitrine de plataformas */

	.cat-vitrine__item {
		display: flex;
		width: 6.75rem;
		flex-shrink: 0;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		padding: 0.25rem;
		border-radius: var(--cat-raio-card);
		text-align: center;
		scroll-snap-align: start;
	}

	.cat-vitrine__logo {
		display: flex;
		width: 5.5rem;
		height: 5.5rem;
		align-items: center;
		justify-content: center;
		border-radius: 28%;
		background: #fff;
		box-shadow: var(--cat-sombra-1);
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

	.cat-vitrine__item:hover .cat-vitrine__logo {
		transform: translateY(-3px);
		box-shadow: var(--cat-sombra-2);
	}

	/* Duas linhas reservadas, o nome embaixo: as contagens ficam todas na mesma altura. */
	.cat-vitrine__nome {
		display: flex;
		min-height: 2.5em;
		align-items: flex-end;
		justify-content: center;
		color: var(--cat-tinta);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.25;
	}

	.cat-vitrine__total {
		color: var(--cat-lapis);
		font-size: 1rem;
		font-variant-numeric: tabular-nums;
	}

	@media (min-width: 640px) {
		.cat-vitrine__item {
			width: 8.25rem;
		}

		.cat-vitrine__logo {
			width: 7rem;
			height: 7rem;
		}
	}

	/* O ponto ativo do carrossel (assets/js/carrossel.js). */
	.cat-ponto-ativo {
		background: var(--cat-acento);
	}

	.cat-seta {
		display: inline-flex;
		width: 2.5rem;
		height: 2.5rem;
		align-items: center;
		justify-content: center;
		border-radius: var(--cat-raio-controle);
		background: #fff;
		color: var(--cat-tinta);
		box-shadow: inset 0 0 0 1px var(--cat-linha-forte);
		transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
	}

	.cat-seta:hover:not(:disabled) {
		box-shadow: inset 0 0 0 1px var(--cat-tinta);
	}

	.cat-seta:active:not(:disabled) {
		transform: scale(0.95);
	}

	.cat-seta:disabled {
		opacity: 0.4;
		cursor: default;
	}

	.cat-seta svg {
		width: 1.125rem;
		height: 1.125rem;
	}

	/* ---------------------------------------- Os objetivos, em fichas largas */

	/* Uma ficha por objetivo: o ícone grande à esquerda, o texto à direita. Duas por linha. */
	.cat-objetivos {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	@media (min-width: 768px) {
		.cat-objetivos {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
		}
	}

	.cat-objetivo {
		display: grid;
		height: 100%;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		align-items: start;
		gap: 1.125rem;
		padding: 1.25rem;
		border-radius: var(--cat-raio-card);
		background: var(--cat-papel);
		color: var(--cat-tinta);
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.cat-objetivo:hover {
		background: var(--cat-papel-forte);
	}

	.cat-objetivo:active {
		transform: scale(0.99);
	}

	.cat-objetivo__icone {
		width: 4.5rem;
		height: 4.5rem;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cat-objetivo:hover .cat-objetivo__icone {
		transform: scale(1.06) rotate(-3deg);
	}

	.cat-objetivo__texto {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.375rem;
	}

	.cat-objetivo__titulo {
		font-family: var(--cat-display);
		font-size: 1.1875rem;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.02em;
		text-wrap: balance;
	}

	.cat-objetivo__resumo {
		display: -webkit-box;
		overflow: hidden;
		color: var(--cat-grafite);
		font-size: 1rem;
		line-height: 1.55;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.cat-objetivo__total {
		margin-top: 0.25rem;
		color: var(--cat-acento-forte);
		font-size: 1rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	@media (min-width: 1024px) {
		.cat-objetivo {
			grid-template-columns: 5.5rem minmax(0, 1fr);
			gap: 1.5rem;
			padding: 1.5rem;
		}

		.cat-objetivo__icone {
			width: 5.5rem;
			height: 5.5rem;
		}

		.cat-objetivo__titulo {
			font-size: 1.375rem;
		}
	}

	/* ------------------------------------------------- O topo do objetivo */

	.cat-arte {
		display: flex;
		min-height: 18rem;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		padding: 2rem;
		border-radius: var(--cat-raio-card);
		background: var(--cat-papel);
		box-shadow: inset 0 0 0 1px var(--cat-linha);
	}

	.cat-arte__icone {
		width: 10rem;
		height: 10rem;
	}

	.cat-leia-mais summary {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		color: var(--cat-link);
		font-weight: 600;
		list-style: none;
		cursor: pointer;
	}

	.cat-leia-mais summary::-webkit-details-marker {
		display: none;
	}

	.cat-leia-mais summary svg {
		width: 1rem;
		height: 1rem;
		transition: transform 0.2s ease;
	}

	.cat-leia-mais[open] summary svg {
		transform: rotate(180deg);
	}

	.cat-leia-mais[open] summary {
		margin-bottom: 0.875rem;
	}

	/* --------------------------------------------- O topo do agente e o fluxo */

	.cat-funciona {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 0.875rem;
		font-size: 1rem;
		color: var(--cat-grafite);
	}

	.cat-funciona strong {
		color: var(--cat-tinta);
		font-weight: 600;
	}

	/* No agente, a trilha fica em cima das duas colunas, e o texto no meio da altura do fluxo. */
	nav:has(> .cat-trilha) + .cat-heroi__grade {
		margin-top: 1.25rem;
	}

	/* As garantias, embaixo dos botões. */
	.cat-garantias {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
		color: var(--cat-grafite);
		font-size: 1rem;
		font-weight: 500;
	}

	.cat-garantias li {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}

	.cat-garantias svg {
		width: 1.125rem;
		height: 1.125rem;
		flex-shrink: 0;
		color: var(--cat-link);
	}

	/*
	 * O fluxo: os seletores das plataformas (no laranja claro: é o que o
	 * visitante mexe) e até 3 blocos "Quando… / o que o agente faz" no cinza.
	 * A altura não cresce com o agente: no máximo 3 blocos, o "Quando" em até
	 * 2 linhas e o texto em até 3.
	 */
	.cat-fluxo {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1.25rem;
		border-radius: var(--cat-raio-card);
		background: #fff;
		box-shadow: inset 0 0 0 1px var(--cat-linha), var(--cat-sombra-2);
		container-type: inline-size;
	}

	.cat-fluxo__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1rem;
	}

	.cat-fluxo__titulo {
		font-family: var(--cat-display);
		font-size: 1.25rem;
		font-weight: 700;
		letter-spacing: -0.015em;
	}

	.cat-selo {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.25rem 0.625rem;
		border-radius: var(--cat-raio-selo);
		background: var(--cat-escuro);
		color: #fff;
		font-size: 1rem;
		font-weight: 600;
		white-space: nowrap;
	}

	.cat-selo--claro {
		background: var(--cat-acento-suave);
		color: var(--cat-acento-escuro);
	}

	.cat-selo svg {
		width: 1rem;
		height: 1rem;
	}

	.cat-config {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.75rem;
		border-radius: var(--cat-raio-controle);
		background: var(--cat-acento-fundo);
		box-shadow: inset 0 0 0 1px var(--cat-acento-suave-forte);
	}

	.cat-config__linha {
		display: grid;
		grid-template-columns: 8.5rem minmax(0, 1fr);
		align-items: center;
		gap: 0.75rem;
	}

	.cat-config__rotulo {
		color: var(--cat-grafite);
		font-size: 1rem;
		font-weight: 600;
	}

	.cat-config__campo {
		position: relative;
		min-width: 0;
	}

	.cat-config__campo select {
		width: 100%;
		height: 3rem;
		padding: 0 2.5rem 0 3rem;
		overflow: hidden;
		border-radius: var(--cat-raio-controle);
		background: #fff;
		box-shadow: inset 0 0 0 1px var(--cat-linha-forte), var(--cat-sombra-1);
		color: var(--cat-tinta);
		font-size: 1rem;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		appearance: none;
		transition: box-shadow 0.2s ease;
	}

	.cat-config__campo select:hover {
		box-shadow: inset 0 0 0 1px var(--cat-tinta), var(--cat-sombra-1);
	}

	.cat-config__campo select:focus-visible {
		outline: 2px solid var(--cat-acento);
		outline-offset: 2px;
	}

	.cat-config__logo,
	.cat-config__seta {
		position: absolute;
		top: 50%;
		pointer-events: none;
		transform: translateY(-50%);
	}

	.cat-config__logo {
		left: 0.75rem;
		display: flex;
	}

	.cat-config__seta {
		right: 0.875rem;
		width: 1.125rem;
		height: 1.125rem;
		color: var(--cat-lapis);
	}

	.cat-config__fixas {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		padding-left: 0.75rem;
	}

	.cat-config__fixa {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--cat-tinta);
		font-size: 1rem;
		font-weight: 600;
	}

	/* Painel estreito (celular): o rótulo em cima do seletor. */
	@container (max-width: 22rem) {
		.cat-config__linha {
			grid-template-columns: minmax(0, 1fr);
			gap: 0.375rem;
		}

		.cat-config__fixas {
			padding-left: 0;
		}
	}

	.cat-fluxo__blocos {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.cat-fluxo__bloco {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		align-items: start;
		gap: 1rem;
		padding: 1rem;
		border-radius: var(--cat-raio-controle);
		background: var(--cat-papel);
	}

	.cat-fluxo__marcas {
		position: relative;
		width: 3rem;
		height: 3rem;
	}

	.cat-fluxo__tile {
		display: flex;
		width: 3rem;
		height: 3rem;
		align-items: center;
		justify-content: center;
		border-radius: 28%;
		background: #fff;
		box-shadow: inset 0 0 0 1px var(--cat-linha-forte);
	}

	/* Duas plataformas no mesmo bloco: dois tiles menores, um sobre o outro na diagonal. */
	.cat-fluxo__marcas--duas .cat-fluxo__tile {
		position: absolute;
		width: 2.25rem;
		height: 2.25rem;
	}

	.cat-fluxo__marcas--duas .cat-fluxo__tile:first-child {
		top: 0;
		left: 0;
	}

	.cat-fluxo__marcas--duas .cat-fluxo__tile:last-child {
		right: -0.25rem;
		bottom: -0.25rem;
		box-shadow: 0 0 0 2px var(--cat-papel), inset 0 0 0 1px var(--cat-linha-forte);
	}

	/* O que a Toca faz sozinha (avisar, analisar, o gatilho): o ícone no laranja claro. */
	.cat-fluxo__tile--toca {
		background: var(--cat-acento-suave);
		box-shadow: none;
	}

	.cat-fluxo__tile--toca svg {
		width: 1.375rem;
		height: 1.375rem;
		color: var(--cat-acento-escuro);
	}

	.cat-fluxo__texto {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 0.25rem;
	}

	.cat-fluxo__quando,
	.cat-fluxo__faz {
		text-wrap: pretty;
	}


	/* Na Geist, não na Bricolage: o Q dela tem a cauda reta, que parece sublinhado neste tamanho. */
	.cat-fluxo__quando {
		color: var(--cat-tinta);
		font-family: var(--font-geist-sans), system-ui, sans-serif;
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 1.35;
	}

	.cat-fluxo__faz {
		color: var(--cat-grafite);
		font-size: 1rem;
		line-height: 1.5;
	}

	@media (min-width: 640px) {
		.cat-fluxo {
			padding: 1.5rem;
		}
	}

	/* Na tela larga, o painel não passa da dobra: o "Quando" em até 2 linhas e o texto em até 3. */
	@media (min-width: 1024px) {
		.cat-fluxo__quando,
		.cat-fluxo__faz {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
		}

		.cat-fluxo__quando {
			-webkit-line-clamp: 2;
		}

		.cat-fluxo__faz {
			-webkit-line-clamp: 3;
		}
	}

	/* O assinar sempre à mão no celular, depois que o botão do topo sai da tela. */
	.cat-barra-fixa {
		position: fixed;
		z-index: 40;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.625rem max(1rem, env(safe-area-inset-right, 0px)) calc(0.625rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
		border-top: 1px solid var(--cat-linha);
		background: rgb(255 255 255 / 0.94);
		backdrop-filter: blur(12px);
		transform: translateY(110%);
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cat-barra-fixa[data-visivel] {
		transform: none;
	}

	.cat-barra-fixa__nome {
		min-width: 0;
		flex: 1;
		overflow: hidden;
		color: var(--cat-tinta);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cat-barra-fixa .cat-botao {
		height: 2.75rem;
		padding-inline: 1rem;
		font-size: 1rem;
	}

	@media (max-width: 767px) {
		body:has(.cat-barra-fixa) {
			padding-bottom: 4.25rem;
		}
	}

	@media (min-width: 768px) {
		.cat-barra-fixa {
			display: none;
		}
	}

	/* --------------------------------------------- As plataformas do agente */

	.cat-grupos {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.cat-grupo {
		display: flex;
		min-width: 0;
		flex: 1 1 0;
		flex-direction: column;
		gap: 0.875rem;
		padding: 1rem;
		border-radius: var(--cat-raio-card);
		background: var(--cat-papel);
	}

	.cat-grupo--largo {
		flex-grow: 2;
	}

	.cat-grupo__lista {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
		gap: 0.5rem;
	}

	.cat-plataforma {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 0.75rem;
		padding: 0.625rem 0.75rem;
		border-radius: var(--cat-raio-controle);
		background: #fff;
		box-shadow: var(--cat-sombra-1);
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

	.cat-secao:not(.cat-secao--papel) .cat-sobre .cat-plataforma {
		box-shadow: inset 0 0 0 1px var(--cat-linha), var(--cat-sombra-1);
	}

	.cat-plataforma:hover {
		transform: translateY(-2px);
		box-shadow: var(--cat-sombra-2);
	}

	.cat-plataforma > span:last-child {
		display: flex;
		min-width: 0;
		flex-direction: column;
	}

	.cat-plataforma__nome {
		overflow: hidden;
		color: var(--cat-tinta);
		font-size: 1rem;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cat-plataforma__categoria {
		overflow: hidden;
		color: var(--cat-lapis);
		font-size: 1rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cat-e {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		color: var(--cat-grafite);
		font-size: 1rem;
		font-weight: 600;
	}

	.cat-e span {
		display: flex;
		width: 2.25rem;
		height: 2.25rem;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: var(--cat-escuro);
		color: #fff;
	}

	.cat-e svg {
		width: 1rem;
		height: 1rem;
	}

	@media (min-width: 1024px) {
		.cat-grupos {
			flex-direction: row;
			align-items: flex-start;
		}

		.cat-e {
			flex-direction: column;
			align-self: center;
		}

		.cat-grupo {
			padding: 1.25rem;
		}
	}

	/* ------------------------------------- Por que na Toca (os diferenciais) */

	/*
	 * Até 1023px, os pilares numa linha do tempo: o ícone à esquerda, ligado ao
	 * próximo por um fio, e o título e o texto ao lado. Na tela larga, o hub: o
	 * agente no meio, num medalhão com anéis e uma trama de pontos, e os pilares
	 * nos quatro cantos, os da esquerda alinhados para o meio. Sem caixa nos
	 * pilares: o que dá corpo à seção é o medalhão.
	 */
	/* No roxo da Toca (o primary e a escala brand do theme.json), não no laranja das ações. */
	.cat-secao--diferenciais {
		--cat-acento: #5836ff;
		--cat-acento-forte: #4628cc;
		--cat-acento-rgb: 88 54 255;
		--cat-acento-suave-forte: #c2b5ff;
		--cat-acento-escuro: #4628cc;
	}

	.cat-secao--diferenciais .cat-cabecalho {
		margin-bottom: 2.5rem;
	}

	.cat-hub {
		position: relative;
		display: grid;
		max-width: 44rem;
		gap: 2.25rem;
	}

	/* O fio da linha do tempo: de cada ícone ao do pilar seguinte (o gap + meio ícone); o 4º não tem. */
	.cat-pilar:not(:nth-child(4))::before {
		position: absolute;
		top: 1.5rem;
		bottom: -3.75rem;
		left: 1.5rem;
		border-left: 1px dashed var(--cat-acento-suave-forte);
		content: "";
	}

	.cat-pilar {
		position: relative;
		display: grid;
		min-width: 0;
		grid-template-areas: "icone titulo" "icone texto";
		grid-template-columns: 3rem minmax(0, 1fr);
		align-items: center;
		gap: 0.375rem 1.25rem;
	}

	.cat-pilar__icone {
		position: relative;
		z-index: 1;
		display: flex;
		width: 3rem;
		height: 3rem;
		grid-area: icone;
		align-self: start;
		align-items: center;
		justify-content: center;
		border-radius: 28%;
		background: #fff;
		color: var(--cat-acento-escuro);
		box-shadow: inset 0 0 0 1px var(--cat-acento-suave-forte), 0 0 0 6px #fff, var(--cat-sombra-1);
	}

	.cat-pilar__icone svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.cat-pilar__titulo {
		grid-area: titulo;
		color: var(--cat-tinta);
		font-family: var(--cat-display);
		font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
		font-weight: 700;
		letter-spacing: -0.025em;
		line-height: 1.15;
	}

	.cat-pilar__texto {
		max-width: 34rem;
		grid-area: texto;
		color: var(--cat-grafite);
		font-size: 1.0625rem;
		line-height: 1.6;
		text-wrap: pretty;
	}

	.cat-hub__centro {
		display: none;
	}

	/* O botão do fim: alinhado com o texto dos pilares no celular, no centro na tela larga. */
	.cat-diferenciais__acoes {
		margin-top: 2.5rem;
		padding-left: 4.25rem;
	}

	@media (min-width: 1024px) {
		.cat-secao--diferenciais .cat-cabecalho {
			justify-content: center;
			margin-bottom: 3.5rem;
			text-align: center;
		}

		.cat-secao--diferenciais .cat-cabecalho__texto {
			align-items: center;
		}

		/* Os anéis e a trama ficam atrás de tudo, dentro do hub; os pilares, por cima. */
		.cat-hub {
			isolation: isolate;
			max-width: none;
			grid-template-areas: "governanca centro seguranca" "monitoramento centro auditoria";
			grid-template-columns: minmax(0, 1fr) 19rem minmax(0, 1fr);
			align-items: start;
			gap: 4.5rem 3.5rem;
		}

		.cat-pilar::before {
			display: none;
		}

		.cat-diferenciais__acoes {
			display: flex;
			justify-content: center;
			margin-top: 4rem;
			padding-left: 0;
		}

		.cat-pilar {
			z-index: 1;
			grid-template-areas: "icone titulo" "texto texto";
			row-gap: 0.875rem;
		}

		.cat-pilar__icone {
			align-self: center;
		}

		/* Os da esquerda, espelhados: o ícone do lado do agente e o texto encostado nele. */
		.cat-pilar--governanca,
		.cat-pilar--monitoramento {
			grid-template-areas: "titulo icone" "texto texto";
			grid-template-columns: minmax(0, 1fr) 3rem;
			text-align: right;
		}

		.cat-pilar--governanca .cat-pilar__texto,
		.cat-pilar--monitoramento .cat-pilar__texto {
			justify-self: end;
		}

		.cat-pilar--governanca {
			grid-area: governanca;
		}

		.cat-pilar--seguranca {
			grid-area: seguranca;
		}

		.cat-pilar--monitoramento {
			grid-area: monitoramento;
		}

		.cat-pilar--auditoria {
			grid-area: auditoria;
		}

		/*
		 * O medalhão: a trama de pontos que some para as bordas, o anel
		 * tracejado de fora, o anel roxo com um ponto em cada diagonal (para
		 * cada pilar) e o disco branco com o nome do agente.
		 */
		.cat-hub__centro {
			position: relative;
			display: grid;
			width: 100%;
			grid-area: centro;
			align-self: center;
			aspect-ratio: 1;
			place-items: center;
			border-radius: 999px;
			box-shadow: inset 0 0 0 1px var(--cat-acento-suave-forte);
			background: radial-gradient(closest-side, rgb(var(--cat-acento-rgb) / 0.07), transparent);
		}

		.cat-hub__centro::before,
		.cat-hub__centro::after {
			position: absolute;
			z-index: -1;
			border-radius: 999px;
			content: "";
			pointer-events: none;
		}

		.cat-hub__centro::before {
			inset: -2.75rem;
			border: 1px dashed var(--cat-linha-forte);
		}

		.cat-hub__centro::after {
			inset: -9rem;
			background-image: radial-gradient(var(--cat-linha-forte) 1px, transparent 1.5px);
			background-size: 1.375rem 1.375rem;
			-webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
			mask-image: radial-gradient(closest-side, #000 35%, transparent);
		}

		.cat-hub__disco {
			display: flex;
			width: 66%;
			aspect-ratio: 1;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 1.5rem;
			border-radius: 999px;
			background: #fff;
			box-shadow: inset 0 0 0 1px var(--cat-linha), var(--cat-sombra-2);
			text-align: center;
		}

		.cat-hub__agente {
			color: var(--cat-tinta);
			font-family: var(--cat-display);
			font-size: 1.125rem;
			font-weight: 700;
			letter-spacing: -0.015em;
			line-height: 1.25;
			text-wrap: balance;
		}

		/* Os pontos do anel roxo, nas diagonais (cos 45° = 0,7071: 50% ± 35,36%); o 1º filho é o disco. */
		.cat-hub__ponto {
			position: absolute;
			width: 0.625rem;
			height: 0.625rem;
			margin: -0.3125rem 0 0 -0.3125rem;
			border-radius: 999px;
			background: var(--cat-acento);
			box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cat-acento-suave-forte);
		}

		.cat-hub__ponto:nth-child(2) {
			top: 14.64%;
			left: 14.64%;
		}

		.cat-hub__ponto:nth-child(3) {
			top: 14.64%;
			left: 85.36%;
		}

		.cat-hub__ponto:nth-child(4) {
			top: 85.36%;
			left: 14.64%;
		}

		.cat-hub__ponto:nth-child(5) {
			top: 85.36%;
			left: 85.36%;
		}
	}

	/* ------------------------------------------------ Como conectar (o guia) */

	.cat-guia {
		display: grid;
		gap: 2rem;
	}

	.cat-guia__lado {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	@media (min-width: 1024px) {
		.cat-guia {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			gap: 4rem;
		}
	}

	.cat-passos {
		display: flex;
		flex-direction: column;
		counter-reset: passo;
	}

	.cat-passos > li {
		position: relative;
		display: grid;
		grid-template-columns: 2.25rem minmax(0, 1fr);
		gap: 1rem;
		padding-bottom: 1.5rem;
		counter-increment: passo;
	}

	.cat-passos > li::before {
		display: flex;
		width: 2.25rem;
		height: 2.25rem;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: var(--cat-escuro);
		color: #fff;
		content: counter(passo);
		font-size: 1rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.cat-passos > li:not(:last-child)::after {
		position: absolute;
		top: 2.625rem;
		bottom: 0.375rem;
		left: calc(1.125rem - 0.5px);
		width: 1px;
		background: var(--cat-linha-forte);
		content: "";
	}

	.cat-passos__texto {
		padding-top: 0.375rem;
		color: var(--cat-tinta);
		font-size: 1rem;
		line-height: 1.6;
	}

	.cat-passos__itens {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
		margin-top: 0.625rem;
	}

	.cat-passos__itens li {
		position: relative;
		padding-left: 1rem;
		color: var(--cat-grafite);
		font-size: 1rem;
		line-height: 1.55;
	}

	.cat-passos__itens li::before {
		position: absolute;
		top: 0.6875rem;
		left: 0.125rem;
		width: 0.3125rem;
		height: 0.3125rem;
		border-radius: 999px;
		background: var(--cat-linha-forte);
		content: "";
	}

	/* "O que a Toca lê", no topo da plataforma. */
	.cat-painel {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.5rem;
		border-radius: var(--cat-raio-card);
		background: #fff;
		box-shadow: var(--cat-sombra-2);
	}

	.cat-painel__titulo {
		font-family: var(--cat-display);
		font-size: 1.125rem;
		font-weight: 600;
		letter-spacing: -0.015em;
		color: var(--cat-tinta);
	}

	.cat-painel__nota {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding-top: 0.75rem;
		border-top: 1px solid var(--cat-linha);
		color: var(--cat-lapis);
		font-size: 1rem;
		font-weight: 500;
	}

	.cat-painel__nota svg {
		width: 0.9375rem;
		height: 0.9375rem;
		flex-shrink: 0;
	}

	/* ------------------------------------------------------------------- FAQ */

	/* O título em cima e as perguntas abertas em duas colunas, sem cartão nem fio. */
	.cat-faq {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.cat-faq__lado {
		display: flex;
		max-width: 46rem;
		flex-direction: column;
		gap: 0.625rem;
	}

	.cat-perguntas {
		display: grid;
		gap: 1.75rem 3.5rem;
	}

	@media (min-width: 1024px) {
		.cat-perguntas {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.cat-perguntas > div {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.cat-perguntas dt {
		color: var(--cat-tinta);
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.4;
		text-wrap: balance;
	}

	.cat-perguntas dd {
		max-width: 62ch;
		color: var(--cat-grafite);
		font-size: 1rem;
		line-height: 1.65;
		white-space: pre-line;
		text-wrap: pretty;
	}

	/* ------------------------------------------- Sobre a plataforma */

	/* Uma coluna de texto e, embaixo, as plataformas parecidas numa fileira. */
	.cat-sobre {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.cat-parecidas {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
		gap: 0.5rem;
	}

	/* --------------------------------------------------- A chamada final */

	/* Um cartão escuro dentro da seção clara (a página não troca de tema). */
	.cat-chamada {
		display: grid;
		gap: 1.5rem;
		padding: 2rem 1.5rem;
		border-radius: var(--cat-raio-card);
		background:
			radial-gradient(40rem 22rem at 100% 100%, rgb(var(--cat-acento-rgb) / 0.3), transparent 65%),
			var(--cat-escuro);
	}

	.cat-chamada__texto {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.cat-chamada__acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
	}

	@media (min-width: 640px) {
		.cat-chamada {
			padding: 2.75rem;
		}
	}

	@media (min-width: 1024px) {
		.cat-chamada {
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: 3rem;
			padding: 3.5rem 4rem;
		}
	}
}

/*
 * A cascata dos cards ao entrar na tela: fora da camada, porque o transition do
 * [data-revelar] (base.css) também está fora e zeraria o atraso.
 */
[data-revelar][style*="--i"] {
	transition-delay: calc(var(--i) * 70ms);
}