/* =========================================================================
   Andrew Sousa — Estilo principal
   Design editorial minimalista. Tema ESCURO por padrão, com alternância
   claro/escuro. Tokens em CSS custom properties para ajuste fácil.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------------------- */
:root {
	/* Tipografia. Display = grotesco bold (estilo da referência). */
	--font-display: "Syne", "Helvetica Neue", Arial, system-ui, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Escala tipográfica fluida */
	--fs-300: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
	--fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-500: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-600: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--fs-700: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
	--fs-hero: clamp(3rem, 1.5rem + 9vw, 9rem);

	/* Espaçamento */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 8rem;

	/* Layout */
	--container-max: 1600px;
	--content-max: 1280px;
	--container-pad: clamp(1.25rem, 6vw, 128px);
	--header-h: 96px;

	--tracking-wide: 0.1em;
	--radius: 8px;
	--color-hl: #e6ff00;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 0.4s;
}

/* Tema escuro (padrão) */
:root,
[data-theme="dark"] {
	color-scheme: dark;
	--color-bg: #000000;
	--color-surface: #0d0d0d;
	--color-ink: #ffffff;
	--color-muted: #a6a6a6;
	--color-line: #262626;
	--color-accent: #ffffff;
	--color-inverse: #000000;
}

/* Tema claro */
[data-theme="light"] {
	color-scheme: light;
	--color-bg: #f4f2ed;
	--color-surface: #ffffff;
	--color-ink: #141414;
	--color-muted: #6b6b6b;
	--color-line: #e2ded5;
	--color-accent: #141414;
	--color-inverse: #f4f2ed;
}

/* -------------------------------------------------------------------------
   2. Reset moderno e enxuto
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
	min-height: 100vh;
	background-color: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-400);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, picture, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--dur) var(--ease);
}
a:hover { opacity: 0.6; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: -0.02em;
}

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

button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
   3. Utilitários
   ------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-lg); }
.section__title { font-size: var(--fs-600); margin-bottom: var(--space-md); }

.eyebrow,
.footer-col__title {
	font-family: var(--font-body);
	font-size: var(--fs-300);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-muted);
	font-weight: 600;
}

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

.skip-link {
	position: absolute;
	left: -9999px; top: 0;
	z-index: 1000;
	background: var(--color-ink);
	color: var(--color-inverse);
	padding: var(--space-xs) var(--space-sm);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

.button {
	display: inline-block;
	border: 1px solid var(--color-ink);
	padding: 0.75em 1.75em;
	font-size: var(--fs-300);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.button:hover {
	background: var(--color-ink);
	color: var(--color-inverse);
	opacity: 1;
}

/* -------------------------------------------------------------------------
   4. Cabeçalho / Navegação
   ------------------------------------------------------------------------- */
.topbar {
	background: var(--color-ink);
	color: var(--color-bg);
	font-size: var(--fs-300);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	flex-wrap: wrap;
	min-height: 38px;
	padding-block: 8px;
	text-align: center;
}
.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.02em;
}

.site-header {
	position: relative;
	z-index: 50;
	background: color-mix(in srgb, var(--color-bg) 85%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
}
.site-header.is-sticky {
	position: sticky;
	top: 0;
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--header-h);
	gap: var(--space-md);
}

.site-branding { grid-column: 1; justify-self: start; }
.primary-nav { grid-column: 2; justify-self: center; }
.header-actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.site-title {
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.45px;
	margin: 0;
}
.custom-logo { max-height: 40px; width: auto; }

.primary-menu {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.primary-menu a {
	position: relative;
	display: inline-block;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	padding: 6px 2px;
	transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.primary-menu a:hover {
	opacity: 1;
}

/* Risco (sublinhado) no hover e na página atual — exceto em "Selecionados" */
.primary-menu .menu-item:not(.menu-item-selecionados) > a::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 0;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease);
}
.primary-menu .menu-item:not(.menu-item-selecionados) > a:hover::after,
.primary-menu .menu-item.current-menu-item:not(.menu-item-selecionados) > a::after {
	transform: scaleX(1);
}

/* Botão de tema (sol/lua) */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Hambúrguer (mobile) */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
}
.nav-toggle__bar {
	display: block;
	width: 22px; height: 1.5px;
	background: var(--color-ink);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease);
	z-index: 39;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------------------
   5. Hero (Home) — grade de imagens + título sobreposto
   ------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: calc(100svh - var(--header-h));
	display: flex;
	align-items: center;
	padding-block: var(--space-md);
	overflow: hidden;
}

.hero__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: clamp(0.5rem, 1.5vw, 1.25rem);
	width: 100%;
	max-width: 960px;
	height: min(70vh, 640px);
	margin-inline: auto;
	will-change: transform;
}

.hero__heading { will-change: transform; }

.hero__cell {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	border-radius: var(--radius);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Overlay escuro: reduz o destaque das imagens e realça o título. */
.hero__cell::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 10, 0.5);
	pointer-events: none;
	transition: background var(--dur) var(--ease);
}
.hero__cell:hover {
	transform: scale(1.06);
	z-index: 1;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.hero__cell:hover::after { background: transparent; }

.hero__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__heading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	padding-inline: var(--space-sm);
	text-align: center;
	pointer-events: none;
	z-index: 2;
}

.hero__title {
	margin: 0;
	font-size: clamp(2rem, 0.5rem + 8vw, 8rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .hero__title { text-shadow: 0 2px 40px rgba(255, 255, 255, 0.45); }

.hero__role {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(0.7rem, 0.35rem + 1.3vw, 1.5rem);
	text-transform: uppercase;
	letter-spacing: 1em;
	text-indent: 1em;
	color: var(--color-ink);
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero__bio {
	position: absolute;
	left: var(--container-pad);
	bottom: var(--space-md);
	max-width: 40ch;
	font-size: var(--fs-300);
	line-height: 1.6;
	color: var(--color-muted);
	z-index: 3;
}

/* -------------------------------------------------------------------------
   6. Grid de trabalhos / posts
   ------------------------------------------------------------------------- */
.work-grid,
.posts-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-md);
}
.work-card__media img,
.post-item__thumb img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
	transition: transform var(--dur) var(--ease);
}
.work-card__link:hover .work-card__media img { transform: scale(1.03); }
.work-card__title,
.post-item__title {
	display: block;
	margin-top: var(--space-sm);
	font-family: var(--font-display);
	font-size: var(--fs-500);
}

/* -------------------------------------------------------------------------
   7. Conteúdo (páginas e singular)
   ------------------------------------------------------------------------- */
.page-header { padding-block: var(--space-lg) var(--space-md); }
.page-title { font-size: var(--fs-700); }
.entry-content, .page-content { max-width: 68ch; }
.entry-content > * + * { margin-top: var(--space-sm); }
.entry-content h2 { font-size: var(--fs-600); margin-top: var(--space-md); }
.entry-content h3 { font-size: var(--fs-500); margin-top: var(--space-md); }
.entry-featured { margin-block: var(--space-md); }
.entry-featured img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }

/* -------------------------------------------------------------------------
   8. Rodapé
   ------------------------------------------------------------------------- */
.site-footer {
	margin-top: var(--space-xl);
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-lg);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-md);
	padding-bottom: var(--space-lg);
}
.footer-col__title { margin-bottom: var(--space-sm); }
.footer-col__line { font-size: var(--fs-300); }
.footer-menu { display: flex; flex-direction: column; gap: var(--space-xs); }
.social-links { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.social-link { font-size: var(--fs-300); }

.marquee {
	overflow: hidden;
	border-top: 1px solid var(--color-line);
	padding-block: var(--space-md);
}
.marquee__track {
	display: flex;
	gap: var(--space-md);
	width: max-content;
	animation: as-marquee 30s linear infinite;
}
.marquee__item {
	font-family: var(--font-display);
	font-size: var(--fs-700);
	font-weight: 700;
	white-space: nowrap;
	color: var(--color-ink);
}
@keyframes as-marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------------------
   9. Paginação / misc
   ------------------------------------------------------------------------- */
.pagination, .nav-links { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }

/* Página 404 — editorial, com brilho sutil e ações destacadas. */
.error-404 {
	position: relative;
	min-height: calc(100vh - var(--header-h));
	display: flex;
	align-items: center;
	overflow: hidden;
}
.error-404::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90vmax;
	height: 60vmax;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(230, 255, 0, 0.10), rgba(230, 255, 0, 0) 70%);
	pointer-events: none;
	z-index: 0;
}
.error-404__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding-block: var(--space-lg);
}
.error-404__eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--color-muted);
	margin-bottom: var(--space-sm);
}
.error-404__code {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-size: clamp(6rem, 3rem + 22vw, 18rem);
	margin: 0;
	background: linear-gradient(180deg, var(--color-ink) 30%, var(--color-muted) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.error-404__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	letter-spacing: -0.02em;
	margin-top: var(--space-xs);
}
.error-404__text {
	max-width: 46ch;
	margin: var(--space-sm) auto 0;
	color: var(--color-muted);
	font-size: var(--fs-400);
}
.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
	margin-top: var(--space-md);
}
.error-404__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border-radius: 999px;
	border: 1px solid var(--color-line);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-ink);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.error-404__btn:hover {
	transform: translateY(-2px);
	border-color: var(--color-ink);
}
.error-404__btn--primary {
	background: var(--color-hl);
	border-color: var(--color-hl);
	color: #000;
}
.error-404__btn--primary:hover {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-inverse);
}
.error-404__search {
	margin-top: var(--space-md);
	display: flex;
	justify-content: center;
}
.error-404__search .search-form {
	display: inline-flex;
	gap: 8px;
	width: min(420px, 90vw);
}
.error-404__search .search-field {
	flex: 1 1 auto;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	padding: 11px 18px;
	color: var(--color-ink);
}
.error-404__search .search-field:focus {
	outline: none;
	border-color: var(--color-hl);
	box-shadow: 0 0 0 3px rgba(230, 255, 0, 0.18);
}
.error-404__search .search-submit {
	border-radius: 999px;
	padding: 11px 22px;
	border: 1px solid var(--color-line);
	background: transparent;
	color: var(--color-ink);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.error-404__search .search-submit:hover {
	background: var(--color-ink);
	color: var(--color-inverse);
}
@media (max-width: 480px) {
	.error-404__search .search-form { flex-direction: column; }
}

/* -------------------------------------------------------------------------
   10. Responsivo
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.nav-toggle { display: flex; }

	.primary-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(78vw, 320px);
		height: 100svh;
		background: var(--color-bg);
		border-right: 1px solid var(--color-line);
		padding: calc(var(--header-h) + var(--space-md)) 0 var(--space-md);
		transform: translateX(-100%);
		transition: transform var(--dur) var(--ease);
		z-index: 40;
	}
	.primary-nav.is-open { transform: translateX(0); }
	.primary-menu { flex-direction: column; gap: 0; }
	.primary-menu a {
		display: block;
		width: 100%;
		font-size: 16px;
		line-height: 24px;
		padding: 14px var(--container-pad);
	}

	.nav-overlay { display: block; }

	.hero__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		max-width: 460px;
		height: min(70vh, 560px);
	}
	.hero__cell:nth-child(n + 5) { display: none; } /* mostra 4 no mobile */
	.hero__bio { position: static; margin-top: var(--space-md); max-width: none; }
	.hero {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		min-height: 0;
		padding-block: var(--space-lg);
	}
}

/* -------------------------------------------------------------------------
   11. Projetos (listagem)
   ------------------------------------------------------------------------- */
.projects__title {
	font-size: clamp(2.75rem, 1rem + 9vw, 128px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
	margin: var(--space-lg) 0 var(--space-lg);
}

.project-list { border-top: 0; }

.project-row {
	display: block;
	border-bottom: 1px solid var(--color-line);
	transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.project-row:hover { opacity: 1; background-color: var(--color-hl); }
.project-row:hover .project-row__name,
.project-row:hover .project-row__year { color: #000; }
.project-row:hover .tag { color: #000; border-color: #000; }

.project-row__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 24px var(--container-pad);
}

.project-row__name {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}


.project-row__meta {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-shrink: 0;
}
.project-row__tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

.tag {
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	border: 1px solid var(--color-line);
	padding: 4px 12px;
	border-radius: 0;
	white-space: nowrap;
}

.project-row__year {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1.4px;
	color: var(--color-muted);
	min-width: 4ch;
	text-align: right;
}

.project-preview {
	position: fixed;
	top: 50%;
	right: clamp(1.5rem, 6vw, 128px);
	width: clamp(220px, 24vw, 320px);
	aspect-ratio: 3 / 4;
	height: auto;
	border-radius: var(--radius);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: translate(16px, -50%);
	pointer-events: none;
	z-index: 40;
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.project-preview.is-visible {
	opacity: 1;
	transform: translate(0, -50%);
}

.projects__wrap[data-loading="true"] .project-list {
	opacity: 0.35;
	transition: opacity 0.2s var(--ease);
}

.pagination__list {
	display: flex;
	gap: var(--space-md);
	list-style: none;
	padding: 0;
	margin-top: var(--space-lg);
}
.pagination__link {
	font-family: var(--font-body);
	font-size: var(--fs-400);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
}
.pagination__link.is-current {
	border-bottom-color: var(--color-ink);
	opacity: 1;
}

.project-single__meta {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

@media (max-width: 768px) {
	.projects { padding-top: var(--space-md); }
	.projects__title { margin-block: var(--space-md); }

	.project-row__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		padding-block: 16px;
	}
	.project-row__tags { display: none; }
	.project-row__name { font-size: 18px; line-height: 24px; }
	.project-row__year { min-width: auto; }

	.project-preview {
		left: auto;
		right: 16px;
		width: min(45vw, 180px);
		transform: translate(16px, -50%) scale(0.96);
	}
	.project-preview.is-visible {
		transform: translate(0, -50%) scale(1);
	}
}

/* -------------------------------------------------------------------------
   12. Projeto (single) — seções flexíveis
   ------------------------------------------------------------------------- */
.project { padding-bottom: var(--space-md); }

.project__header { padding-block: var(--space-md) var(--space-md); }

.project__eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	margin-bottom: var(--space-sm);
}

.project__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 1rem + 4.5vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.project__intro {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-lg);
	margin-top: var(--space-md);
	align-items: start;
}

.project__facts {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	order: 2;
}
.project__fact dt {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
}
.project__fact dd {
	margin: 0;
	font-size: var(--fs-400);
}

.project__lead {
	max-width: 42ch;
	margin-left: 0;
	order: 1;
	font-size: var(--fs-400);
	line-height: 1.6;
}
.project__lead > * + * { margin-top: var(--space-sm); }

.project-prose {
	max-width: 1100px;
	margin: var(--space-lg) auto;
	padding-inline: var(--container-pad);
}
.project-prose > * + * { margin-top: var(--space-sm); }
.project-prose__title {
	font-family: var(--font-display);
	font-size: var(--fs-600);
	margin-bottom: var(--space-sm);
}

.project-media { margin: 0; }
.project-media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	display: block;
}

.project-media--full {
	width: 100%;
	max-width: var(--content-max);
	margin: var(--space-lg) auto;
	padding-inline: var(--container-pad);
}

.project-media--screen {
	width: 100%;
	margin-block: var(--space-lg);
	padding-inline: clamp(8px, 1vw, 20px);
}
.project-media--screen .project-media__btn { cursor: zoom-in; }
.project-media--screen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.project-carousel {
	position: relative;
	--cols: 1;
	--gap: var(--space-sm);
	max-width: var(--content-max);
	margin: var(--space-lg) auto;
	padding-inline: var(--container-pad);
}
.project-carousel__viewport { overflow: hidden; }
.project-carousel__track {
	display: flex;
	gap: var(--gap);
	transition: transform 0.5s var(--ease);
}
.project-carousel__item {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	margin: 0;
}
.project-carousel__item .project-media__btn { cursor: zoom-in; }
.project-carousel__item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}
.project-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #161618;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.project-carousel__arrow:hover { background: var(--color-hl); color: #000; }
.project-carousel__arrow--prev { left: calc(var(--container-pad) - 24px); }
.project-carousel__arrow--next { right: calc(var(--container-pad) - 24px); }
.project-carousel__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
	background: #161618;
	color: #fff;
}

.project-grid {
	display: grid;
	gap: var(--space-md);
	max-width: var(--content-max);
	margin: var(--space-lg) auto;
	padding-inline: var(--container-pad);
}
.project-grid--2 { grid-template-columns: repeat(2, 1fr); }
.project-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Blocos colocados dentro de uma linha/coluna preenchem a célula: neutraliza
   as margens/larguras/paddings próprios dos módulos (que valem só quando eles
   são usados sozinhos, em largura total). */
.project-grid > .project-media,
.project-grid > .project-media--full,
.project-grid > .project-media--screen,
.project-grid > .project-video,
.project-grid > .project-prose,
.project-grid > .project-label {
	max-width: none;
	width: 100%;
	margin: 0;
	padding-inline: 0;
}
.project-grid > .project-media--screen img,
.project-grid > .project-media--full img {
	width: 100%;
	height: auto;
}

.project-caption {
	margin-top: var(--space-xs);
	font-size: 14px;
	color: var(--color-muted);
}

.project-video {
	max-width: var(--content-max);
	margin: var(--space-lg) auto;
	padding-inline: var(--container-pad);
}
/* Tamanhos do bloco de vídeo (Pequeno / Médio / Grande / Tela cheia). */
.project-video--small { max-width: 760px; }
.project-video--medium { max-width: var(--content-max); }
.project-video--large { max-width: var(--container-max); }
.project-video--full {
	max-width: none;
	padding-inline: clamp(8px, 1vw, 20px);
}
.project-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface);
}
.project-video__frame video,
.project-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.project-nav { margin-top: var(--space-lg); }

@media (max-width: 768px) {
	.project__intro { grid-template-columns: 1fr; gap: var(--space-md); }
	.project-grid--2,
	.project-grid--3 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   13. Projeto (single) — módulos adicionais
   ------------------------------------------------------------------------- */
.project-media__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.project-media.is-zoom {
	overflow: hidden;
	border-radius: var(--radius);
}
.project-media.is-zoom img { transition: transform 0.6s var(--ease); }
.project-media.is-zoom:hover img { transform: scale(1.04); }

.project-grid--split { grid-template-columns: 1.6fr 1fr; align-items: start; }

.project-label {
	max-width: var(--content-max);
	margin: var(--space-lg) auto var(--space-sm);
	padding: var(--space-sm) var(--container-pad) 0;
	border-top: 1px solid var(--color-line);
}
.project-label span {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-500);
	text-transform: lowercase;
}
.project-label--inline {
	border-top: 0;
	margin-bottom: var(--space-md);
	padding-top: 0;
}
.project-label--inline span {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	font-family: var(--font-body);
}

.project-credits { margin-block: var(--space-xl) var(--space-lg); }
.project-credits__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-md);
	margin: 0;
}
.project-credits__list dt {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	margin-bottom: 4px;
}
.project-credits__list dd { margin: 0; font-size: var(--fs-400); }



.project-related { margin-block: var(--space-lg) 0; }
.project-related__row {
	display: flex;
	width: 100%;
}
.related-card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
.related-card:hover { opacity: 1; }
.related-card__media { display: block; overflow: hidden; }
.related-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 7 / 5;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.related-card:hover .related-card__media img { transform: scale(1.06); }
.related-card__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-lg) var(--space-sm) var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--fs-300);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	text-align: center;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.related-card:hover .related-card__title { opacity: 1; }



.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	pointer-events: none;
	cursor: zoom-out;
	transition: opacity 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox__figure {
	position: relative;
	display: inline-block;
	max-width: min(92vw, 1200px);
	max-height: 90vh;
}
.lightbox__figure img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: var(--radius);
	cursor: default;
}
.lightbox__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #161618;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	cursor: pointer;
	transform: translate(50%, -50%);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__close:hover {
	background: var(--color-hl);
	color: #000;
	transform: translate(50%, -50%) rotate(90deg);
}

@media (max-width: 768px) {
	.lightbox__close { width: 38px; height: 38px; }
}

@media (max-width: 768px) {
	.project-grid--split { grid-template-columns: 1fr; }
	.project-related__row { flex-wrap: wrap; }
	.related-card { flex: 1 1 50%; }

}

/* -------------------------------------------------------------------------
   14. Página Sobre
   ------------------------------------------------------------------------- */
.about { padding-block: var(--space-lg); }

.about__grid {
	display: grid;
	grid-template-columns: minmax(220px, 0.85fr) auto minmax(300px, 1.05fr);
	grid-template-areas:
		"intro  photo  bio"
		"awards photo  bio"
		"exp    photo  bio";
	column-gap: clamp(1rem, 2vw, 2rem);
	row-gap: var(--space-md);
	align-items: start;
}

.about__intro { grid-area: intro; position: relative; z-index: 5; margin-top: clamp(1rem, 4vw, 3.5rem); }
.about__title { position: relative; z-index: 5; }
.about__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(4rem, 2rem + 10vw, 10rem);
	line-height: 0.85;
	white-space: nowrap;
	letter-spacing: -0.03em;
	margin: 0;
}
.about__sub {
	margin-top: var(--space-sm);
	max-width: 26ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-muted);
}

.about__photo {
	grid-area: photo;
	align-self: start;
	position: relative;
	z-index: 0;
	width: clamp(240px, 32vw, 460px);
}
.about__photo::before {
	content: "";
	position: absolute;
	inset: -14%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.07), transparent 65%);
	z-index: -1;
}
.about__photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 50%;
}

.about__bio {
	grid-area: bio;
	position: relative;
	z-index: 10;
	max-width: 505px;
}
.about__bio p { font-size: 15px; line-height: 1.8; }
.about__bio p + p { margin-top: var(--space-md); }

/* Redes sociais (logos) abaixo da bio na página Sobre. */
.about-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}
.about-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--color-muted);
	transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.about-social__link:hover {
	color: var(--color-ink);
	transform: translateY(-2px);
}
.about-social__link svg {
	width: 22px;
	height: 22px;
	display: block;
}

.about__awards { grid-area: awards; }
.about__exp { grid-area: exp; }
.about-block { margin-top: var(--space-lg); }
.about-block__title {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--space-md);
}
.about-block__title--sm { font-size: 11px; }

.about-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.about-list__item { display: flex; flex-direction: column; gap: 2px; }
.about-list__name { font-size: 15px; font-weight: 700; }
.about-list__detail { font-size: 12px; color: var(--color-muted); }

.about-list__item--badge {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-xs);
}
.about-list__text { display: flex; flex-direction: column; gap: 2px; }
.about-list__logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }

.about-list--exp .about-list__name { font-size: 11px; font-weight: 400; }
.about-list--exp .about-list__item--current .about-list__name { font-size: 14px; font-weight: 700; }

@media (max-width: 900px) {
	.about__grid {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}
	.about__photo { order: 1; width: 100%; max-width: 360px; margin-left: 0; align-self: center; }
	.about__intro { order: 2; margin-top: 0; }
	.about__bio { order: 3; max-width: none; margin-left: 0; }
	.about__awards { order: 4; }
	.about__exp { order: 5; }
	.about__title { font-size: clamp(3.5rem, 2rem + 12vw, 6rem); }
}

/* -------------------------------------------------------------------------
   15. Página Contato
   ------------------------------------------------------------------------- */
.contact-hero {
	padding-block: clamp(3rem, 8vw, 7rem) var(--space-lg);
	border-bottom: 1px solid var(--color-line);
}
.contact-hero__status {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	margin-bottom: var(--space-md);
}
.contact-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1e8c4f;
	box-shadow: 0 0 0 0 #1e8c4f;
	animation: as-pulse 2.4s var(--ease) infinite;
}
@keyframes as-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, #1e8c4f 60%, transparent); }
	70% { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.contact-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.75rem, 1.5rem + 7vw, 7rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	max-width: 16ch;
}
.contact-hero__lead {
	margin-top: var(--space-md);
	max-width: 52ch;
	font-size: var(--fs-500);
	line-height: 1.5;
	color: var(--color-muted);
}

.contact-stats {
	padding-block: var(--space-lg);
	border-bottom: 1px solid var(--color-line);
}
.contact-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}
.stat { display: flex; flex-direction: column; gap: var(--space-xs); }
.stat__value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}
.stat__label {
	font-family: var(--font-body);
	font-size: var(--fs-300);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-muted);
}

.contact-main { padding-block: var(--space-xl); }
.contact-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	row-gap: var(--space-lg);
	align-items: start;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.contact-item { display: flex; flex-direction: column; gap: 4px; }
.contact-item__label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
}
.contact-item__value {
	font-size: var(--fs-400);
	font-weight: 500;
}
.contact-item__value--muted { color: var(--color-muted); }
.contact-item .social-links { margin-top: 0; }

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.contact-form__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}
.contact-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.contact-field__label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	padding: 0;
}
.contact-field__input {
	width: 100%;
	font: inherit;
	color: var(--color-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	border-radius: 0;
	padding: 0.65em 0;
	transition: border-color var(--dur) var(--ease);
}
.contact-field__input::placeholder { color: var(--color-muted); }
.contact-field__input:focus {
	outline: none;
	border-bottom-color: var(--color-hl);
}
.contact-field__input:focus-visible {
	outline: none;
}
.contact-field:focus-within .contact-field__label {
	color: var(--color-ink);
}
.contact-field__input--area { resize: vertical; min-height: 7rem; }
select.contact-field__input {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	color: var(--color-ink);
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 14px) center, calc(100% - 9px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}
select.contact-field__input option {
	background-color: var(--color-surface);
	color: var(--color-ink);
}
select.contact-field__input:invalid,
select.contact-field__input option[value=""] {
	color: var(--color-muted);
}

.contact-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-xs);
}
.contact-tag { cursor: pointer; }
.contact-tag input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.contact-tag__text {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.4px;
	border: 1px solid var(--color-line);
	padding: 0.5em 1.1em;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-tag input:checked + .contact-tag__text {
	background: var(--color-hl);
	border-color: var(--color-hl);
	color: #000;
}
.contact-tag input:focus-visible + .contact-tag__text {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.contact-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}
.contact-form__note {
	font-size: var(--fs-300);
	color: var(--color-muted);
}

.contact-section__eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-muted);
	margin-bottom: var(--space-sm);
}
.contact-section__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-700);
	letter-spacing: -0.03em;
	margin-bottom: var(--space-lg);
}

.contact-services {
	padding-block: var(--space-xl);
	border-top: 1px solid var(--color-line);
}
.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line);
}
.service-card {
	background: var(--color-bg);
	padding: var(--space-lg);
	transition: background var(--dur) var(--ease);
}
.service-card:hover { background: var(--color-surface); }
.service-card__num {
	display: block;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--color-muted);
	margin-bottom: var(--space-md);
}
.service-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-500);
	margin-bottom: var(--space-sm);
}
.service-card__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-muted);
	max-width: 38ch;
}

.contact-process {
	padding-block: var(--space-xl);
	border-top: 1px solid var(--color-line);
}
.process-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	counter-reset: none;
}
.process-step {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 2px solid var(--color-ink);
}
.process-step__num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-600);
	letter-spacing: -0.02em;
}
.process-step__title {
	font-family: var(--font-display);
	font-size: var(--fs-500);
}
.process-step__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-muted);
}

.contact-faq {
	padding-block: var(--space-xl) 0;
	border-top: 1px solid var(--color-line);
}
.contact-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	row-gap: var(--space-lg);
	align-items: start;
}
.contact-faq__intro .contact-section__title { margin-bottom: 0; }

.accordion__item { border-bottom: 1px solid var(--color-line); }
.accordion__item:first-child { border-top: 1px solid var(--color-line); }
.accordion__heading { margin: 0; }
.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-md) 0;
	text-align: left;
}
.accordion__question {
	font-family: var(--font-display);
	font-size: var(--fs-500);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.accordion__icon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}
.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--color-ink);
	transition: transform var(--dur) var(--ease);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__item.is-open .accordion__icon::after { transform: rotate(0); }
.accordion__panel {
	overflow: hidden;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur) var(--ease);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__answer {
	min-height: 0;
	overflow: hidden;
	max-width: 60ch;
	padding-bottom: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-muted);
	opacity: 0;
	transition: opacity var(--dur) var(--ease), padding-bottom var(--dur) var(--ease);
}
.accordion__item.is-open .accordion__answer {
	opacity: 1;
	padding-bottom: var(--space-md);
}

@media (max-width: 900px) {
	.contact-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
	.contact-main__grid { grid-template-columns: 1fr; }
	.contact-info { order: 2; }
	.contact-form-wrap { order: 1; }
	.services-grid { grid-template-columns: 1fr; }
	.process-list { grid-template-columns: repeat(2, 1fr); }
	.contact-faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.contact-form__row { grid-template-columns: 1fr; }
	.process-list { grid-template-columns: 1fr; }
}

/* =========================================================================
   13. Project Editor v3 — Flexbox Containers
   -------------------------------------------------------------------------
   Utility classes consumed by Andrews_Manager_Front_Renderer::render_container()
   (schema v3 Container_Layout, Requirements R20–R22).

   Contract with the renderer (tasks 27/29):
   - The renderer emits `.am-flex` on every Container, plus a direction class
     `.am-flex--row` / `.am-flex--column`, justify/align/wrap modifiers, and a
     width-mode class `.am-flex--boxed` / `.am-flex--full`.
   - GAP is NOT defined here: the renderer applies `gap:{n}px` via INLINE style.
   - Per-child width (`flex: 0 0 {width}%`) is also applied INLINE by the
     renderer; these classes only set display/direction/justify/align/wrap and
     width-mode, plus the responsive collapse + child-fill reset.

   Class catalogue (keep names stable — renderer targets these literally):
     .am-flex                       display:flex
     .am-flex--row                  flex-direction:row
     .am-flex--column               flex-direction:column
     .am-flex--justify-start        justify-content:flex-start
     .am-flex--justify-center       justify-content:center
     .am-flex--justify-end          justify-content:flex-end
     .am-flex--justify-space-between justify-content:space-between
     .am-flex--justify-space-around  justify-content:space-around
     .am-flex--justify-space-evenly  justify-content:space-evenly
     .am-flex--align-start          align-items:flex-start
     .am-flex--align-center         align-items:center
     .am-flex--align-end            align-items:flex-end
     .am-flex--align-stretch        align-items:stretch
     .am-flex--nowrap               flex-wrap:nowrap
     .am-flex--wrap                 flex-wrap:wrap
     .am-flex--boxed                width mode: content max-width
     .am-flex--full                 width mode: full-bleed with gutter
   ------------------------------------------------------------------------- */

/* Base + direction (R18) */
.am-flex { display: flex; }
.am-flex--row { flex-direction: row; }
.am-flex--column { flex-direction: column; }

/* Justify modifiers — closed set (R18) */
.am-flex--justify-start { justify-content: flex-start; }
.am-flex--justify-center { justify-content: center; }
.am-flex--justify-end { justify-content: flex-end; }
.am-flex--justify-space-between { justify-content: space-between; }
.am-flex--justify-space-around { justify-content: space-around; }
.am-flex--justify-space-evenly { justify-content: space-evenly; }

/* Align modifiers — closed set (R18) */
.am-flex--align-start { align-items: flex-start; }
.am-flex--align-center { align-items: center; }
.am-flex--align-end { align-items: flex-end; }
.am-flex--align-stretch { align-items: stretch; }

/* Wrap modifiers (R18) */
.am-flex--nowrap { flex-wrap: nowrap; }
.am-flex--wrap { flex-wrap: wrap; }

/* Width modes (R20.2 / R20.3) — reuse the theme content + gutter tokens */
.am-flex--boxed {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
}
.am-flex--full {
	width: 100%;
	max-width: none;
	/* Tela cheia: respiro lateral mínimo (igual ao módulo `project-media--screen`
	   original), para a faixa ocupar quase toda a largura da viewport. NÃO usa
	   `--container-pad` (gutter grande, até 128px) que deixaria a faixa "encaixotada". */
	padding-inline: clamp(8px, 1vw, 20px);
}

/* Child fill reset (R21.1): a Block inside a Container occupies 100% of its
   cell, dropping the standalone module margins / max-widths / gutters. The
   renderer still applies the per-child flex-basis inline. */
.am-flex > * {
	width: 100%;
	max-width: none;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
}

/* Reset de 2º nível: o módulo do bloco DENTRO da célula também perde as
   margens/larguras/paddings próprios (que só fazem sentido quando o módulo é
   usado sozinho, em largura total), para que o `gap` do container controle de
   fato o espaçamento entre os itens. NÃO afeta containers `passthrough`
   (1 coluna migrada), cujas células não têm `.am-flex` pai — preservando o
   enquadramento boxed/centrado das imagens isoladas. */
.am-flex > .am-flex__cell > * {
	margin: 0;
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

/* Espaçamento vertical padrão entre os itens de TOPO do projeto (containers e
   blocos de 1 coluna), para não ficarem colados um no outro. Escopo restrito a
   filhos DIRETOS de `.project` — não afeta as colunas dentro de um container
   (que são espaçadas pelo `gap`). */
.project > .am-flex + .am-flex,
.project > .am-flex + .am-flex__cell,
.project > .am-flex__cell + .am-flex,
.project > .am-flex__cell + .am-flex__cell {
	margin-top: var(--space-lg);
}

/* Em células passthrough de topo (1 coluna), zera só a margem vertical do
   módulo interno para o espaçamento vir de uma única fonte (a regra acima),
   evitando margens dobradas. Mantém max-width/padding (enquadramento boxed). */
.project > .am-flex__cell > * {
	margin-block: 0;
}

/* Responsivo: MANTÉM as colunas lado a lado no mobile (como na referência) —
   o conteúdo é pensado em grade. As células já encolhem (`flex: 0 1 X%` +
   min-width:0), então 2+ colunas cabem sem transbordar. Aqui só reduzimos a
   margem vertical entre os itens de topo e o respiro lateral do full-bleed,
   para o conteúdo não ficar afastado. (O empilhamento em 1 coluna, quando
   desejado, será um controle responsivo por container — estilo Elementor.) */
@media (max-width: 768px) {
	.project > .am-flex + .am-flex,
	.project > .am-flex + .am-flex__cell,
	.project > .am-flex__cell + .am-flex,
	.project > .am-flex__cell + .am-flex__cell {
		margin-top: var(--space-md);
	}
}

/* Telas bem estreitas: reduz o respiro lateral do full-bleed. */
@media (max-width: 480px) {
	.am-flex--full {
		padding-inline: clamp(6px, 2vw, 12px);
	}
}

/* Texto: quebra palavras muito longas em vez de estourar a largura (proteção
   extra além do tamanho de fonte responsivo aplicado pelo renderer). */
.project-prose {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* -------------------------------------------------------------------------
   Navegação entre projetos (fixa, acima do rodapé) — anterior · ver todos · próximo
   ------------------------------------------------------------------------- */
.project-pager {
	margin-top: 0;
	padding-block: var(--space-md);
}
.project-pager__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-md);
}
.project-pager__side {
	display: flex;
	align-items: center;
	min-width: 0;
}
.project-pager__side--prev { justify-content: flex-start; }
.project-pager__side--next { justify-content: flex-end; }

.project-pager__all {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--color-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity var(--dur) var(--ease);
}
.project-pager__all:hover,
.project-pager__all:focus-visible { opacity: 0.65; }

.project-pager__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-muted);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color var(--dur) var(--ease);
}
.project-pager__link:hover,
.project-pager__link:focus-visible { color: var(--color-ink); }
.project-pager__chevron { display: inline-flex; }
.project-pager__chevron svg { display: block; }
/* Linha junto à seta — mantida. Rótulos "Anterior/Próximo" ficam ocultos. */
.project-pager__rule {
	display: block;
	width: clamp(36px, 8vw, 120px);
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}
.project-pager__edge { display: none; }

/* Mobile: encurta as linhas e oculta os rótulos textuais, mantendo as setas. */
@media (max-width: 600px) {
	.project-pager__inner { gap: var(--space-sm); }
	.project-pager__all { font-size: 13px; white-space: normal; text-align: center; }
	.project-pager__rule { width: clamp(16px, 5vw, 40px); }
	.project-pager__edge { display: none; }
}

/* -------------------------------------------------------------------------
   "Ver mais" — grade de miniaturas dos outros projetos (acima do rodapé)
   Quadrados colados (sem gap), hover escurecido, edge-to-edge e responsivo.
   ------------------------------------------------------------------------- */
.project-more {
	margin-top: 0;
	padding-top: var(--space-md);
}
.project-more__title {
	text-align: left;
	padding-inline: var(--container-pad);
	font-family: var(--font-display);
	font-size: var(--fs-500);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-md);
}
.project-more__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
}
.project-more__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-surface);
	text-decoration: none;
}
.project-more__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease);
}
.project-more__placeholder {
	position: absolute;
	inset: 0;
	background: var(--color-line);
}
.project-more__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background var(--dur) var(--ease);
}
.project-more__item:hover .project-more__overlay,
.project-more__item:focus-visible .project-more__overlay {
	background: rgba(0, 0, 0, 0.45);
}
.project-more__item:hover .project-more__img,
.project-more__item:focus-visible .project-more__img {
	transform: scale(1.04);
}
.project-more__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--space-sm);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	pointer-events: none;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.project-more__item:hover .project-more__name,
.project-more__item:focus-visible .project-more__name {
	opacity: 1;
	transform: translateY(0);
}

/* Responsivo (regra de ouro): reduz o nº de colunas conforme a largura. */
@media (max-width: 1024px) { .project-more__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .project-more__grid { grid-template-columns: repeat(3, 1fr); } }

/* Celular: vira carrossel horizontal mostrando 2 por vez (swipe). */
@media (max-width: 600px) {
	.project-more__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-padding: 0;
	}
	.project-more__grid::-webkit-scrollbar { display: none; }
	.project-more__item {
		flex: 0 0 50%;
		scroll-snap-align: start;
	}
	/* No carrossel, o nome fica sempre visível (não há hover no toque). */
	.project-more__name {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -------------------------------------------------------------------------
   Feed (arquivo do CPT feed_item) — masonry responsivo de imagens/GIFs/vídeos
   ------------------------------------------------------------------------- */
.feed-archive {
	padding-top: var(--space-md);
}
.feed-archive__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 0.9rem + 2vw, 2.25rem);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}
.feed-archive__empty {
	color: var(--color-muted);
	padding-block: var(--space-lg);
}

/* Masonry via colunas CSS (naturalmente responsivo). */
.feed-masonry {
	column-count: 4;
	column-gap: var(--space-sm);
	padding-inline: var(--container-pad);
}
@media (max-width: 1100px) { .feed-masonry { column-count: 3; } }
@media (max-width: 760px)  { .feed-masonry { column-count: 2; } }
@media (max-width: 440px)  { .feed-masonry { column-count: 1; } }

.feed-item {
	break-inside: avoid;
	margin: 0 0 var(--space-sm);
	border-radius: var(--radius, 6px);
	overflow: hidden;
	background: var(--color-surface);
	position: relative;
}
.feed-item__media {
	display: block;
	width: 100%;
	height: auto;
}
/* Embed (YouTube/Vimeo) responsivo 16:9. */
.feed-item__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.feed-item__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.feed-item__cap {
	padding: 10px 12px;
	font-size: 13px;
	color: var(--color-muted);
}

/* Lightbox: suporte a vídeo e embed (além de imagem) */
.lightbox__holder { display: block; }
.lightbox__figure--media { width: min(92vw, 1100px); }
.lightbox__embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}
.lightbox__video {
	width: 100%;
	max-height: 90vh;
	display: block;
	background: #000;
}

/* Item do feed clicável (abre no lightbox) */
.feed-item__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.feed-item__btn .feed-item__media { display: block; width: 100%; height: auto; }