/*
Theme Name: Granular
Theme URI: https://example.com/
Author: Gabi
Author URI: https://example.com/
Description: Tema WordPress gerado a partir do design Figma "Site Granular" (seção Post). Layout responsivo para páginas de post/projeto, com colunas de imagens e conteúdo, tags e créditos.
Version: 2.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: granular
*/

/* ==========================================================================
   1. Custom properties (tokens extraídos do Figma)
   ========================================================================== */
:root {
	/* Roxos/forte. O tema nasceu com #5310d1 aqui, mas o valor dessa cor
	   no Figma é #401285 — as duas conviviam no arquivo com o mesmo nome
	   e valores diferentes. Agora há um só: "--gr-color-bg" é só o
	   apelido histórico, usado no fundo e em alguns textos. */
	--gr-color-bg: var(--gr-color-roxo-forte);
	--gr-color-surface: #6f55f2;  /* Roxos/medio - placeholder de imagens / tag selecionada */
	--gr-color-accent: #ea99df;   /* Quentes/rosa pluma */
	--gr-color-lilac: #e5d9fc;    /* Roxos/claro - tag hover / borda da tag selecionada */
	--gr-color-white: #ffffff;
	--gr-color-terra: #e24612;    /* Quentes/terra - formas/pins da página inicial */
	--gr-color-roxo-forte: #401285; /* Roxos/forte - fundo do site, da abertura e contorno das formas */

	--gr-font-display: "Compagnon", "Courier New", monospace; /* logo, títulos, tags, labels */
	--gr-font-body: "Bricolage Grotesque", system-ui, sans-serif; /* corpo de texto: peso Light (300) */
	--gr-font-meta: "Bricolage Grotesque", system-ui, sans-serif; /* créditos: antes Archivo, agora Bricolage Grotesque Light */

	/* Ícone de seta do componente "link" do Figma (node 84:68/84:69),
	   exportado do próprio arquivo. Usado via CSS mask + currentColor
	   para acompanhar a cor do texto (branco no padrão, rosa no hover). */
	--gr-icon-arrow-out: url("data:image/svg+xml,%3Csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13.2803%200.75C13.2803%200.335786%2012.9445%200%2012.5303%200L5.78027%20-5.96046e-08C5.36606%20-5.96046e-08%205.03027%200.335786%205.03027%200.75C5.03027%201.16421%205.36606%201.5%205.78027%201.5L11.7803%201.5V7.5C11.7803%207.91421%2012.1161%208.25%2012.5303%208.25C12.9445%208.25%2013.2803%207.91421%2013.2803%207.5V0.75ZM0.530273%2012.75L1.0606%2013.2803L13.0606%201.28033L12.5303%200.75L11.9999%200.21967L-5.66244e-05%2012.2197L0.530273%2012.75Z'%20fill='white'/%3E%3C/svg%3E");

	--gr-gap: 8px;
	--gr-gap-lg: 24px;
	--gr-gap-gallery: 16px; /* espaço entre as fotos da galeria — 8px no Figma (retângulos lisos), ampliado para fotos reais */
	--gr-container-padding: 48px;
	--gr-header-height: 96px;
}

@media (max-width: 782px) {
	:root {
		--gr-container-padding: 24px;
		--gr-header-height: 96px;
	}
}

/* ==========================================================================
   2. Fontes
   ========================================================================== */
/*
 * "Compagnon" é uma fonte comercial, incluída em /assets/fonts/.
 */
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Light.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Roman.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Roman.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Italic.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Medium.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Bold.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   3. Reset básico
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--gr-color-bg);
	color: var(--gr-color-white);
	font-family: var(--gr-font-body);
	font-size: 16px;
	line-height: 1.5;
	font-optical-sizing: auto;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O navegador esconde o que tem o atributo "hidden" com uma regra de
   display:none da própria folha padrão dele — e QUALQUER regra nossa de
   display ganha dela, por mais genérica que seja. Era isso que fazia os
   filtros da página "Trabalhos" não funcionarem: o JS marcava os cards
   como hidden, mas o display:flex do .card-projeto mantinha todos
   visíveis. Daqui pra frente o atributo vale em qualquer elemento. */
[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   4. Header do site
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--gr-header-height);
	padding: 8px var(--gr-container-padding);
	background: var(--gr-color-bg);
}

.site-logo {
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 2.125rem; /* 34px */
	letter-spacing: -0.02em;
	color: var(--gr-color-accent);
	white-space: nowrap;
}

.primary-nav {
	display: none;
}

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
}

.primary-nav a {
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 1.25rem; /* 20px */
	letter-spacing: -0.02em;
	color: var(--gr-color-accent);
}

/* A estrela do menu usa "currentColor" no SVG (ver header.php e
   front-page.php), então basta dar a cor aqui — e ela passa a
   acompanhar o logo ao lado em cada contexto, em vez de ser um rosa
   fixo que às vezes destoava. */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 43px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--gr-color-accent);
	cursor: pointer;
}

/* No mapa, o logo é terracota (ver ".home-header__logo") — a estrela
   acompanha, nas duas larguras. */
.home-header .menu-toggle {
	color: var(--gr-color-terra);
}

.menu-toggle svg {
	width: 100%;
	height: 100%;
}

@media (min-width: 783px) {
	.primary-nav {
		display: block;
	}
	.menu-toggle {
		display: none;
	}
}

/* Menu mobile (drawer simples) */
.primary-nav.is-open {
	display: block;
	position: absolute;
	top: var(--gr-header-height);
	left: 0;
	right: 0;
	background: var(--gr-color-bg);
	padding: 16px var(--gr-container-padding) 24px;
}

.primary-nav.is-open ul {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* ==========================================================================
   5. Layout do post (2 colunas no desktop / empilhado no mobile)
   ========================================================================== */
/*
 * No mobile o Figma intercala imagens e texto numa ordem própria
 * (imagem grande → título/ano/tags → demais imagens → texto → links →
 * créditos), diferente da simples divisão em 2 colunas do desktop. Para
 * respeitar as duas ordens sem duplicar HTML, ".post-gallery" e
 * ".post-content-col" só existem como agrupadores visuais no desktop:
 * no mobile viram "display: contents" (o navegador ignora a caixa e
 * trata os filhos como itens diretos do grid do ".post-layout"), e cada
 * seção ganha um "order" próprio para cair na sequência do protótipo.
 */
.post-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gr-gap-lg); /* 24px entre seções no mobile */
	padding: 40px var(--gr-container-padding) 80px;
	max-width: 1440px;
	margin: 0 auto;
}

.post-gallery,
.post-content-col {
	display: contents;
}

/* No mobile o título entra entre a PRIMEIRA imagem e o resto do que
   você montou no editor — por isso a ordem é dada por posição, e não
   por classes fixas: o primeiro bloco visual vem antes do cabeçalho, os
   demais vêm depois. */
.post-gallery > * {
	order: 3;
	margin: 0;
}

.post-gallery > :first-child {
	order: 1;
}

.post-header {
	order: 2;
}
.post-entry-content {
	order: 4;
}
.post-links {
	order: 5;
}
.post-credits {
	order: 6;
}

/* Cada imagem mantém sua proporção original (sem cortes) — só a
   largura é forçada a 100% da coluna; a altura acompanha o ratio
   nativo da imagem. */
.post-gallery img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Placeholder exibido apenas quando o post ainda não tem imagens. */
.post-gallery__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--gr-color-surface);
}

@media (min-width: 1024px) {
	.post-layout {
		grid-template-columns: 2fr 1fr;
		gap: 40px;
		padding-top: 40px;
	}

	/* No desktop as imagens ficam numa coluna e o texto na outra —
	   volta a valer o agrupamento normal (sem "contents"/"order"). */
	.post-gallery {
		display: flex;
		flex-direction: column;
		gap: var(--gr-gap-gallery); /* 16px entre a imagem grande e a grade */
	}

	.post-content-col {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	/* Fora do empilhamento do mobile, a ordem é a que você escreveu.
	   O ":first-child" precisa ser desfeito explicitamente: ele tem
	   especificidade maior que ".post-gallery > *", e media query não
	   muda isso — sem esta linha, a primeira imagem continuava com
	   "order: 1" e ia parar no fim da coluna. */
	.post-gallery > *,
	.post-gallery > :first-child {
		order: 0;
	}
}

.post-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.post-title {
	font-family: var(--gr-font-display);
	font-weight: 400;
	font-size: 2.25rem; /* 36px mobile */
	line-height: 1.15;
	margin: 0;
}

@media (min-width: 1024px) {
	.post-title {
		font-size: 2.625rem; /* 42px desktop */
		line-height: 1;
	}
}

.post-year {
	font-family: var(--gr-font-display);
	font-weight: 700;
	font-size: 1.5rem; /* 24px */
	margin: 0;
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gr-gap);
}

.post-tags a,
.filtro-chip {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid var(--gr-color-white);
	border-radius: 8px;
	padding: 2px 12px 8px;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	/* "normal" (o do componente de tag no Figma) e não o 1.5 que o reset
	   aplica no body: com 1.5 a etiqueta fica 33px de altura, contra os
	   29px do desenho. */
	line-height: normal;
	color: var(--gr-color-white);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Estado "hover" do componente de tag no Figma (Roxos/claro). */
.post-tags a:hover,
.post-tags a:focus-visible,
.filtro-chip:hover,
.filtro-chip:focus-visible {
	background: var(--gr-color-lilac);
	border-color: var(--gr-color-lilac);
	color: var(--gr-color-bg);
}

/* Estado "selecionado" do componente de tag no Figma — aplicado ao
   clicar/segurar (:active) e também disponível como classe .is-active
   para marcar a tag atualmente selecionada em uma listagem/filtro. */
.post-tags a:active,
.post-tags a.is-active,
.filtro-chip:active,
.filtro-chip.is-active {
	background: var(--gr-color-surface);
	border-color: var(--gr-color-lilac);
	color: var(--gr-color-lilac);
}

.post-entry-content {
	font-family: var(--gr-font-body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
}

.post-entry-content p {
	margin: 0 0 8px;
}

.post-entry-content p:last-child {
	margin-bottom: 0;
}

/* Links dentro do corpo de texto (componente "link" do Figma, node
   84:68) e a seção de links entre o texto e os créditos (node 84:69):
   texto sublinhado em Compagnon Medium 14px + seta diagonal, branco no
   estado padrão e Quentes/rosa pluma no hover. A seta usa CSS mask com
   currentColor para acompanhar a cor do texto automaticamente. */
.post-entry-content a:not(:has(img)),
.post-links a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--gr-color-white);
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	transition: color 120ms ease;
}

.post-entry-content a:not(:has(img))::after,
.post-links a::after {
	content: "";
	align-self: center;
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	background-color: currentColor;
	-webkit-mask-image: var(--gr-icon-arrow-out);
	mask-image: var(--gr-icon-arrow-out);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.post-entry-content a:not(:has(img)):hover,
.post-entry-content a:not(:has(img)):focus-visible,
.post-links a:hover,
.post-links a:focus-visible {
	color: var(--gr-color-accent);
}

/* ---- Seção de links (entre o corpo do texto e os créditos) ---- */
/* Lista de links: no Figma eles quebram em linha (não empilhados) —
   3 por linha no espaço da coluna de texto, com 16px de espaço
   horizontal e 12px entre as linhas quando quebra. */
.post-links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	row-gap: 12px;
}

/* ---- Créditos ---- */
.post-credits {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--gr-color-white);
	font-size: 0.875rem; /* 14px */
}

.post-credits__row {
	display: flex;
	gap: 16px;
	align-items: baseline;
}

.post-credits__label {
	font-family: var(--gr-font-display);
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.15;
	width: 104px;
	flex: 0 0 104px;
}

.post-credits__names {
	font-family: var(--gr-font-meta);
	font-weight: 300;
	line-height: 1.2;
}

/* ==========================================================================
   6. Página "Trabalhos" (modelo de página, node 70:78 no Figma)
   ========================================================================== */
/* 24px em cima (e não 40) porque a barra de filtros traz o próprio
   respiro embaixo: 24 + 29 da etiqueta + 24 colocam a grade a 173px
   do topo, como no Figma. */
.trabalhos-page {
	padding: 24px var(--gr-container-padding) 80px;
	max-width: 1440px;
	margin: 0 auto;
}

.trabalhos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 1024px) {
	.trabalhos-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px 42px;
	}
}

.card-projeto {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 8px;
	color: inherit;
	/* A moldura do hover é um "outline" desenhado para dentro, e não uma
	   borda: assim ela não ocupa espaço nenhum no layout. Com borda, o
	   1px de cada lado era descontado da largura útil e a imagem saía
	   370×288 em vez dos 372×290 do Figma. */
	outline: 1px solid transparent;
	outline-offset: -1px;
	transition: outline-color 120ms ease;
}

/* A moldura acende com o mouse em qualquer canto do card e também
   quando o foco do teclado entra nele (no link ou numa tag). */
.card-projeto:hover,
.card-projeto:focus-within {
	outline-color: var(--gr-color-lilac);
}

/* Imagem + título levam ao post. As tags ficam fora daqui, porque elas
   filtram em vez de navegar. */
.card-projeto__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* 372×290 no componente "card-projeto" do Figma (node 88:298), dentro
   do card de 420 com 24 de respiro. Aqui vai como PROPORÇÃO, e não como
   altura fixa: a largura do card muda com a da tela, e a altura precisa
   acompanhar — numa altura fixa as imagens iam ficando cada vez mais
   achatadas conforme a janela estreitasse. */
.card-projeto__image {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 372 / 290;
	border: 1px solid var(--gr-color-lilac);
	border-radius: 8px;
	background: var(--gr-color-surface);
	overflow: hidden;
}

.card-projeto__image img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* aqui a imagem É cortada para preencher a caixa — ao contrário da galeria do post */
	border-radius: 7px; /* -1px para não vazar por baixo da borda de 1px acima */
}

.card-projeto__title {
	font-family: var(--gr-font-display);
	font-weight: 400;
	font-size: 1.5rem; /* 24px */
	line-height: 1.2;
	color: var(--gr-color-lilac);
}

.card-projeto__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O <li> precisa ser flex: como bloco ele cria uma linha de texto em
   volta da etiqueta e fica 2px mais alto que ela (o "strut" da linha,
   que herda o line-height 1.5 do body). */
.card-projeto__tags li {
	display: flex;
}

/* As tags do card são botões de filtro: clicar numa delas liga o mesmo
   filtro da etiqueta correspondente na barra do topo. Por isso elas
   têm os mesmos estados visuais de lá. */
.card-projeto__tag {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--gr-color-lilac);
	border-radius: 8px;
	padding: 2px 12px 8px;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	line-height: normal; /* 29px de altura, como no Figma */
	color: var(--gr-color-lilac);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Mesmos estados do componente de tag no Figma: "hover" preenchido de
   lilás, "selecionado" com o fundo de superfície e o texto lilás. */
.card-projeto__tag:hover,
.card-projeto__tag:focus-visible {
	background: var(--gr-color-lilac);
	border-color: var(--gr-color-lilac);
	color: var(--gr-color-bg);
}

.card-projeto__tag.is-active {
	background: var(--gr-color-surface);
	border-color: var(--gr-color-lilac);
	color: var(--gr-color-lilac);
}

.trabalhos-toolbar {
	display: flex;
	justify-content: flex-end;
	padding: 8px;
}

.back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 12px 8px;
	height: 42px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--gr-color-white);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.back-to-top svg {
	width: 16px;
	height: 16px;
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background: var(--gr-color-lilac);
	color: var(--gr-color-bg);
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer {
	padding: 24px var(--gr-container-padding) 40px;
	font-family: var(--gr-font-meta);
	font-size: 0.875rem;
	opacity: 0.8;
}

/* ==========================================================================
   8. Página inicial (Home) — Abertura → Mapa (nodes 6:2 / 12:433 no
   Figma; a tela intermediária "Mapa-0" foi eliminada, ver abaixo)
   ========================================================================== */
/*
 * Duas telas em tela cheia, uma de cada vez: "abertura" (splash com o
 * logo pulsando — passar o mouse ou focar nele revela as 4 palavras
 * secundárias que antes ficavam numa tela "intro" à parte, hoje
 * eliminada: ver ".home-logo-reveal") e "pins" (grade de formas com
 * pins que revelam foto de projeto no hover). O JS (assets/js/home.js)
 * troca o atributo [data-screen] no ".home-experience" e a classe
 * ".is-active" em cada tela.
 *
 * A grade de formas (".home-stage" > ".home-shape-grid") é UM ÚNICO
 * elemento persistente, compartilhado pelas duas telas — não é
 * recriada a cada troca. É assim que dá pra animar as formas
 * "encolhendo"/mudando de cor entre uma etapa e outra: variáveis CSS
 * (--shape-size, --shape-color, --shape-stroke...) mudam de valor
 * conforme [data-screen] na raiz, e como elas alimentam propriedades
 * transicionáveis (width/height/background-color/box-shadow/
 * border-width) do mesmo elemento, o navegador anima a mudança em vez
 * de trocar tudo de uma vez (crossfade entre grades diferentes).
 */
body.granular-home {
	overflow: hidden;
	height: 100vh;
	background: var(--gr-color-lilac);
}

.home-experience {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: var(--gr-color-lilac);
	transition: background-color 700ms ease;
}

.home-experience[data-screen="abertura"] {
	background: var(--gr-color-roxo-forte);
}

/* ---- Camada persistente: grade de formas + preview de pin ---- */
.home-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.home-screen {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: opacity 300ms ease;
}

.home-screen.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Na tela "pins" quem precisa capturar clique/hover é a grade (pra
   revelar/seguir os pins ao passar o mouse), que mora na camada de
   baixo (".home-stage"). Por isso essa tela some do caminho dos
   eventos do mouse por inteiro, e só o cabeçalho (nav/menu) reabilita
   eventos pra si — clicar num pin ou numa célula vazia é tratado por
   delegação de evento em ".home-stage" (assets/js/home.js), que decide
   se navega pro post ou leva pra Trabalhos. */
.home-screen--pins.is-active {
	pointer-events: none;
}

.home-screen--pins.is-active .home-header {
	pointer-events: auto;
}

/* ---- Tela 1: Abertura ---- */
.home-screen--abertura {
	align-items: center;
	justify-content: center;
}

/* Envolve o "granular" (gatilho/âncora) e as 4 palavras secundárias
   que antes viviam na tela "intro" (eliminada) — agora elas só
   aparecem no hover/foco sobre o "granular", em vez de numa tela à
   parte (ver ".home-logo-secondary" mais abaixo, perto de onde era a
   seção "Texto grande da intro"). */
.home-logo-reveal {
	/* Tamanho do "granular" numa variável só, pra ".home-logo-secondary"
	   (mais abaixo) usar o MESMO clamp() responsivo em vez de duplicar o
	   valor — garante que as palavras secundárias sempre acompanham o
	   tamanho do "granular", em qualquer largura de tela. */
	--gr-logo-size: clamp(2.5rem, 9vw, 8rem);
	position: relative;
	z-index: 1;
}

.home-logo-pulse {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: var(--gr-logo-size);
	/* "normal" (o do Figma, "leading-normal") e não o 1.5 que o reset do
	   tema aplica no body — com 1.5 a caixa do texto fica ~39px mais
	   alta nesse tamanho e empurra o logo pra fora do centro ótico da
	   tela. */
	line-height: normal;
	letter-spacing: -0.02em;
	cursor: pointer;
	/* Cor exata lida no nó de texto do Figma (fill #EA99DF, o mesmo tom
	   já usado como --gr-color-accent) — não a mesma cor das formas
	   (--gr-color-terra), senão o texto some por cima delas onde
	   coincidem (mesma cor sobre mesma cor = sem contraste nenhum). */
	color: var(--gr-color-accent);
}

/* ---- Entrada da abertura e "mexidinha" no hover das formas ----
 * Quem anima é assets/js/home.js; aqui ficam só as condições que o CSS
 * precisa garantir. O pulso que o logo tinha antes (vindo do Figma) foi
 * substituído por esta entrada: cada forma e cada letra chega de um
 * lado sorteado da tela, com atraso próprio, até formar a abertura.
 */

/* As letras são separadas em <span> pelo JS pra poderem ser animadas
   uma a uma — "inline" não aceita transform. A fonte é monoespaçada,
   então separar não muda o desenho da palavra. */
.home-letra {
	display: inline-block;
}

/* Antes do primeiro quadro da animação, formas e letras ficam
   invisíveis — senão a tela pisca já montada e só então se desmonta
   pra entrar. A classe ".granular-anima" é posta no <html> por um
   script mínimo no <head> (ver granular_home_preparar_animacao() em
   functions.php): sem JavaScript ela nunca aparece, e aí esta regra
   também não vale — a abertura é exibida direto, montada. */
.granular-anima .home-experience.is-aguardando .home-shape-cell,
.granular-anima .home-experience.is-aguardando .home-letra {
	visibility: hidden;
}

/* A tela da abertura cobre a grade inteira e, estando ativa, captura o
   ponteiro — sem isto o hover nunca chega nas formas. Liberar não
   quebra o avanço de tela: o clique é escutado na raiz
   (".home-experience"), então continua funcionando por cima da grade.
   O logo volta a receber ponteiro porque é ele que revela as palavras
   secundárias no hover. */
.home-screen--abertura.is-active {
	pointer-events: none;
}

.home-screen--abertura.is-active .home-logo-reveal {
	pointer-events: auto;
}

/* Na abertura os pins ainda não são destino de clique (clicar avança de
   tela, ver home.js), mas precisam receber hover pra "mexidinha". */
.home-experience[data-screen="abertura"] .home-pin {
	pointer-events: auto;
}

/* Quem pediu menos movimento no sistema vê a abertura já montada, sem
   entrada nem balanço (o JS também respeita isso). */
@media (prefers-reduced-motion: reduce) {
	.granular-anima .home-experience.is-aguardando .home-shape-cell,
	.granular-anima .home-experience.is-aguardando .home-letra {
		visibility: visible;
	}
}

/* ---- Tela 2 (antiga "3"): Pins (conteúdo sobre a grade) ---- */
.home-screen--pins {
	color: var(--gr-color-bg);
}

.home-header {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--gr-header-height);
	padding: 8px var(--gr-container-padding);
}

.home-header__logo {
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 2.125rem; /* 34px */
	line-height: normal; /* igual ao Figma, não o 1.5 herdado do body */
	letter-spacing: -0.02em;
	/* Conferido no Figma (nó 12:433, "Mapa"): o header dessa tela usa
	   #E24612 (--gr-color-terra), a MESMA cor terracota das formas — não
	   roxo. */
	color: var(--gr-color-terra);
}

/* ".primary-nav"/".menu-toggle" são os mesmos componentes do
   ".site-header" padrão do site (reaproveitando o CSS de layout e o
   menu.js) — aqui só a cor muda pra combinar com o fundo lilás. */
.home-header .primary-nav a {
	color: var(--gr-color-terra);
}

.home-header .primary-nav.is-open {
	background: var(--gr-color-lilac);
}

/* ---- Grade de formas (elemento único, compartilhado pelas 2 telas) ----
 * Padrão = tamanho/cor da tela "pins" (formas pequenas, SEM contorno).
 * Conferido no Figma (nó 12:433, "Mapa"): as formas ali também são
 * #E24612 (terracota) — a MESMA cor da Abertura, não roxo (esse era o
 * bug: a grade usava "--gr-color-surface", a cor do fundo/acento roxo,
 * em vez da terracota real). Tamanho do triângulo também corrigido de
 * 40 pra 45px — 32×(360/256) = 45, a MESMA proporção círculo:triângulo
 * da Abertura (256:360), só em escala menor. Em "abertura" as MESMAS
 * formas ficam bem maiores e sobrepostas (--shape-size/
 * --shape-size-triangle bem maiores que a célula do grid — replicando
 * como aparecem no Figma) com um contorno de 2px — valores exatos
 * lidos no Figma via Plugin API (fill #E24612, stroke 2px inside
 * #401285, círculo/losango 256×256, triângulo 360×360). A transição de
 * 700ms nas propriedades reais (width/height/background-color/
 * box-shadow/border-width) é o que cria o efeito de "encolher/
 * transformar" ao trocar de tela.
 */
.home-shape-grid {
	--shape-color: var(--gr-color-terra);
	--shape-size: 32px;
	--shape-size-triangle: 45px;
	--shape-stroke: 0px;
	--shape-stroke-color: transparent;
	/* Lado do alvo de clique de cada forma na tela de pins (ver
	   ".home-pin::before"): maior que o ponto para dar folga ao mouse,
	   e bem menor que a célula para sobrar vazio no mapa. */
	--hit-size: 60px;
	/* SEM z-index aqui de propósito: um z-index explícito criaria um
	   novo contexto de empilhamento "irmão" do ".home-pin-preview"
	   (que também teria o seu), e testei que isso ISOLA o
	   "mix-blend-mode" das formas — elas passam a só se misturar com
	   o que está dentro do próprio contexto delas (nada), em vez de
	   enxergar a foto por baixo. Sem z-index em nenhum dos dois (só
	   "position:absolute" lado a lado), a ordem de empilhamento vem da
	   ordem no HTML — e como ".home-shape-grid" vem DEPOIS de
	   ".home-pin-preview" no markup (ver front-page.php), ela já pinta
	   por cima, sem precisar de z-index pra isso. */
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(5, 1fr);
	padding: var(--gr-header-height) var(--gr-container-padding) 0;
}

/* IMPORTANTE: o padding/tamanho da grade em si NUNCA muda entre telas —
   só as variáveis de aparência da forma (tamanho/cor/contorno) mudam
   com [data-screen]. Conferido no Figma: os frames de linha da
   Abertura ficam exatamente nas mesmas posições que os da Mapa-0/Mapa
   — é a MESMA grade nas 3 telas. */
.home-experience[data-screen="abertura"] .home-shape-grid {
	--shape-color: var(--gr-color-terra);
	--shape-size: 256px;
	--shape-size-triangle: 360px;
	--shape-stroke: 2px;
	--shape-stroke-color: var(--gr-color-roxo-forte);
}

.home-shape-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	/* min-width/min-height: 0 evita o "grid blowout": por padrão, uma
	   coluna/linha "1fr" nunca encolhe abaixo do min-content dos itens
	   dela. Como a forma da Abertura chega a 256px/360px — bem maior
	   que 1/6 da largura da tela —, sem isso as colunas que têm uma
	   forma grande cresciam mais que as outras, fazendo a grade inteira
	   mudar de geometria ao trocar de tela. Com min-width/height:0 a
	   grade sempre fica com 6×5 células idênticas entre as 3 telas, e a
	   forma grande simplesmente "vaza" visualmente pra fora da própria
	   célula (permitido pelo overflow:visible acima) em vez de esticar
	   a célula. */
	min-width: 0;
	min-height: 0;
	color: var(--shape-color);
	transition: color 700ms ease;
}

/* As duas células centrais da 3ª linha ficam vazias só durante a
   "abertura" — é onde o logo "granular" gigante fica centralizado
   (Figma: Frame 5 / Frame 8, node 6:2). Nas outras telas essas células
   voltam a mostrar a forma normalmente. */
.home-experience[data-screen="abertura"] .home-shape-cell--logo-gap {
	visibility: hidden;
}

.home-shape {
	position: relative;
	display: block;
	width: var(--shape-size);
	height: var(--shape-size);
	background: currentColor;
	flex: none;
	/* As formas ficam acima da prévia de imagem do pin (que mora numa
	   camada abaixo, na mesma ".home-stage") e usam "multiply" pra se
	   misturar com a foto por baixo — como as formas cobrem uma área
	   bem maior/mais visível que a sobreposição esparsa da foto com
	   elas, esse é o jeito mais perceptível (e mais leve) de mostrar o
	   efeito de mesclagem, em vez de aplicar "multiply" na foto inteira. */
	mix-blend-mode: multiply;
	transition:
		width 700ms ease,
		height 700ms ease,
		background-color 700ms ease,
		box-shadow 700ms ease;
}

/* Na "abertura" não existe foto nenhuma por baixo (só o fundo roxo
   escuro da própria tela) — "multiply" ali só escurecia/sujava a cor
   terracota das formas grandes à toa, sem servir pra nada (esse efeito
   só faz sentido na tela "pins", onde a prévia de imagem do pin existe
   de verdade por baixo das formas). Volta ao normal só na abertura. */
.home-experience[data-screen="abertura"] .home-shape {
	mix-blend-mode: normal;
}

.home-shape--circle {
	border-radius: 50%;
	box-shadow: inset 0 0 0 var(--shape-stroke) var(--shape-stroke-color);
}

.home-shape--diamond {
	transform: rotate(45deg);
	box-shadow: inset 0 0 0 var(--shape-stroke) var(--shape-stroke-color);
}

/* O triângulo é uma caixa normal recortada com "clip-path" — NÃO o
   truque clássico de "border" (width/height:0 + bordas transparentes).
   Aquele truque tinha um bug sério aqui: a caixa de conteúdo dele tem
   altura 0 e fica ENCOSTADA NO TOPO das bordas, então o "::after" que
   desenhava o preenchimento (posicionado com "bottom: 0", relativo a
   essa caixa de altura 0) era pintado uma altura de triângulo INTEIRA
   acima do próprio elemento — medido: 45px acima na tela de pins, que
   era exatamente o desalinhamento visível em relação aos círculos.
   Com "clip-path" a forma ocupa a própria caixa, sem pseudo-elemento
   nem deslocamento fantasma.
   Proporção: o triângulo do Figma é equilátero e ocupa 86,6% da
   largura e 75% da altura do quadrado que o envolve (insets de 6,7%
   nas laterais e 25% embaixo, conferidos nos nós 12:851 "Mapa" e
   12:996 "Abertura") — por isso width/height são frações de
   "--shape-size-triangle", e não ele inteiro.
   Contorno: na tela de pins o Figma não usa contorno nenhum
   (--shape-stroke: 0), e na Abertura os triângulos usam PNG exportado
   do Figma (ver ".home-shape--triangle-figma"), que já traz o contorno
   embutido — então aqui não precisa desenhar traço. */
.home-shape--triangle {
	position: relative;
	width: calc(var(--shape-size-triangle) * 0.8660254);
	height: calc(var(--shape-size-triangle) * 0.75);
	background: currentColor;
	border: 0;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	transition:
		width 700ms ease,
		height 700ms ease,
		background-color 700ms ease;
}

/* Tentativa anterior (girar o triângulo-de-borda via CSS transform)
   não deu certo: esse truque desenha o triângulo só com border (sem
   "caixa" real por trás — width/height:0), então a caixa de layout
   que o "transform"/"transform-origin" giram é MUITO diferente do
   contorno visível (nem o pivô nem o bounding-box batem), e o
   resultado saía deformado/deslocado em vez de simplesmente rotacionado.
   Os 6 triângulos da Abertura também NÃO são todos iguais/verticais no
   Figma — alguns ficam tombados em ângulos específicos (158.09deg,
   30deg, -90deg) — e em vez de tentar reproduzir isso via CSS de novo,
   cada um usa agora um PNG exportado direto do nó real do Figma
   (get_screenshot com contentsOnly, fundo transparente) — pixel a
   pixel igual ao desenho original, sem reconstrução aproximada.
   "--figma-tri-img/w/h" vêm inline em cada <span> (ver front-page.php):
   a imagem certa pra aquela célula, e a proporção dela (largura/altura
   em fração de "--shape-size-triangle", já que o PNG foi exportado na
   MESMA escala 1:1 do frame Figma de 1440px). O "::after" (preenchimento
   do truque antigo) é escondido — a imagem já traz preenchimento e
   contorno prontos. SÓ na abertura: a tela "pins" (formas pequenas,
   32/40px) continua com o triângulo-de-borda de sempre, confirmado
   correto pelo usuário — não mexer lá. */
.home-experience[data-screen="abertura"] .home-shape--triangle-figma {
	width: calc(var(--shape-size-triangle) * var(--figma-tri-w));
	height: calc(var(--shape-size-triangle) * var(--figma-tri-h));
	/* ".home-shape" (regra compartilhada) põe "background: currentColor"
	   — como aqui vira "background-image" (não o shorthand "background"),
	   essa cor de fundo continuaria valendo por baixo da imagem e
	   apareceria como um retângulo laranja sólido ao redor do triângulo
	   (nas áreas transparentes do PNG, fora da silhueta real). Por isso
	   zera explicitamente. */
	background-color: transparent;
	background-image: var(--figma-tri-img);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border: 0;
	/* O recorte triangular de ".home-shape--triangle" cortaria a imagem
	   (que já é a silhueta certa, inclusive girada) — aqui a caixa
	   precisa ficar inteira. */
	clip-path: none;
	/* Mesmo alinhamento por CENTROIDE da tela de pins (ver comentário
	   lá embaixo): no Figma (metadata do nó 12:996) o triângulo mora
	   dentro de um quadrado de 360px que é o que fica centralizado na
	   célula, e dentro desse quadrado ele fica encostado no topo — o
	   que coloca o CENTROIDE dele exatamente no centro da célula (a
	   caixa da forma fica 45px acima). Como aqui eu centralizo o PNG
	   recortado na tinta, o centroide cairia 45px abaixo do certo.
	   "--figma-tri-dx/dy" (inline em cada <span>) é a distância entre o
	   centro da caixa e o centroide da tinta DAQUELE png, em % da
	   própria caixa — medida direto nos pixels de cada imagem, então
	   vale também pros triângulos girados, onde o centroide sai do
	   eixo. Para o triângulo em pé dá -16,667% (= -1/6 da altura),
	   exatamente o valor que a geometria do Figma prevê. */
	transform: translate(var(--figma-tri-dx, 0%), var(--figma-tri-dy, 0%));
	transition: width 700ms ease, height 700ms ease;
}

/* ---- Palavras secundárias reveladas no hover do "granular" da
   Abertura (nodes 103:480-483 do Figma, antes na tela "intro" à parte
   — hoje eliminada; o "granular" central delas virou o próprio
   ".home-logo-pulse" que já existia na Abertura) ----
 * Tamanho: o MESMO "--gr-logo-size" responsivo do "granular" (clamp
 * definido em ".home-logo-reveal"), não um valor fixo — assim as
 * palavras sempre acompanham o tamanho dele em qualquer largura de
 * tela. Letter-spacing -2%, altura de linha 154/128 = 1.203125 (razão
 * sem unidade, já escala sozinha com o font-size).
 *
 * Posição: cada palavra fica ancorada no CENTRO da tela (mesmo ponto
 * onde "granular" já fica centralizado pelo flex/align da própria
 * ".home-screen--abertura") e deslocada por um valor em "em" — a
 * diferença exata entre o centro de cada palavra e o centro de
 * "granular" no frame "Mapa-0" do Figma (1440×1024, com fonte a
 * 128px ali), convertida de px pra em dividindo por 128 (1em = 128px
 * nesse frame). Usar "em" em vez de px é o que faz a posição também
 * escalar junto com "--gr-logo-size": como a unidade "em" num
 * "transform" resolve pelo font-size do PRÓPRIO elemento, ela cresce/
 * encolhe junto com a palavra, preservando a disposição relativa do
 * Figma em qualquer tamanho de tela:
 *   design:        delta (-298.5, -244)  px → (-2.33203125, -1.90625)  em
 *   da informação: delta   (74.5, -123)  px → ( 0.58203125, -0.9609375) em
 *   granular:      delta      (0,    0)  px → (0, 0) em (âncora)
 *   cartografia:   delta   (-115,  119)  px → (-0.8984375,   0.9296875) em
 *   desenho:       delta    (294,  240)  px → ( 2.296875,    1.875)     em
 *
 * Ficam com opacity:0 por padrão e só aparecem (opacity:1) quando o
 * "granular" (".home-logo-pulse") está em hover ou foco — por isso o
 * CSS usa ":has()" no wrapper em vez de precisar de JS pra isso. O
 * hover por mouse só liga dentro de "@media (hover:hover)" (telas sem
 * mouse de verdade não "grudam" nesse estado); o foco por teclado/tap
 * funciona em qualquer dispositivo, como alternativa acessível.
 */
.home-logo-secondary {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: var(--gr-logo-size);
	line-height: 1.203125;
	letter-spacing: -0.02em;
	/* Cor de contraste (accent/rosa), não terracota: na tela "intro"
	   original essas palavras ficavam sobre um fundo liso lilás, mas
	   agora aparecem sobre a própria grade de formas terracota da
	   Abertura — terracota sobre terracota some (mesmo bug que o
	   "granular" já tinha tido). Usa a mesma cor do "granular" ao lado. */
	color: var(--gr-color-accent);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease;
}

.home-logo-secondary--design {
	transform: translate(calc(-50% - 2.33203125em), calc(-50% - 1.90625em));
}

.home-logo-secondary--info {
	transform: translate(calc(-50% + 0.58203125em), calc(-50% - 0.9609375em));
}

.home-logo-secondary--cartografia {
	transform: translate(calc(-50% - 0.8984375em), calc(-50% + 0.9296875em));
}

.home-logo-secondary--desenho {
	transform: translate(calc(-50% + 2.296875em), calc(-50% + 1.875em));
}

.home-logo-reveal:has(.home-logo-pulse:focus-visible) .home-logo-secondary {
	opacity: 1;
}

@media (hover: hover) {
	.home-logo-reveal:has(.home-logo-pulse:hover) .home-logo-secondary {
		opacity: 1;
	}
}

/* A seta do pé do mapa só existe no celular (ver a media query no fim
   desta seção). */
.home-seta {
	display: none;
}

/* ---- Pins (só ficam clicáveis/com hover na tela "pins") e preview de
   imagem no hover ---- */
.home-pin {
	pointer-events: none;
	cursor: pointer;
}

/* Na tela de pins quem é clicável é a FORMA, não a célula inteira.
   A célula ocupa cerca de 1/6 da largura por 1/5 da altura da tela: se
   ela toda fosse o link, as 30 cobririam o mapa sem deixar vazio nenhum
   e o clique que leva para Trabalhos nunca mais aconteceria. O alvo é
   um quadrado centralizado um pouco maior que o ponto (que mede 32px, e
   45 nos triângulos), para não exigir pontaria — o resto da célula
   continua sendo vazio. */
.home-experience[data-screen="pins"] .home-pin {
	pointer-events: none;
	position: relative;
}

.home-experience[data-screen="pins"] .home-pin::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--hit-size);
	height: var(--hit-size);
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

.home-experience[data-screen="pins"] .home-shape-cell {
	cursor: pointer;
}

.home-pin:hover .home-shape,
.home-pin:focus-visible .home-shape {
	transform: scale(1.3);
}

.home-pin:hover .home-shape--diamond,
.home-pin:focus-visible .home-shape--diamond {
	transform: rotate(45deg) scale(1.3);
}

/* Alinhamento vertical do triângulo com o centro do círculo/losango da
   mesma linha. Medido na referência do Figma (nó 12:433 "Mapa"): o que
   coincide com o centro do círculo não é a caixa do triângulo, e sim o
   CENTROIDE dele (o centro de massa — num triângulo apontando pra
   cima fica a 2/3 da altura, contando do ápice, e não na metade). Lá
   isso sai "de graça" porque o triângulo é desenhado encostado no topo
   de um quadrado 1/3 maior que ele (insets "top:0, bottom:25%") e é
   esse QUADRADO que fica centralizado na célula.
   Aqui a forma é a própria caixa, então o mesmo resultado vem de subir
   o triângulo em 1/6 da altura visível dele — e como a altura visível
   é 75% de "--shape-size-triangle", isso dá size × 0.75 ÷ 6 = size/8.
   Só na tela de pins: na Abertura os triângulos são PNGs do Figma, com
   o próprio enquadramento (ver ".home-shape--triangle-figma"). */
.home-experience[data-screen="pins"] .home-shape--triangle {
	transform: translateY(calc(var(--shape-size-triangle) / -8));
}

.home-pin:hover .home-shape--triangle,
.home-pin:focus-visible .home-shape--triangle {
	transform: translateY(calc(var(--shape-size-triangle) / -8)) scale(1.3);
}

/* Imagem "simples" de propósito: sem borda, sem cantos arredondados,
   sem sombra — só a foto. Fica numa camada ABAIXO da grade de formas
   (z-index 1 < 2 da ".home-shape-grid"), e são as formas que recebem
   "mix-blend-mode: multiply" (ver ".home-shape"), não a foto — assim
   os pontos/formas da grade aparecem por cima dela já misturados com
   a cor da foto por baixo, em vez da foto inteira (bem maior que a
   área ocupada pelas formas) ficar só sutilmente "multiply" contra o
   fundo liso. A posição (left/top) é sorteada por pin em
   assets/js/home.js — aqui só garante que ela nunca "vaza" da tela
   (JS calcula left/top já descontando o tamanho da própria prévia da
   largura/altura disponíveis). */
.home-pin-preview {
	position: absolute;
	/* Desktop: 2/5 da largura ÚTIL — a largura da tela já descontadas as
	   duas margens externas (--gr-container-padding de cada lado), e não
	   2/5 da tela cheia, pra que a prévia caiba sempre dentro da margem.
	   No mobile (ver media query) ela passa a ocupar essa largura útil
	   inteira. */
	width: calc( ( 100vw - 2 * var(--gr-container-padding) ) * 2 / 5 );
	max-width: calc( 100vw - 2 * var(--gr-container-padding) );
	/* Altura livre: quem define é a proporção original da imagem. Nada de
	   "aspect-ratio" fixa aqui — era ela, junto com o "object-fit: cover"
	   lá embaixo, que cortava as fotos pra caber num 3:2 que não era o
	   delas. */
	height: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}

.home-pin-preview.is-visible {
	opacity: 1;
}

.home-pin-preview img {
	display: block;
	width: 100%;
	/* A imagem inteira, na proporção original: altura calculada a partir
	   da largura. */
	height: auto;
	/* Trava de segurança só pra foto muito vertical não estourar a altura
	   da tela. Quando ela entra em ação a imagem encolhe INTEIRA
	   ("contain"), continuando sem corte — só deixa de ocupar os 2/5
	   cheios de largura. */
	max-height: calc( 100vh - var(--gr-header-height) - 2 * var(--gr-container-padding) );
	object-fit: contain;
	object-position: center;
}

@media (max-width: 782px) {
	/*
	 * Cinco colunas no celular, não seis: numa tela estreita a sexta
	 * aperta demais os pontos. A SEQUÊNCIA continua sendo a mesma de 30
	 * do desktop — some a última coluna de cada linha e as 25 que ficam
	 * reflûem em 5×5, na mesma ordem. Nada de uma segunda lista de
	 * formas só para o celular.
	 *
	 * O recuo lateral aqui é 12px (e não os 24 do resto do site): é o
	 * que o desenho do mapa no celular pede, e o mesmo valor vale nas
	 * duas telas para a grade não escorregar de lado na transição.
	 *
	 * Embaixo fica reservada uma faixa da altura de uma linha, onde o
	 * mapa põe a seta. Com ela, as 5 linhas de formas ficam com a mesma
	 * altura que teriam se fossem 6 — 126px numa tela de 852.
	 */
	.home-shape-grid {
		grid-template-columns: repeat(5, 1fr);
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: calc((100vh - var(--gr-header-height)) / 6);
	}

	.home-shape-cell:nth-child(6n) {
		display: none;
	}

	.home-experience[data-screen="abertura"] .home-shape-grid {
		--shape-size: 184.32px;
		--shape-size-triangle: 259.2px;
	}

	/* O "granular" da abertura: 74px no desenho do celular. O clamp
	   continua valendo para as larguras intermediárias. */
	.home-logo-reveal {
		--gr-logo-size: clamp(2.5rem, 19vw, 4.625rem);
	}

	/* A seta no pé do mapa: um convite a continuar rolando, que leva à
	   página Trabalhos. O balanço lento é o que a faz ler como convite e
	   não como enfeite. Ela também aceita o toque, para quem preferir
	   tocar a arrastar. */
	.home-seta {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc((100vh - var(--gr-header-height)) / 6);
		color: var(--gr-color-terra);
		cursor: pointer;
		pointer-events: auto;
	}

	.home-seta svg {
		width: 28px;
		height: 44px;
		animation: gr-convite 2.4s ease-in-out infinite;
	}

	@keyframes gr-convite {
		0%, 60%, 100% { transform: translateY(0); }
		30% { transform: translateY(7px); }
	}

	/* Quem pediu menos movimento no sistema vê a seta parada. */
	@media (prefers-reduced-motion: reduce) {
		.home-seta svg {
			animation: none;
		}
	}

	/* Sem mouse de verdade, não existe "hover" pra revelar as palavras
	   secundárias (e a disposição em px delas é calibrada pro frame de
	   1440px do Figma, não cabe num telão pequeno) — no mobile elas
	   ficam escondidas o tempo todo, sem tentar um equivalente por
	   toque: "granular" sozinho já funciona como gatilho de avanço,
	   igual ao resto da tela. */
	.home-logo-secondary {
		display: none;
	}

	/* Mobile: a prévia ocupa toda a largura possível — a largura da tela
	   menos as duas margens externas. */
	.home-pin-preview {
		width: calc( 100vw - 2 * var(--gr-container-padding) );
	}
}

/* ==========================================================================
   9. Página "Sobre" (modelo de página, node 155:243 no Figma)
   ========================================================================== */
/*
 * Única página do site com o fundo claro: lilás (Roxos/claro) com o
 * texto em roxo forte, em vez do roxo escuro com texto branco do
 * resto. Por isso a paleta é invertida aqui via ".granular-sobre" no
 * <body> (ver granular_body_classes() em functions.php), inclusive no
 * cabeçalho, que nessa tela fica terracota sobre o lilás — igual ao do
 * mapa.
 *
 * Layout: duas colunas que no Figma medem 435 e 890 dentro dos 1344 de
 * área útil (sobrando 19 de intervalo). Aqui elas são proporcionais
 * ("435fr 890fr"), então acompanham qualquer largura de tela até
 * empilharem no mobile.
 */
.granular-sobre {
	background: var(--gr-color-lilac);
	color: var(--gr-color-roxo-forte);
}

.granular-sobre .site-header {
	background: var(--gr-color-lilac);
}

.granular-sobre .site-logo,
.granular-sobre .primary-nav a {
	color: var(--gr-color-terra);
}

.granular-sobre .primary-nav.is-open {
	background: var(--gr-color-lilac);
}

.sobre-page {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--gr-container-padding);
}

.sobre-page__colunas {
	display: grid;
	grid-template-columns: 435fr 890fr;
	gap: 19px;
	align-items: start;
}

/* ---- Coluna da esquerda: foto, nome, palavras-chave, links, contato ---- */
.sobre-perfil {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	/* Sem recuo próprio: no Figma a foto (318) e o bloco de dados (333)
	   são centralizados dentro da coluna de 435, cada um com a sua
	   largura — quem cria o respiro lateral é o max-width de cada um. */
	padding: 0;
}

/* Num container flex, todo item encolhe por padrão quando falta espaço
   no eixo principal — aqui, a vertical. Sem isto a foto é achatada
   (proporção não impede o flex de espremer) e os blocos de baixo são
   comprimidos. */
.sobre-perfil > * {
	flex-shrink: 0;
}

/* A coluna fica grudada no topo enquanto a da direita rola: "sticky"
 * logo abaixo do cabeçalho (que também é sticky, por isso o recuo do
 * tamanho dele) mais 24px de respiro. O "align-self: start" é o que faz
 * isso funcionar numa grade — sem ele a célula esticaria até a altura da
 * linha e não haveria folga nenhuma para o sticky percorrer.
 *
 * A condição de altura é o que dispensa qualquer rolagem interna aqui.
 * Um elemento preso no topo não pode passar da borda de baixo da janela:
 * se a coluna for mais alta que o espaço disponível, o que sobra fica
 * inalcançável (era o e-mail sumindo). Em vez de criar uma barrinha de
 * rolagem dentro da coluna, o sticky simplesmente não entra nessas
 * janelas — a coluna rola junto com a página, como antes, e nada fica
 * escondido. O valor: a coluna mede ~660 no desenho, mais os 96 do
 * cabeçalho, os 24 do topo e os 24 de folga embaixo. Se o conteúdo da
 * coluna crescer muito, é esse número que sobe. */
@media (min-width: 1024px) and (min-height: 820px) {
	.sobre-perfil {
		position: sticky;
		top: calc(var(--gr-header-height) + 24px);
		align-self: start;
	}
}

/* Círculo de 318×318 (node 155:399) com um véu terracota em "lighten"
   por cima — é esse véu que cria o duotone alaranjado do desenho. */
.sobre-perfil__foto {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 318px;
	aspect-ratio: 1;
	border: 1px solid var(--gr-color-roxo-forte);
	border-radius: 50%;
	overflow: hidden;
}

.sobre-perfil__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

.sobre-perfil__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gr-color-terra);
	mix-blend-mode: lighten;
	pointer-events: none;
}

.sobre-perfil__dados {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 333px;
}

.sobre-perfil__nome {
	margin: 0;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 1.5rem; /* 24px */
	line-height: normal;
	color: var(--gr-color-roxo-forte);
}

/* Mesma caixa das etiquetas do post — mesmo tamanho (14px), mesmo canto
   de 8px e o mesmo respiro assimétrico (2px em cima, 8px embaixo), que é
   o que faz o texto assentar no meio apesar da fonte. O que muda aqui
   são só as cores, pelo fundo claro: contorno e texto em roxo forte. */
.sobre-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sobre-tags li {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--gr-color-roxo-forte);
	border-radius: 8px;
	padding: 2px 12px 8px;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	color: var(--gr-color-roxo-forte);
	white-space: nowrap;
}

/* Os links reaproveitam ".post-links" (mesma marcação e mesma seta via
   máscara); no fundo claro eles trocam de cor, e a seta acompanha
   sozinha porque é desenhada com "currentColor". */
.sobre-perfil__dados .post-links {
	margin: 0;
	padding: 0;
	list-style: none;
	/* No post essa lista tem "order: 5", que a joga pro fim da coluna
	   (lá ela vem depois do texto). Aqui a coluna também é flex, então
	   sem zerar isso os links pulariam pra baixo do bloco de contato —
	   no Figma eles vêm antes dele. */
	order: 0;
}

.sobre-perfil__dados .post-links a {
	color: var(--gr-color-roxo-forte);
}

.sobre-perfil__dados .post-links a:hover,
.sobre-perfil__dados .post-links a:focus-visible {
	color: var(--gr-color-terra);
}

.sobre-perfil__contato {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 8px 0;
	border-top: 1px solid var(--gr-color-roxo-forte);
}

.sobre-perfil__frase {
	margin: 0;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 1rem; /* 16px */
	line-height: normal;
	color: var(--gr-color-roxo-forte);
}

/* Mesma caixa das etiquetas, mas preenchida: é o "botão" de e-mail. */
/* Sem contorno: só o retângulo terracota, com o respiro do Figma
   (node 155:452). */
.sobre-perfil__email {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	border: 0;
	border-radius: 8px;
	padding: 2px 12px 8px;
	background: var(--gr-color-terra);
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	color: var(--gr-color-lilac);
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.sobre-perfil__email:hover,
.sobre-perfil__email:focus-visible {
	background: var(--gr-color-roxo-forte);
	color: var(--gr-color-lilac);
}

/* ---- Coluna da direita: apresentação e trajetória ---- */
.sobre-conteudo {
	display: flex;
	flex-direction: column;
	gap: 80px;
	padding: 184px 64px 0;
}

/* O texto de apresentação usa a Compagnon (não a fonte de corpo do
   resto do site) em 20px, como no Figma. O vão de 24px é o espaçamento
   de parágrafo do bloco de texto no Figma — e também o que separa o
   "olá!" do primeiro parágrafo, então um "gap" só dá conta dos dois. */
.sobre-texto {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 1.25rem; /* 20px */
	line-height: normal;
	color: var(--gr-color-roxo-forte);
}

.sobre-texto > * {
	margin: 0;
}

/* O "olá!" — qualquer título que você escrever no editor vira esse
   mesmo destaque. */
.sobre-texto h1,
.sobre-texto h2,
.sobre-texto h3 {
	font-family: var(--gr-font-display);
	font-weight: 700;
	font-size: 2.25rem; /* 36px */
	line-height: normal;
}

.sobre-texto a {
	color: inherit;
}

/* Ano + descrição em duas colunas: o ano ocupa uma faixa fixa de 104px
   e a descrição toma o resto, como no Figma. */
.sobre-trajetoria {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 16px;
	margin: 0;
	padding: 56px 0 80px;
	border-top: 1px solid var(--gr-color-roxo-forte);
	font-size: 1rem; /* 16px */
}

.sobre-trajetoria dt {
	font-family: var(--gr-font-display);
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--gr-color-roxo-forte);
}

.sobre-trajetoria dd {
	margin: 0;
	font-family: var(--gr-font-body);
	font-weight: 300;
	line-height: 1.2;
	color: var(--gr-color-roxo-forte);
}

/* ---- Mobile ----
 * O Figma não tem uma versão mobile desta página (só "sobre-desktop"),
 * então aqui segue a mesma lógica das outras: uma coluna só, perfil
 * antes do texto, e os respiros grandes do desktop (o recuo de 184px no
 * topo da coluna da direita, por exemplo) reduzidos ao que cabe. */
@media (max-width: 1023px) {
	.sobre-page__colunas {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	/* Empilhado, o sticky não faria sentido: a coluna da foto passa a ser
	   o começo da página, não uma coluna ao lado. Ele já não é aplicado
	   aqui (a condição de largura acima cuida disso), então não há nada a
	   desfazer. */
	.sobre-perfil {
		padding: 0;
	}

	.sobre-conteudo {
		padding: 0;
		gap: 48px;
	}

	.sobre-trajetoria {
		padding: 32px 0 48px;
	}
}

@media (max-width: 782px) {
	.sobre-texto {
		font-size: 1.125rem; /* 18px */
	}

	.sobre-texto h1,
	.sobre-texto h2,
	.sobre-texto h3 {
		font-size: 1.75rem; /* 28px */
	}

	.sobre-trajetoria {
		grid-template-columns: 72px 1fr;
		gap: 12px;
	}
}

/* ==========================================================================
   10. Barra de filtros da página "Trabalhos" (node 155:331 no Figma)
   ========================================================================== */
/*
 * Dois grupos lado a lado — "categoria" e "tags" —, cada um com um
 * rótulo em maiúsculas e as etiquetas correspondentes. As etiquetas
 * são as mesmas do post (ver ".post-tags a", na seção 5): mesma caixa,
 * mesmo contorno, mesmos estados de hover e de selecionado. O que muda
 * é só o papel — aqui elas ligam/desligam o filtro.
 */
.barra-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 0 8px 24px;
}

.barra-filtros__grupo {
	display: flex;
	align-items: center;
	gap: var(--gr-gap);
}

.barra-filtros__rotulo {
	margin: 0;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--gr-color-white);
}

.barra-filtros__itens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mesmo motivo das tags do card: como bloco, o <li> ganharia 2px da
   linha de texto em volta da etiqueta. */
.barra-filtros__itens li {
	display: flex;
}

.trabalhos-vazio {
	margin: 0;
	padding: 24px 8px;
	font-family: var(--gr-font-display);
	font-size: 1rem;
}

/* No mobile o Figma empilha os dois grupos, com o rótulo numa coluna
   fixa à esquerda e as etiquetas quebrando ao lado dele (node 155:360). */
@media (max-width: 782px) {
	.barra-filtros {
		flex-direction: column;
		gap: 32px;
	}

	.barra-filtros__grupo {
		align-items: flex-start;
	}

	.barra-filtros__rotulo {
		flex: 0 0 80px;
		width: 80px;
		padding-top: 7px;
	}
}

/* ==========================================================================
   11. Blocos do editor dentro do post
   ========================================================================== */
/*
 * As imagens do post são blocos normais do WordPress (Imagem, Galeria,
 * Colunas, Mídia e texto, Vídeo). O tema separa os blocos visuais dos de
 * texto e manda cada grupo para a sua coluna — ver inc/blocos.php —, e o
 * que está aqui é só o acerto de aparência: nada de cantos
 * arredondados, respiros iguais aos do desenho e imagens ocupando a
 * largura da coluna sem corte.
 *
 * O bloco Galeria do WordPress já traz o próprio CSS (inclusive o
 * controle de número de colunas, que agora é seu, na barra lateral do
 * editor). Aqui só ajustamos o vão entre as imagens para o mesmo 16px
 * do resto da coluna.
 */
.post-gallery .wp-block-image,
.post-gallery .wp-block-gallery,
.post-gallery .wp-block-video,
.post-gallery .wp-block-embed,
.post-gallery .wp-block-columns,
.post-gallery .wp-block-media-text {
	margin: 0;
	border-radius: 0;
}

.post-gallery .wp-block-image img,
.post-gallery .wp-block-gallery img,
.post-gallery .wp-block-media-text__media img {
	border-radius: 0;
}

/* O vão entre as imagens da Galeria: o mesmo 16px que separava a imagem
   grande da grade no desenho. É a variável que o próprio bloco usa. */
.post-gallery .wp-block-gallery {
	--wp--style--unstable-gallery-gap: var(--gr-gap-gallery);
	gap: var(--gr-gap-gallery);
}

.post-gallery .wp-block-columns {
	gap: var(--gr-gap-gallery);
}

/* Legendas: mesma fonte e tamanho das tags, em lilás, alinhadas à
   esquerda (o padrão do bloco é centralizado). */
.post-gallery figcaption {
	margin: 8px 0 0;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	text-align: left;
	color: var(--gr-color-lilac);
}

/* Imagens de largura "ampla"/"inteira" dentro da coluna: aqui a coluna
   JÁ é a área larga da página, então elas não precisam (nem devem)
   estourar para fora dela. */
.post-gallery .alignwide,
.post-gallery .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Se algum bloco visual acabar no corpo de texto (uma imagem dentro de
   um bloco de Colunas misto, por exemplo), ele ainda se comporta. */
.post-entry-content img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.post-entry-content figure {
	margin: 0;
}

/* ==========================================================================
   12. Ampliar as imagens do post
   ========================================================================== */
/*
 * Clicar numa imagem do corpo do post abre ela sobre a página, no maior
 * tamanho que couber. A marcação toda é criada pelo
 * assets/js/ampliar.js — sem JavaScript nada disso existe e a página
 * segue inteira.
 */

/* O botão que envolve a imagem não deve mudar nada na aparência dela:
   é só a área clicável. */
.post-ampliar {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: zoom-in;
}

.post-ampliar img {
	display: block;
}

/* Enquanto a caixa está aberta a página de trás não rola. */
.gr-ampliando,
.gr-ampliando body {
	overflow: hidden;
}

.gr-ampliar {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 24px;
	/* Quase opaco, para a imagem não competir com o que está atrás —
	   mas não preto: o roxo do tema mantém a página reconhecível. */
	background: color-mix(in srgb, var(--gr-color-roxo-forte) 97%, transparent);
	cursor: zoom-out;
}

.gr-ampliar[hidden] {
	display: none;
}

.gr-ampliar__quadro {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	min-width: 0;
	max-height: 100%;
	cursor: default;
}

/* A imagem ocupa o máximo que couber sem cortar nem passar do próprio
   tamanho. O min() combina os dois limites: o espaço disponível e o
   tamanho real do arquivo, que o JS passa nas variáveis — esticar além
   dele só deixaria a foto borrada. */
.gr-ampliar__quadro img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, var(--gr-ampliar-w, 100%));
	max-height: min(100%, var(--gr-ampliar-h, 100%));
	object-fit: contain;
	min-height: 0;
}

.gr-ampliar figcaption {
	margin: 0;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	text-align: center;
	color: var(--gr-color-lilac);
}

.gr-ampliar figcaption[hidden] {
	display: none;
}

.gr-ampliar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gr-color-lilac);
	cursor: pointer;
	transition: color 120ms ease, background-color 120ms ease;
}

.gr-ampliar button[hidden] {
	display: none;
}

.gr-ampliar button:hover,
.gr-ampliar button:focus-visible {
	color: var(--gr-color-terra);
}

.gr-ampliar__passo {
	width: 48px;
	height: 48px;
}

.gr-ampliar__passo svg {
	width: 28px;
	height: 28px;
}

.gr-ampliar__passo--ant { grid-column: 1; }
.gr-ampliar__passo--prox { grid-column: 3; }

.gr-ampliar__fechar {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
}

.gr-ampliar__fechar svg {
	width: 22px;
	height: 22px;
}

.gr-ampliar__contador {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	margin: 0;
	text-align: center;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-variant-numeric: tabular-nums;
	color: var(--gr-color-lilac);
	pointer-events: none;
}

.gr-ampliar__contador[hidden] {
	display: none;
}

/* No celular as setas saem das laterais (que são estreitas demais para
   elas) e vão para baixo, ao lado do contador. */
@media (max-width: 640px) {
	.gr-ampliar {
		grid-template-columns: 1fr;
		padding: 16px 16px 76px;
	}

	.gr-ampliar__quadro {
		grid-column: 1;
	}

	.gr-ampliar__passo {
		position: absolute;
		bottom: 12px;
	}

	.gr-ampliar__passo--ant { left: 16px; }
	.gr-ampliar__passo--prox { right: 16px; }

	.gr-ampliar__contador { bottom: 26px; }
}