/* Bia Fernandes — estilos base + Header + Hero */

:root {
	--vermelho: #d8200e;
	--rosa: #ff398a;
	--verde-limao: #d2ea24;
	--azul: #3861ab;
	--verde-escuro: #018001;
	--branco: #ffffff;
	--borda: 1.5px solid var(--vermelho);

	/* Fayte Pixel Hard chega via Adobe Fonts (kit da Bia, ver functions.php).
	   O kit também traz "fayte-pixel-soft" (peso 500), se precisar de uma
	   variante mais leve nos destaques. */
	--font-fayte: "fayte-pixel-hard", "UnifrakturMaguntia", fantasy;
}

.font-fayte {
	font-family: var(--font-fayte);
}

/* Escala o site inteiro pra 75% (pedido da Bia: "zoom out" de 75% ficou no
   tamanho ideal). Como quase tudo no CSS usa rem, isso escala tipografia e
   espaçamento automaticamente; dimensões fixas em px foram reduzidas à mão
   pra manter a mesma proporção. */
html {
	font-size: 75%;
	overflow-x: clip;
}

/* Alguns elementos (.hero__graphic, .ticker, .faq__lines) sangram até a
   borda da tela usando 100vw/calc com vw. Como vw conta a largura da
   janela incluindo a scrollbar mas o overflow-x:hidden do html corta no
   clientWidth real, essa sobra "invisível" ainda existe como área
   scrollável — em alguns navegadores/gestos (trackpad, swipe) isso deixa
   a página inteira ser arrastada pra esquerda. Conter aqui, na largura
   real do conteúdo, resolve pra qualquer seção sem precisar mudar cada
   uma individualmente.
   Trava os dois eixos (não só overflow-x) porque um eixo não-visible +
   o outro visible faz o navegador computar o visible como "auto" — o
   que podia transformar o entry-content num contêiner de scroll próprio
   em certas condições. Como a altura aqui já é 100% definida pelo
   conteúdo (sem overflow vertical real), hidden não corta nada, só
   remove essa ambiguidade. */
.entry-content {
	overflow: hidden;
}

* {
	box-sizing: border-box;
}

body {
	color: var(--vermelho);
	background: var(--branco);
	opacity: 0;
	animation: bia-page-in 0.6s ease forwards;
	/* overflow-x:hidden (no html e aqui) ainda deixa o elemento virar
	   um contêiner de scroll "invisível" — sem barra de rolagem, mas
	   still scrollável via wheel/trackpad (só esconde, não desliga o
	   scroll). Aconteceu de verdade aqui: um elemento sangrando bem
	   além de 100vw fazia o body arrastar horizontalmente
	   (body.scrollLeft mudava) mesmo com overflow-x:hidden nos dois.
	   overflow-x:clip é o valor certo pra isso — clipa sem nunca virar
	   scrollável, nem por wheel. */
	overflow-x: clip;
}

@keyframes bia-page-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	body {
		animation: none;
		opacity: 1;
	}
}

.wrap {
	max-width: 1050px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* ---------- Header ---------- */

.site-header {
	border-bottom: var(--borda);
}

footer.wp-block-template-part {
	margin-top: 0;
}

.site-footer {
	background: var(--azul);
	border-bottom: 1.5px solid var(--azul);
}

.site-footer .header-cell--lang {
	border-left: 1.5px solid var(--branco);
}

.site-footer .lang-switcher__link {
	color: var(--branco);
}

.site-footer .lang-switcher__sep {
	color: var(--branco);
}

.site-footer .header-cell--social a {
	border-left: 1.5px solid var(--branco);
	color: var(--branco);
}

.header-bar {
	display: flex;
	align-items: stretch;
}

.header-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.25rem;
}

.header-cell--menu {
	border-right: var(--borda);
}

.header-cell--menu {
	position: relative;
}

.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 30px;
	height: 20px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--vermelho);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.site-menu {
	position: absolute;
	top: calc(100% + 1.5px);
	left: -1.5px;
	z-index: 20;
	flex-direction: column;
	min-width: 220px;
	background: var(--branco);
	border: var(--borda);
}

.site-menu:not([hidden]) {
	display: flex;
}

.site-menu__link {
	padding: 1rem 1.5rem;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	color: var(--vermelho);
	text-decoration: none;
	border-bottom: 1.5px solid var(--vermelho);
}

.site-menu__link:last-child {
	border-bottom: 0;
}

.site-menu__link:hover {
	background: var(--vermelho);
	color: var(--branco);
}

.site-menu__lang {
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: center;
}

.site-menu__lang .lang-switcher {
	font-size: 1rem;
}

.header-cell--logo {
	flex: 1;
}

.header-cell--logo img {
	height: 24px;
	width: auto;
	display: block;
}

/* Duas versões da logo no mesmo link — só uma fica visível por vez
   (ver troca de cor da navbar na página de projeto, logo abaixo).
   Precisa de mais especificidade que ".header-cell--logo img" acima
   pra conseguir esconder uma das duas. */
.header-cell--logo img.header-logo--azul {
	display: none;
}

.site-footer .header-cell--logo img {
	height: 28px;
}


.header-cell--social {
	display: flex;
	padding: 0;
}

.header-cell--social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	border-left: var(--borda);
	color: var(--vermelho);
}

.header-cell--social svg {
	width: 16.5px;
	height: 16.5px;
}

.header-cell--lang {
	border-left: var(--borda);
	padding-inline: 1.25rem;
}

.lang-switcher {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}

.lang-switcher__link {
	color: var(--vermelho);
	opacity: 0.4;
	text-decoration: none;
}

.lang-switcher__link.is-current {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lang-switcher__sep {
	opacity: 0.4;
}

/* Navbar azul só na página de projeto (/projeto/<slug>/), pra
   conversar com o resto da página (que é toda azul) em vez do
   vermelho padrão do site. body.single-projeto vem de graça do
   body_class() do WordPress pra esse post type, sem precisar de PHP
   extra aqui. */
body.single-projeto .header-cell--logo img.header-logo--vermelho {
	display: none;
}

body.single-projeto .header-cell--logo img.header-logo--azul {
	display: block;
}

body.single-projeto .site-header {
	border-bottom-color: var(--azul);
}

body.single-projeto .header-cell--menu {
	border-right-color: var(--azul);
}

body.single-projeto .menu-toggle__bar {
	background: var(--azul);
}

body.single-projeto .site-menu {
	border-color: var(--azul);
}

body.single-projeto .site-menu__link {
	color: var(--azul);
	border-bottom-color: var(--azul);
}

body.single-projeto .site-menu__link:hover {
	background: var(--azul);
}

body.single-projeto .header-cell--social a {
	border-left-color: var(--azul);
	color: var(--azul);
}

body.single-projeto .header-cell--lang {
	border-left-color: var(--azul);
}

body.single-projeto .lang-switcher__link {
	color: var(--azul);
}

body.single-projeto .lang-switcher__sep {
	color: var(--azul);
}

/* ---------- Hero ---------- */

.hero {
	--hero-pad-x: 5.5rem;
	position: relative;
	padding: 9rem var(--hero-pad-x) 7rem;
	max-width: 1050px;
	margin-inline: 0 auto;
}

.hero__graphic {
	position: absolute;
	z-index: 0;
	right: calc(1050px - 100vw);
	bottom: 4%;
	width: 72%;
	max-width: 860px;
	height: auto;
	pointer-events: none;
	transform: translate(50px, 50px);
}

.hero__title {
	position: relative;
	z-index: 1;
	font-family: "Delight", sans-serif;
	font-weight: 500;
	font-size: clamp(3.4rem, 1.7rem + 11vw, 11rem);
	line-height: 0.92;
	margin: 0;
	color: var(--vermelho);
	text-align: left;
}

/* Garante que "Ideias, pessoas" / "Ideas, people" nunca se separem
   em duas linhas — a versão em português é um pouco mais larga que a
   em inglês e, sem isso, podia quebrar sozinha em telas mais
   estreitas mesmo cabendo à primeira vista, virando 3 linhas no
   título (2 pro que devia ser 1 linha só + 1 do hero__title-small). */
.hero__title-line1 {
	white-space: nowrap;
}

.hero__title-small {
	font-size: 0.48em;
	position: relative;
	top: -1.75rem;
}

.hero__meta {
	position: relative;
	z-index: 1;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(1.35rem, 1rem + 1.8vw, 2.2rem);
	letter-spacing: 0.05em;
	margin-top: 1.75rem;
	text-align: left;
}

@media (prefers-reduced-motion: no-preference) {

	.hero__title,
	.hero__meta {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.hero.is-visible .hero__title,
	.hero.is-visible .hero__meta {
		opacity: 1;
		transform: translateY(0);
	}

	.hero__title {
		transition-delay: 0.1s;
	}

	.hero__meta {
		transition-delay: 0.3s;
	}
}

@media (max-width: 782px) {
	.header-cell--menu {
		padding-inline: 1rem;
	}

	.hero {
		--hero-pad-x: 1.75rem;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 5rem var(--hero-pad-x) 4rem;
	}

	.hero__title {
		order: 1;
		white-space: nowrap;
		font-size: 12.2vw;
		line-height: 1.02;
	}

	.hero__title-small {
		white-space: normal;
		font-size: 0.4em;
		top: -0.6rem;
	}

	.hero__meta {
		order: 2;
		font-size: 0.95rem;
		margin-top: 0.6rem;
	}

	/* Maior que a tela de propósito: centraliza com left:50% +
	   translateX(-50%) (funciona mesmo com a imagem mais larga que o
	   pai) e deixa o .hero (overflow:hidden acima) cortar as laterais,
	   em vez de encolher pra caber. */
	.hero__graphic {
		position: relative;
		left: 50%;
		order: 3;
		transform: translateX(-50%);
		width: 140vw;
		max-width: none;
		margin-top: 2.5rem;
	}

	.hero__title,
	.hero__meta {
		text-align: left;
	}
}

/* ---------- Hero: colagem (nuvem, foto, badges) ---------- */

.hero__banner {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 4rem;
}

.hero__collage {
	position: relative;
	width: 100%;
	aspect-ratio: 1440 / 670;
	margin-top: 4rem;
}

.hero__tag {
	position: absolute;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--azul);
	z-index: 5;
	white-space: nowrap;
}

.hero__tag--dev {
	left: 5%;
	top: 13.5%;
}

.hero__tag--code {
	left: 37.2%;
	top: 85.8%;
}

.hero__collage img {
	position: absolute;
	display: block;
}

.hero__comb-blue,
.hero__oval,
.hero__cloud,
.hero__comb-red,
.hero__flower {
	object-fit: contain;
}

.hero__comb-blue {
	left: 17.3%;
	top: 7.3%;
	width: 24.6%;
	height: 48.6%;
	z-index: 1;
}

.hero__oval {
	left: 13.4%;
	top: 51.6%;
	width: 29.9%;
	height: 33.3%;
	z-index: 2;
}

.hero__cloud {
	left: 25.3%;
	top: 10.2%;
	width: 39.2%;
	height: 56.4%;
	z-index: 3;
}

.hero__cloud-text {
	position: absolute;
	left: 25.3%;
	top: 10.2%;
	width: 39.2%;
	height: 56.4%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-fayte);
	font-weight: 400;
	color: var(--vermelho);
	line-height: 1.15;
	font-size: clamp(1rem, 2.1vw, 1.8rem);
	padding-bottom: 6%;
}

@media (max-width: 782px) {
	.hero__cloud-text {
		font-size: clamp(0.85rem, 4.2vw, 1.3rem);
	}
}

.hero__toggle {
	position: absolute;
	left: 41%;
	top: 53.7%;
	width: 7.8%;
	height: 8.1%;
	z-index: 4;
	background: var(--verde-limao);
	border-radius: 999px;
}

.hero__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8%;
	width: 62%;
	height: 84%;
	transform: translateY(-50%);
	background: var(--vermelho);
	border-radius: 50%;
}

.hero__comb-red {
	left: 56.2%;
	top: 15.6%;
	width: 42.8%;
	height: 19.8%;
	z-index: 1;
}

.hero__photo {
	left: 64.5%;
	top: 20.9%;
	width: 34.8%;
	height: 79.1%;
	z-index: 2;
	object-fit: cover;
	object-position: top center;
	filter: grayscale(100%);
}

.hero__flower {
	left: 52%;
	top: 75.7%;
	width: 10%;
	height: 21.5%;
	z-index: 3;
}

.hero__zigzag {
	left: 88.5%;
	top: 45.1%;
	width: 2%;
	height: 52.1%;
	z-index: 3;
	object-fit: fill;
}

.hero__pill {
	position: absolute;
	left: 82.5%;
	top: 42.6%;
	width: 4.2%;
	height: 3%;
	z-index: 4;
	background: var(--branco);
	border-radius: 999px;
	transform: rotate(-18deg);
}

@media (max-width: 782px) {
	.hero__collage {
		aspect-ratio: 390 / 300;
		margin-top: 2.5rem;
	}

	.hero__tag {
		font-size: 0.65rem;
	}
}

/* ---------- Ticker (tipos de projeto) ---------- */

.ticker {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 6rem;
	overflow: hidden;
	background: transparent;
	border-top: 1.5px solid var(--vermelho);
	border-bottom: 1.5px solid var(--vermelho);
}

/* O título do hero quebra em 3 linhas ("Ideas,"/"people"/"and a bit of
   code."), o que empurra o ticker pra fora da primeira dobra da tela.
   Reduz o respiro abaixo do hero pra compensar. */
@media (min-width: 783px) {
	.hero {
		padding-bottom: 3rem;
	}

	.ticker {
		margin-top: 8.5rem;
	}
}

.ticker__track {
	display: flex;
	width: max-content;
	animation: ticker-scroll 40s linear infinite;
}

.ticker__item {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 1.15rem + 2.6vw, 3.2rem);
	color: var(--vermelho);
	padding: 0.6rem 1rem;
}

@keyframes ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ticker__track {
		animation: none;
	}
}

@media (max-width: 782px) {
	.ticker {
		margin-top: 3.5rem;
	}

	.ticker__item {
		padding: 0.5rem 0.6rem;
	}
}

/* ---------- Sobre / História ---------- */

.lang-pending-badge {
	background: var(--azul);
	color: var(--branco);
	font-family: sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	padding: 0.5rem 1rem;
}

.placeholder-text {
	outline: 1.5px dashed var(--azul);
	outline-offset: 6px;
	position: relative;
}

.placeholder-text::before {
	content: "texto provisório — aguardando texto final";
	position: absolute;
	top: -1.6rem;
	left: 0;
	font-family: sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0;
	color: var(--azul);
	text-transform: none;
}

.sobre-wrap {
	position: relative;
	margin: 12rem 0 6rem;
	overflow: hidden;
}

.sobre-inner {
	position: relative;
	max-width: 1050px;
	margin: 0 auto;
	padding: 0 3.25rem;
}

/* A arte (viewBox 1000x300) é desenhada em aspect-ratio nativo, então o
   background nunca é cortado por object-fit/vw: ela sempre aparece inteira,
   só escalada. .sobre-wrap tem overflow:hidden para aparar de forma limpa
   a sobra de 122% (bleed, concentrada à direita) + o drift da animação,
   sem depender de vw (que diverge do clientWidth real quando há scrollbar
   e cortava a onda). */
.sobre__lines {
	position: absolute;
	left: -2%;
	top: -5.5rem;
	width: 122%;
	height: auto;
	aspect-ratio: 1000 / 300;
	z-index: -1;
	opacity: 0.55;
	pointer-events: none;
}

/* No mobile mantém a posição original (mais perto do topo) — o ajuste
   pra subir bem e ficar mais perto do título é só desktop. */
@media (max-width: 782px) {
	.sobre__lines {
		top: 1.25rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.sobre__lines {
		animation: sobre-lines-drift 10s ease-in-out infinite;
	}
}

@keyframes sobre-lines-drift {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-1.5%);
	}
}

.sobre {
	position: relative;
}

.sobre__title {
	font-family: "Delight", sans-serif;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--titulo-a1, clamp(2.75rem, 1.5rem + 8vw, 8.5rem));
	line-height: 0.92;
	margin: 0;
	color: var(--vermelho);
	text-align: right;
}

@media (prefers-reduced-motion: no-preference) {

	.sobre__title,
	.sobre__text {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.sobre-wrap.is-visible .sobre__title,
	.sobre-wrap.is-visible .sobre__text {
		opacity: 1;
		transform: translateY(0);
	}

	.sobre__text:nth-of-type(1) {
		transition-delay: 0.15s;
	}

	.sobre__text:nth-of-type(2) {
		transition-delay: 0.3s;
	}

	.sobre__text:nth-of-type(3) {
		transition-delay: 0.45s;
	}

	.sobre__text:nth-of-type(4) {
		transition-delay: 0.6s;
	}

	.sobre__text:nth-of-type(5) {
		transition-delay: 0.75s;
	}

	.sobre__text:nth-of-type(6) {
		transition-delay: 0.9s;
	}
}

.sobre__body {
	position: relative;
	padding: 9.5rem 0 4.85rem;
}

.sobre__text {
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(0.9rem, 0.8rem + 1vw, 1.5rem);
	line-height: 1.4;
	max-width: 42rem;
	margin: 0 auto 1.25em 0;
	text-align: left;
}

.sobre__text:last-child {
	margin-bottom: 0;
}

.sobre__lead {
	font-weight: 700;
	font-size: clamp(1.1rem, 0.9rem + 1.3vw, 1.85rem);
}

.sobre__text--right {
	margin: 0 0 1.25em auto;
	text-align: right;
}

/* ---------- About me ---------- */

.about {
	position: relative;
	margin: 3rem 0 7rem;
	padding: 0 3.25rem;
}

.about__frame {
	border: 1.5px solid var(--azul);
}

.about__grid {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.about__photo-wrap {
	--frame-gap: 1.75rem;
	--strip-w: calc(var(--frame-gap) * 640 / 65.7);
	position: relative;
	flex: 1 1 45%;
	min-width: 320px;
	min-height: 420px;
}

.about__photo {
	display: block;
	position: absolute;
	top: var(--frame-gap);
	left: var(--frame-gap);
	width: calc(100% - (var(--frame-gap) * 2));
	height: calc(100% - (var(--frame-gap) * 2));
	object-fit: cover;
}

.about__photo-strip {
	position: absolute;
	z-index: 3;
	pointer-events: none;
}

.about__photo-strip--top,
.about__photo-strip--bottom {
	left: 0;
	right: 0;
	height: var(--frame-gap);
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_17_strip.svg");
	background-repeat: repeat-x;
	background-size: var(--strip-w) var(--frame-gap);
	animation: about-strip-scroll 6s linear infinite;
}

.about__photo-strip--top {
	top: 0;
}

.about__photo-strip--bottom {
	bottom: 0;
	animation-direction: reverse;
}

.about__photo-strip--left,
.about__photo-strip--right {
	top: var(--frame-gap);
	bottom: var(--frame-gap);
	width: var(--frame-gap);
	overflow: hidden;
}

.about__photo-strip--left {
	left: 0;
}

.about__photo-strip--right {
	right: 0;
}

.about__photo-strip--left::before,
.about__photo-strip--right::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vh;
	height: var(--frame-gap);
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_17_strip.svg");
	background-repeat: repeat-x;
	background-size: var(--strip-w) var(--frame-gap);
	transform: translate(-50%, -50%) rotate(90deg);
	animation: about-strip-scroll 6s linear infinite;
}

.about__photo-strip--right::before {
	animation-direction: reverse;
}

@keyframes about-strip-scroll {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: calc(-1 * var(--strip-w));
	}
}

@media (prefers-reduced-motion: reduce) {

	.about__photo-strip--top,
	.about__photo-strip--bottom,
	.about__photo-strip--left::before,
	.about__photo-strip--right::before {
		animation: none;
	}
}

.about__text {
	flex: 1 1 55%;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3.5rem 3.5rem;
}

.about__text p {
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);
	line-height: 1.55;
	color: var(--azul);
	margin: 0 0 1.25em;
}

/* Mesma lógica de entrada da seção "Sobre": parágrafos escalonados,
   um pouco depois um do outro, disparados ao entrar na tela. */
@media (prefers-reduced-motion: no-preference) {
	.about__text p {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.about.is-visible .about__text p {
		opacity: 1;
		transform: translateY(0);
	}

	.about__text p:nth-of-type(1) {
		transition-delay: 0.1s;
	}

	.about__text p:nth-of-type(2) {
		transition-delay: 0.25s;
	}

	.about__text p:nth-of-type(3) {
		transition-delay: 0.4s;
	}

	.about__text p:nth-of-type(4) {
		transition-delay: 0.55s;
	}
}

.about__text p:last-child {
	margin-bottom: 0;
}

.about__lead {
	font-weight: 800 !important;
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem) !important;
}

@media (max-width: 782px) {
	.about {
		margin: 2rem 0 4rem;
		padding: 0 1.25rem;
	}

	.about__photo-wrap {
		--frame-gap: 1rem;
		flex: 1 1 100%;
		min-width: 0;
		min-height: 320px;
	}

	.about__text {
		flex: 1 1 100%;
		min-width: 0;
		padding: 2.5rem 1.75rem;
	}
}

@media (max-width: 782px) {
	.sobre-wrap {
		margin: 9rem 0 3rem;
	}

	.sobre-inner {
		padding-inline: 1.75rem;
	}

	.sobre__body {
		min-height: 0;
		padding: 6.5rem 0 4rem;
	}

	.sobre__text {
		font-size: clamp(1rem, 0.85rem + 1.2vw, 1.6rem);
	}

	.sobre__lead {
		font-size: clamp(1.2rem, 1rem + 1.5vw, 1.95rem);
	}
}

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

.faq {
	position: relative;
	z-index: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	padding: 5rem 3.25rem 7rem;
}

.faq__lines {
	position: absolute;
	top: 21%;
	height: 58%;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	object-fit: cover;
	z-index: -1;
	opacity: 0.55;
	pointer-events: none;
}

.faq__titles {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	margin: 0 0 2.5rem;
}

.faq__title {
	margin: 0;
	font-family: "Delight", sans-serif;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--titulo-a1, clamp(2.75rem, 1.5rem + 8vw, 8.5rem));
	line-height: 0.92;
	color: var(--azul);
}

.faq__meta {
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--curto, 1.5rem);
	letter-spacing: 0.05em;
	margin: 0;
	color: var(--azul);
}

@media (prefers-reduced-motion: no-preference) {

	.faq__title,
	.faq__meta {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.faq__meta {
		transition-delay: 0.15s;
	}

	.faq.is-visible .faq__title,
	.faq.is-visible .faq__meta {
		opacity: 1;
		transform: translateY(0);
	}
}

.faq__list {
	position: relative;
	order: 1;
	flex: 0 1 auto;
	width: 60%;
	max-width: 60%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.faq__item {
	border: 1.5px solid var(--azul);
	border-radius: 0;
	background: var(--branco);
	overflow: hidden;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Entrada em cascata dos boxes ao rolar (mesma lógica de
   .projects__row / .about__text p), disparada por .faq.is-visible. */
@media (prefers-reduced-motion: no-preference) {
	.faq__item {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	}

	.faq.is-visible .faq__item {
		opacity: 1;
		transform: translateY(0);
	}

	.faq__item:nth-of-type(1) {
		transition-delay: 0.1s, 0.1s, 0s, 0s;
	}

	.faq__item:nth-of-type(2) {
		transition-delay: 0.2s, 0.2s, 0s, 0s;
	}

	.faq__item:nth-of-type(3) {
		transition-delay: 0.3s, 0.3s, 0s, 0s;
	}

	.faq__item:nth-of-type(4) {
		transition-delay: 0.4s, 0.4s, 0s, 0s;
	}

	.faq__item:nth-of-type(5) {
		transition-delay: 0.5s, 0.5s, 0s, 0s;
	}

	.faq__item:nth-of-type(6) {
		transition-delay: 0.6s, 0.6s, 0s, 0s;
	}
}

/* Realce no hover/foco: sombra "dura" (mesmo estilo dos botões de CV)
   em azul e borda acompanha, pra dar um feedback claro do item
   clicável sem mexer no transform (que já é usado na entrada). */
.faq__item:hover,
.faq__item:focus-within {
	border-color: var(--azul);
	box-shadow: 6px 8px 0 0 var(--azul);
}

.faq__summary {
	list-style: none;
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	min-height: 4.5rem;
	cursor: pointer;
	background: var(--rosa);
}

.faq__summary::-webkit-details-marker {
	display: none;
}

.faq__q {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.25rem;
	font-family: "Delight", sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(1.15rem, 1rem + 0.65vw, 1.45rem);
	letter-spacing: 0.03em;
	line-height: 1.35;
	color: var(--branco);
	text-align: center;
}

.faq__icon {
	flex: 0 0 4.5rem;
	width: 4.5rem;
	height: 4.5rem;
	display: block;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.faq__icon {
		transition: transform 0.35s ease;
	}

	.faq__item:hover .faq__icon,
	.faq__item:focus-within .faq__icon {
		transform: rotate(18deg) scale(1.08);
	}

	.faq__item[open] .faq__summary .faq__icon {
		transform: rotate(180deg);
	}

	.faq__item[open]:hover .faq__summary .faq__icon,
	.faq__item[open]:focus-within .faq__summary .faq__icon {
		transform: rotate(198deg) scale(1.08);
	}
}

/* Abre/fecha em altura animada em vez do salto nativo do <details>:
   sobrescreve o display:none que o navegador aplica ao conteúdo
   fechado e anima max-height/padding/borda no lugar. */
.faq__answer {
	display: block;
	max-height: 0;
	padding: 0 1.25rem;
	border-top: 0 solid var(--azul);
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.35s ease, border-top-width 0.35s ease;
}

.faq__item[open] .faq__answer {
	max-height: 17rem;
	padding: 1rem 1.25rem 1.25rem;
	border-top-width: 1.5px;
}

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

.faq__answer p {
	margin: 0;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	line-height: 1.65;
	letter-spacing: 0.015em;
	color: var(--azul);
}

@media (max-width: 782px) {
	.faq {
		flex-direction: column;
		padding: 3.5rem 1.25rem 4.5rem;
	}

	.faq__titles {
		order: 1;
		gap: 0.5rem;
		margin-bottom: 2rem;
	}

	/* Centraliza de forma explícita (largura cheia + text-align), em vez
	   de depender só do encolhimento automático do flexbox — alguns
	   navegadores mobile renderizavam o título colado à esquerda. */
	.faq__title,
	.faq__meta {
		width: 100%;
		text-align: center;
	}

	.faq__list {
		order: 2;
		width: 100%;
		max-width: 100%;
		gap: 1rem;
	}

	.faq__summary {
		min-height: 3.5rem;
	}

	.faq__icon {
		flex-basis: 3.5rem;
		width: 3.5rem;
		height: 3.5rem;
	}

	.faq__q {
		padding: 0.75rem 1rem;
		font-size: 1.05rem;
	}

	/* No mobile o texto quebra em mais linhas (coluna mais estreita),
	   então o teto fixo de 14rem usado no desktop cortava as respostas
	   mais longas (perguntas 1 e 3). */
	.faq__item[open] .faq__answer {
		max-height: 30rem;
	}
}

/* ---------- Degradê final (Projetos -> CTA -> ticker -> footer) ---------- */

.tail-gradient {
	background: #3861ab;
	background: linear-gradient(to top,
			rgba(56, 97, 171, 1) 0%,
			rgba(86, 120, 184, 1) 9%,
			rgba(166, 181, 227, 1) 22%,
			rgba(185, 199, 235, 1) 36%,
			rgba(181, 196, 235, 1) 50%,
			rgba(255, 255, 255, 1) 91%);
}

/* ---------- Projetos ---------- */

.projects {
	position: relative;
	margin: 0;
	padding: 1rem 3.25rem 6rem;
}

.projects__header {
	position: relative;
	min-height: 2rem;
}

.projects__tag {
	position: absolute;
	top: 0;
	right: 0;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--azul);
}

/* Mesmo tratamento dos outros títulos de seção (Delight 500), só que em
   azul, alinhado à esquerda e um pouco maior que o clamp padrão de
   .sobre__title/.faq__title. */
.projects__title {
	font-family: "Delight", sans-serif;
	font-weight: 500;
	font-size: clamp(3rem, 1.65rem + 8.8vw, 9.35rem);
	line-height: 0.92;
	margin: 0;
	color: var(--azul);
	text-align: left;
	white-space: nowrap;
}

.projects__title-row {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

/* Preenche o espaço depois do título até sangrar na borda direita: o
   flex:1 já estica até o fim da caixa de conteúdo, e a margem negativa
   (mesma medida do padding-right de .projects) empurra além do padding
   até a borda real — sem depender de vw (mesmo motivo do .sobre__lines:
   vw diverge da largura real quando há scrollbar). Duas faixas (grossa
   + fina) via gradientes, pra não precisar de um segundo elemento. */
.projects__title-line {
	flex: 1 1 auto;
	height: 1.35rem;
	margin-right: -3.25rem;
	background-image:
		linear-gradient(var(--azul), var(--azul)),
		linear-gradient(var(--azul), var(--azul));
	background-size: 100% 0.7rem, 100% 0.3rem;
	background-position: top left, bottom left;
	background-repeat: no-repeat, no-repeat;
	transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
	.projects__title {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.projects.is-visible .projects__title {
		opacity: 1;
		transform: translateY(0);
	}

	.projects__title-line {
		transform: scaleX(0);
		transition: transform 0.9s ease;
		transition-delay: 0.2s;
	}

	.projects.is-visible .projects__title-line {
		transform: scaleX(1);
	}
}

.projects__cv-prompt {
	margin-top: 4rem;
	text-align: center;
}

.projects__cv-question {
	margin: 0 0 0.6rem;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	color: var(--azul);
	opacity: 0.65;
}

.projects__cv-links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}

/* Mesmo estilo do .cta__button (caixa com sombra, acima do footer),
   só que em azul em vez de verde-limão. */
.projects__cv-link {
	display: inline-block;
	margin-right: 0.4rem;
	margin-bottom: 0.4rem;
	border: 2px solid var(--azul);
	box-shadow: 5px 7px 0 0 var(--azul);
	color: var(--azul);
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 1.1rem 2.25rem;
	text-decoration: none;
}

.projects__cv-sep {
	display: none;
}

.projects__thumbs {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 3rem;
	overflow: hidden;
}

.projects__thumbs-track {
	display: flex;
	gap: 1rem;
	width: max-content;
	padding: 0 1rem;
	animation: ticker-scroll 34s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.projects__thumbs-track {
		animation: none;
	}
}

.projects__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 220px;
	height: 160px;
	border: 1.5px solid var(--azul);
	background-color: var(--branco);
}

.projects__thumb-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.projects__thumb-face {
	position: absolute;
	inset: 0;
	background-color: var(--branco);
	background-repeat: no-repeat;
	background-position: center;
}

.projects__thumb-face--icon {
	background-size: contain;
	opacity: 1;
}

.projects__thumb-face--photo {
	background-size: cover;
	opacity: 0;
}

.projects__thumb.has-photo .projects__thumb-face--icon {
	animation: thumb-blink-icon 7s steps(1, end) infinite;
	animation-delay: inherit;
}

.projects__thumb.has-photo .projects__thumb-face--photo {
	animation: thumb-blink-photo 7s steps(1, end) infinite;
	animation-delay: inherit;
}

.projects__thumb:nth-child(3n+1) .projects__thumb-face--icon {
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_09.svg");
}

.projects__thumb:nth-child(3n+2) .projects__thumb-face--icon {
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_11.svg");
}

.projects__thumb:nth-child(3n+3) .projects__thumb-face--icon {
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_12.svg");
}

@keyframes thumb-blink-icon {

	0%,
	42% {
		opacity: 1;
	}

	46%,
	88% {
		opacity: 0;
	}

	92%,
	100% {
		opacity: 1;
	}
}

@keyframes thumb-blink-photo {

	0%,
	42% {
		opacity: 0;
	}

	46%,
	88% {
		opacity: 1;
	}

	92%,
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.projects__thumb.has-photo .projects__thumb-face--icon,
	.projects__thumb.has-photo .projects__thumb-face--photo {
		animation: none;
	}
}

@media (max-width: 782px) {
	.projects__thumbs {
		margin-top: 2rem;
	}

	.projects__thumbs-track {
		padding: 0 1.5rem;
	}

	.projects__thumb {
		width: 160px;
		height: 116px;
	}
}

.projects__list {
	position: relative;
	margin-top: 2.5rem;
	border: 1.5px solid var(--azul);
	border-top: 4px solid var(--azul);
	background: var(--branco);
}

.projects__row {
	position: relative;
	display: flex;
	align-items: stretch;
	border-bottom: 1.5px solid var(--azul);
	background-color: transparent;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.projects__row:last-child {
	border-bottom: none;
}

.projects__row:hover,
.projects__row:focus-within {
	z-index: 5;
	outline: none;
	background-color: var(--azul);
}

/* Entrada em cascata: cada linha nasce um pouco depois da anterior
   (--row-delay definido inline no PHP), disparada pelo mesmo
   .projects.is-visible usado no título/linha gráfica acima. */
@media (prefers-reduced-motion: no-preference) {
	.projects__row {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.6s ease, transform 0.6s ease;
		transition-delay: var(--row-delay, 0s);
	}

	.projects.is-visible .projects__row {
		opacity: 1;
		transform: translateY(0);
	}
}

.projects__row-icon {
	position: relative;
	flex: 0 0 auto;
	align-self: stretch;
	width: clamp(6rem, 4.5rem + 6vw, 9rem);
	border-right: 1.5px solid var(--azul);
	overflow: hidden;
}

/* O ícone fica num ::before para poder dar zoom no hover sem que a
   escala vaze pra fora da célula (overflow:hidden fica no pai, que
   não é transformado). */
.projects__row-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.projects__row:nth-child(3n+1) .projects__row-icon::before {
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_09.svg");
}

.projects__row:nth-child(3n+2) .projects__row-icon::before {
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_11.svg");
}

.projects__row:nth-child(3n+3) .projects__row-icon::before {
	background-image: url("../images/elementos/Elementos_Bia_Fernandes_12.svg");
}

@media (prefers-reduced-motion: no-preference) {
	.projects__row-icon::before {
		transition: transform 0.35s ease;
	}

	.projects__row:hover .projects__row-icon::before,
	.projects__row:focus-within .projects__row-icon::before {
		transform: scale(1.12);
	}
}

.projects__row-name {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	padding: 1rem 1.5rem;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(1.3rem, 1rem + 2.5vw, 2.75rem);
	color: var(--azul);
	transition: color 0.3s ease;
}

.projects__row-desc {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 1rem 1.5rem;
	font-family: "Delight", sans-serif;
	font-weight: 300;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--azul);
	text-align: right;
	transition: color 0.3s ease;
}

.projects__row-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding-right: 1.5rem;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--azul);
	transition: color 0.3s ease;
}

.projects__row:hover .projects__row-name,
.projects__row:hover .projects__row-desc,
.projects__row:hover .projects__row-arrow,
.projects__row:focus-within .projects__row-name,
.projects__row:focus-within .projects__row-desc,
.projects__row:focus-within .projects__row-arrow {
	color: var(--branco);
}

@media (prefers-reduced-motion: no-preference) {
	.projects__row-arrow {
		transition: color 0.3s ease, transform 0.25s ease;
	}

	.projects__row:hover .projects__row-arrow,
	.projects__row:focus-within .projects__row-arrow {
		transform: translateX(6px);
	}
}

.projects__preview {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	width: min(360px, 70%);
	height: auto;
	border: 1.5px solid var(--azul);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 2;
}

.projects__row:hover .projects__preview,
.projects__row:focus-within .projects__preview {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 782px) {
	.projects {
		padding: 1rem 1.5rem 4rem;
	}

	.projects__cv-question {
		font-size: 1.3rem;
	}

	.projects__cv-link {
		font-size: 0.85rem;
		padding: 0.9rem 1.5rem;
		box-shadow: 4px 5px 0 0 var(--azul);
	}

	.projects__row-name {
		padding: 0.85rem 1rem;
		font-size: clamp(1.25rem, 1rem + 3vw, 1.75rem);
	}

	.projects__row-arrow {
		padding-right: 1rem;
	}

	.projects__preview {
		width: 85%;
	}
}

/* ---------- CTA final ---------- */

.cta {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 6rem 3.25rem;
	text-align: center;
}

/* Mesma "nuvem de blocos" usada no hero (Background_Codigos), só que
   azul: tira larga colada na borda inferior da seção, atrás do
   texto/botão, como um respiro antes do footer. */
.cta__graphic {
	position: absolute;
	z-index: 0;
	left: 50%;
	bottom: -3%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 1400px;
	height: auto;
	opacity: 0.45;
	pointer-events: none;
}

.cta__text {
	position: relative;
	z-index: 1;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
	line-height: 1.2;
	color: var(--verde-limao);
}

.cta__text p {
	margin: 0 0 0.25em;
	white-space: nowrap;
}

.cta__text p:last-child {
	margin-bottom: 0;
}

/* Entrada em cascata do texto e do botão, mesma lógica de
   .sobre__text / .about__text p, disparada por .cta.is-visible. */
@media (prefers-reduced-motion: no-preference) {
	.cta__text p,
	.cta__button {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.cta.is-visible .cta__text p,
	.cta.is-visible .cta__button {
		opacity: 1;
		transform: translateY(0);
	}

	.cta__text p:nth-of-type(1) {
		transition-delay: 0.1s;
	}

	.cta__text p:nth-of-type(2) {
		transition-delay: 0.25s;
	}

	.cta__button {
		transition-delay: 0.4s;
	}
}

.cta__button {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-top: 2.25rem;
	margin-right: 0.4rem;
	margin-bottom: 0.4rem;
	border: 2px solid var(--verde-limao);
	box-shadow: 5px 7px 0 0 var(--verde-limao);
	color: var(--verde-limao);
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 1.1rem 2.25rem;
	text-decoration: none;
}

/* Botão "afunda" no hover/foco até encostar na própria sombra —
   mesmo princípio visual da sombra dura já usada nos outros botões
   (CV, FAQ), só que aqui vira uma micro-interação de toque. */
@media (prefers-reduced-motion: no-preference) {
	.cta__button {
		transition: opacity 0.7s ease, transform 0.15s ease, box-shadow 0.15s ease;
	}

	.cta.is-visible .cta__button:hover,
	.cta.is-visible .cta__button:focus-visible {
		transform: translate(5px, 7px);
		box-shadow: 0 0 0 0 var(--verde-limao);
	}
}

.services-ticker {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	border-top: 1.5px solid var(--branco);
}

.services-ticker__track {
	display: flex;
	width: max-content;
	animation: ticker-scroll 32s linear infinite;
}

.services-ticker__item {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: clamp(3rem, 1.5rem + 8vw, 7.5rem);
	line-height: 1;
	color: var(--verde-limao);
	padding: 0.15em 0.35em;
}

@media (prefers-reduced-motion: reduce) {
	.services-ticker__track {
		animation: none;
	}
}

@media (max-width: 782px) {
	.cta {
		padding: 3.5rem 1.5rem;
	}

	.cta__text {
		font-size: clamp(1.2rem, 1rem + 3vw, 1.6rem);
	}

	.cta__text p {
		white-space: normal;
	}

	.cta__button {
		font-size: 0.85rem;
		padding: 0.9rem 1.5rem;
		box-shadow: 4px 5px 0 0 var(--verde-limao);
	}

	.services-ticker__item {
		font-size: clamp(1.5rem, 1rem + 5vw, 2.25rem);
	}

	/* Em 100vw de largura o gráfico fica baixo demais (~107px) e o
	   Chrome perde os traços finos do desenho na rasterização — some
	   visualmente mesmo com opacidade cheia. Fixando uma altura maior
	   (a largura estica proporcionalmente e o overflow:hidden do .cta
	   corta o excesso) resolve sem perder a nitidez. */
	.cta__graphic {
		width: auto;
		height: 180px;
		max-width: none;
		opacity: 0.7;
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: no-preference) {
	.cta.is-visible .cta__button:hover,
	.cta.is-visible .cta__button:focus-visible {
		transform: translate(4px, 5px);
	}
}

/* ---------- Página de projeto individual (single-projeto.html) ---------- */
/* Segue a paleta azul já usada em .projects (título, moldura, sombra dura
   dos botões) já que essa página é uma extensão da seção Projetos. Fotos
   e texto do corpo (wp:post-content) são livres — a Bia adiciona depois
   pelo editor de blocos. */

/* Sem max-width — a caixa acompanha a largura real da página (só o
   padding de 5.5rem, igual dos dois lados, cria a margem), pra tudo
   (título, colunas de texto, etc.) ocupar a largura nova, não só a
   linha decorativa. Deixou de ficar limitado a 1050px/centralizado
   como .projects; agora é mais parecido com .hero, mas sem o
   max-width dele — aqui o texto é o protagonista da largura, não uma
   imagem de fundo posicionada à parte. */
.projeto-single {
	margin: 0;
	padding: 4rem 5.5rem 6rem;
}

.projeto-single__back {
	display: inline-block;
	margin-bottom: 2.5rem;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--azul);
	text-decoration: none;
}

.projeto-single__back:hover,
.projeto-single__back:focus-visible {
	text-decoration: underline;
}

.projeto-single__tag {
	display: block;
	margin-bottom: 0.75rem;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--azul);
}

.projeto-single__title-row {
	display: block;
}

/* Mesmo fade + movimento do hero (título/meta) ao entrar na tela —
   .projeto-single__title-row é observado pelo IntersectionObserver
   global em functions.php, que adiciona .is-visible. */
@media (prefers-reduced-motion: no-preference) {
	.projeto-single__title-row {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.projeto-single__title-row.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mesmo tamanho de .projects__title na home, pra acompanhar as
   proporções do resto do site em vez de ter uma escala própria.
   O <h1> agora é o próprio flex container (título dividido em
   .title-l1/.title-l2 + .title-accent, ver
   patterns/projeto-single-head.php) — não a .title-row acima, que
   virou só um wrapper de animação. Isso é o que permite a linha
   decorativa ficar alinhada com a ÚLTIMA linha do título quando ele
   quebra em duas (ver media query), e não com o título inteiro:
   num flex container com wrap, align-items centraliza cada item
   dentro da própria linha (row) em que ele caiu, então no mobile
   .title-l1 cai sozinho numa linha e .title-l2 + .title-accent caem
   juntos na linha seguinte, centralizados só entre si. */
.projeto-single__title {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	font-family: "Delight", sans-serif;
	font-weight: 500;
	font-size: clamp(3rem, 1.65rem + 8.8vw, 9.35rem);
	line-height: 0.92;
	color: var(--azul);
	white-space: nowrap;
}

/* Sem gap no <h1>: o espaço entre "estúdio da" e "salvação" é uma
   palavra normal (margin-left pequeno, tipo espaço de palavra), bem
   menor que o respiro antes da linha decorativa (margin-left maior,
   na própria .title-accent) — usar um "gap" só não daria pra ter os
   dois valores diferentes ao mesmo tempo. Só aplica quando existe
   .title-l1 antes (seletor de irmão adjacente) — em nomes de uma
   palavra só (klask) não tem .title-l1 nenhum, então .title-l2 fica
   sem esse espaço extra, coladinho no início do título. */
.projeto-single__title-l1 + .projeto-single__title-l2 {
	margin-left: 0.28em;
}

/* Preenche o espaço depois do título até sangrar na borda real da
   página — mesma técnica do .projects__title-line na home: como
   .projeto-single não tem mais max-width, cancelar o padding lateral
   (-5.5rem) já é suficiente pra chegar na borda, sem precisar de
   calc()/vw. Duas faixas (grossa + fina) via gradientes. */
.projeto-single__title-accent {
	flex: 1 1 auto;
	height: 1.35rem;
	margin-left: 1.75rem;
	margin-right: -5.5rem;
	background-image:
		linear-gradient(var(--azul), var(--azul)),
		linear-gradient(var(--azul), var(--azul));
	background-size: 100% 0.7rem, 100% 0.3rem;
	background-position: top left, bottom left;
	background-repeat: no-repeat, no-repeat;
}

/* Categorias/país/ano agora ficam numa linha própria embaixo do
   título (não mais ao lado dele). */
.projeto-single__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.projeto-single__meta-item {
	display: inline-block;
	border: 1.5px solid var(--azul);
	padding: 0.35rem 0.9rem;
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--azul);
}

/* O ano vem preenchido (sólido) pra se diferenciar das categorias
   (o que foi feito no projeto), que ficam só com contorno. */
.projeto-single__meta-item--ano {
	background-color: var(--azul);
	color: var(--branco);
}

/* Mobile-only: o título (nomes com mais de uma palavra) quebra em
   duas linhas — "todas as palavras menos a última" numa linha,
   última palavra sozinha na de baixo. flex-wrap:wrap no <h1> +
   flex-basis:100% em .title-l1 é o truque clássico pra forçar um
   item a ocupar a linha inteira num flex container, empurrando o
   resto (.title-l2 + .title-accent) pra própria linha — e como os
   dois últimos caem JUNTOS nessa segunda linha, o align-items:center
   do <h1> (herdado, não precisa repetir aqui) centraliza a linha
   decorativa exatamente na altura de .title-l2 (a última palavra),
   não do título inteiro. white-space:nowrap em .title-l1 garante que
   as palavras dentro dela (ex.: "estúdio da") nunca se separem entre
   si — sem isso um empate exato de largura já quebrou em 3 linhas
   numa tentativa anterior. */
@media (max-width: 782px) {
	.projeto-single__title {
		flex-wrap: wrap;
	}

	.projeto-single__title-l1 {
		flex: 1 0 100%;
		white-space: nowrap;
		margin-bottom: 0.15em;
	}

	/* Mesma especificidade do seletor "irmão adjacente" no desktop
	   (.title-l1 + .title-l2), senão essa regra perde e o
	   margin-left de lá continua valendo mesmo aqui dentro do
	   media query. No mobile o espaço já é a quebra de linha em si,
	   não precisa de mais nenhum respiro horizontal. */
	.projeto-single__title-l1 + .projeto-single__title-l2 {
		margin-left: 0;
	}

	/* Numa linha só, sem quebrar (o "2024" não pode cair pra linha de
	   baixo) — se as pills não couberem todas, rola horizontalmente em
	   vez de quebrar. */
	.projeto-single__meta {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.projeto-single__meta::-webkit-scrollbar {
		display: none;
	}

	.projeto-single__meta-item {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

.projeto-single__intro {
	max-width: 42rem;
	margin: 1.75rem 0 0;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.45;
	color: var(--azul);
}

.projeto-single__body {
	margin-top: 3rem;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--azul);
}

.projeto-single__body > * {
	margin-top: 0;
	margin-bottom: 2rem;
}

.projeto-single__body > *:last-child {
	margin-bottom: 0;
}

.projeto-single__body h2,
.projeto-single__body h3 {
	font-family: "Delight", sans-serif;
	font-weight: 500;
	color: var(--azul);
}

.projeto-single__body img {
	display: block;
	width: 100%;
	height: auto;
	border: 1.5px solid var(--azul);
}

.projeto-single__body figure {
	margin: 0;
}

.projeto-single__footer {
	position: relative;
	margin-top: 3rem;
	padding-top: 0;
	padding-bottom: 13rem;
}

/* Navegação de projeto: 2 botões (Anterior/Próximo Projeto) do tamanho
   e formato dos botões normais do site (retangular, sem arredondar,
   largura no conteúdo) — só que vazados (contorno azul, sem
   preenchimento/sombra) em vez do preenchido+sombra-dura do
   .cta__button, pra ficar mais leve. Ficam colados logo abaixo da fita
   de fotos. O link "Início" saiu do nav e virou um link de texto
   simples mais abaixo (.projeto-single__home-link), no mesmo estilo
   discreto do ".projeto-single__back" do topo da página. */
.projeto-single__footer .projeto-single__nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 4.5rem;
}

.projeto-single__footer .projeto-single__nav-card {
	flex: 0 0 auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 2px solid var(--azul);
	padding: 0.9rem 1.5rem;
	font-family: "Delight", sans-serif;
	color: var(--azul);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.projeto-single__footer .projeto-single__nav-card--placeholder {
	visibility: hidden;
}

.projeto-single__footer .projeto-single__nav-card:hover,
.projeto-single__footer .projeto-single__nav-card:focus-visible {
	background-color: rgba(56, 97, 171, 0.08);
}

/* Setas duplas (« »), finas e leves — um traço "clean" de paginação
   em vez de uma seta grossa/pesada. */
.projeto-single__footer .projeto-single__nav-arrow {
	flex-shrink: 0;
	font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
	line-height: 1;
	font-weight: 400;
}

.projeto-single__footer .projeto-single__nav-label {
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.projeto-single__footer .projeto-single__home-link {
	display: block;
	margin-top: 6.5rem;
	text-align: center;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--branco);
	text-decoration: none;
}

.projeto-single__footer .projeto-single__home-link:hover,
.projeto-single__footer .projeto-single__home-link:focus-visible {
	text-decoration: underline;
}

/* Pequeno bounce no hover/foco, só um "pulinho" vertical — não é o
   afundar dos outros botões do site, esse aqui é só um texto simples. */
@media (prefers-reduced-motion: no-preference) {
	.projeto-single__footer .projeto-single__home-link:hover,
	.projeto-single__footer .projeto-single__home-link:focus-visible {
		animation: projeto-single-home-bounce 0.5s ease;
	}

	@keyframes projeto-single-home-bounce {
		0% {
			transform: translateY(0);
		}

		30% {
			transform: translateY(-6px);
		}

		55% {
			transform: translateY(0);
		}

		75% {
			transform: translateY(-2px);
		}

		100% {
			transform: translateY(0);
		}
	}
}

@media (max-width: 782px) {
	.projeto-single__footer .projeto-single__nav {
		gap: 0.75rem;
	}

	.projeto-single__footer .projeto-single__nav-card {
		padding: 0.7rem 1rem;
	}

	.projeto-single__footer .projeto-single__nav-label {
		font-size: 0.75rem;
	}
}

@media (max-width: 782px) {
	.projeto-single {
		padding: 2.5rem 1.5rem 4rem;
	}
}

/* ---------- Etapas (foto + texto alternando de lado) ---------- */
/* Cada etapa do processo é um bloco nativo "Media & Text" (imagem +
   parágrafo) no corpo do projeto; o lado da foto alterna sozinho a
   cada bloco (ela não precisa marcar "mídia à direita" manualmente). */

.projeto-single__body .wp-block-media-text {
	position: relative;
	align-items: stretch;
	gap: 2.5rem;
}

.projeto-single__body .wp-block-media-text:not(:first-of-type) {
	margin-top: 5rem;
}

/* A foto alterna de lado sozinha (independente do que o bloco tiver
   marcado), pra ela não precisar lembrar de alternar manualmente.
   O bloco nativo usa grid-column (não a ordem no DOM) pra posicionar
   mídia/conteúdo, então a alternância também precisa mexer nisso. */
.projeto-single__body .wp-block-media-text:nth-of-type(even) > .wp-block-media-text__media {
	grid-column: 2;
}

.projeto-single__body .wp-block-media-text:nth-of-type(even) > .wp-block-media-text__content {
	grid-column: 1;
}

.projeto-single__body .wp-block-media-text__media {
	box-sizing: border-box;
	border: 2px solid var(--azul);
	border-radius: 1.25rem;
	padding: 0.9rem;
}

.projeto-single__body .wp-block-media-text__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: none;
	border-radius: 0.75rem;
	box-shadow: none;
}

.projeto-single__body .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 0;
	font-family: "Delight", sans-serif;
	font-weight: 400;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.65rem);
	line-height: 1.75;
	color: var(--azul);
}

.projeto-single__body .wp-block-media-text__content > * {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.projeto-single__body .wp-block-media-text__content > *:last-child {
	margin-bottom: 0;
}

/* Título da etapa (Objetivo/Processo/Resultado): mais destaque que o
   texto descritivo, pra marcar o começo de cada seção. */
.projeto-single__body .wp-block-media-text__content h3 {
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
	line-height: 1.1;
	margin-bottom: 1.5rem;
	color: var(--azul);
}

@media (max-width: 782px) {
	.projeto-single__body .wp-block-media-text {
		grid-template-columns: 1fr !important;
	}

	.projeto-single__body .wp-block-media-text > .wp-block-media-text__media,
	.projeto-single__body .wp-block-media-text > .wp-block-media-text__content {
		grid-column: 1 !important;
	}

	.projeto-single__body .wp-block-media-text > .wp-block-media-text__media {
		grid-row: 1;
	}

	.projeto-single__body .wp-block-media-text > .wp-block-media-text__content {
		grid-row: 2;
		height: auto;
		justify-content: flex-start;
		margin-top: 1.5rem;
	}

	.projeto-single__body .wp-block-media-text__media {
		padding: 0.6rem;
	}
}

/* ---------- Teste de layout: 2 colunas de texto + fita de fotos ---------- */
/* Alternativa às "Etapas conectadas" acima: em vez de alternar foto+texto
   por etapa, o texto do projeto vira duas colunas lado a lado (sem
   título por enquanto, mesmo estilo do parágrafo "Sobre" logo acima,
   pra ler como uma continuação dele) e as fotos do processo passam a
   rolar horizontalmente embaixo, num bloco Galeria nativo que
   assets/js/projeto-strip.js transforma em fita (duplica as fotos uma
   vez pro loop CSS ficar contínuo — mesmo princípio do
   .projects__thumbs-track da home). */

/* WP core centraliza e limita a largura de blocos "não-full" dentro de
   um layout constrained (mesma regra .is-layout-constrained > :where(...)
   que também afetava a fita de fotos) — sem isso as colunas ficam ~36px
   mais estreitas de cada lado e desalinhadas do parágrafo "Sobre" acima. */
.projeto-single__body .wp-block-columns.projeto-single__cols {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	gap: 3.5rem;
	margin-top: -0.5rem;
}

/* Mesma tipografia de .projeto-single__intro (o parágrafo "Sobre" logo
   acima), pra essas duas colunas lerem como continuação dele em vez de
   um bloco de texto novo e maior. */
.projeto-single__body .wp-block-columns p {
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.45;
	text-align: justify;
}

/* Mesmo botão do "Get in Touch" da home (.cta__button): contorno +
   sombra dura, mesmo padding/tipografia — só que em azul em vez de
   verde-limão, porque aqui o fundo é claro (mesma lógica de
   .projects__cv-link, que já é a versão azul desse botão). */
.projeto-single__visit {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.projeto-single__visit-link {
	display: inline-block;
	border: 2px solid var(--azul);
	box-shadow: 5px 7px 0 0 var(--azul);
	color: var(--azul);
	font-family: "Delight", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 1.1rem 2.25rem;
	text-decoration: none;
}

/* Seta pra nordeste (↗) só no botão real (com URL) — indica que abre
   o site em outra aba, sem precisar de texto extra tipo "(nova aba)". */
.projeto-single__visit-arrow {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 1.15em;
	font-weight: 400;
}

/* Mesma microinteração de "afundar" do .cta__button no hover/foco. */
@media (prefers-reduced-motion: no-preference) {
	.projeto-single__visit-link {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.projeto-single__visit-link:hover,
	.projeto-single__visit-link:focus-visible {
		transform: translate(5px, 7px);
		box-shadow: 0 0 0 0 var(--azul);
	}
}

/* Estado "sem URL cadastrada" (projeto_url vazio): é um <span>, não
   um link, então some com a sombra dura e opacifica pra não parecer
   clicável — mas mantém o mesmo formato/borda do botão real. */
.projeto-single__visit-link--soon {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	opacity: 0.5;
	box-shadow: none;
	cursor: default;
}

.projeto-single__visit-spinner {
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
}

@media (prefers-reduced-motion: no-preference) {
	.projeto-single__visit-link--soon:hover,
	.projeto-single__visit-link--soon:focus-visible {
		transform: none;
		box-shadow: none;
	}

	.projeto-single__visit-spinner {
		animation: projeto-single-spin 0.9s linear infinite;
	}

	@keyframes projeto-single-spin {
		to {
			transform: rotate(360deg);
		}
	}
}

.projeto-single__strip {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 4rem;
	overflow: hidden;
}

.projeto-single__strip-track {
	display: flex;
	gap: 1.5rem;
	width: max-content;
	padding: 0 1rem;
	animation: ticker-scroll 28s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.projeto-single__strip-track {
		animation: none;
	}
}

.projeto-single__strip-item {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 420px;
	border: 2px solid var(--azul);
	border-radius: 1.25rem;
	padding: 0.9rem;
}

.projeto-single__strip-item img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0.75rem;
}

@media (max-width: 782px) {
	/* No desktop essa margem negativa colava as colunas no parágrafo
	   "Sobre" acima; no mobile ela empurra o bloco pra cima do limite
	   do .projeto-single__body (que tem overflow:hidden por causa do
	   fix de sangramento em vw), cortando um fiapo do topo da primeira
	   linha do texto. */
	.projeto-single__body .wp-block-columns.projeto-single__cols {
		gap: 2rem;
		margin-top: 0;
	}

	/* No desktop as duas colunas ficam lado a lado, então um parágrafo
	   vazio sobrando no fim de uma coluna não aparece. Empilhado no
	   mobile, esse parágrafo vazio (comum sobrar do editor) cai no meio
	   do fluxo de leitura e dobra o espaço bem na transição entre as
	   duas colunas, parecendo uma separação/quebra que não deveria
	   existir — por isso ele some só aqui. */
	.projeto-single__body .wp-block-columns.projeto-single__cols p:empty {
		display: none;
	}

	.projeto-single__strip-item {
		width: 280px;
		padding: 0.6rem;
	}
}