/*
Theme Name: AB Estúdio Tema 2026
Theme URI: https://abestudio.com
Author: AB Estúdio
Description: Nova direção visual do AB Estúdio — em construção. Nesta etapa: header e banner principal, com layout inspirado no demo "Home Freelancer" do tema Litho (ThemeZaa), recriado do zero em CSS.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: abestudio2026
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	--abe-ink: #22301c;
	--abe-hover: #ffc644;
	--abe-bg: #ffffff;
	--abe-teal: #548249;
	--abe-green: #6ab350;
	--abe-yellow: #aacd40;
	--abe-orange: #ffc644;
	--abe-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--abe-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--abe-max-width: 1200px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--abe-font-body);
	color: var(--abe-ink);
	background: var(--abe-bg);
	line-height: 1.7;
}

/* Bloqueia paisagem em telas pequenas/médias: não dá pra travar a
   orientação de verdade num site comum (screen.orientation.lock só
   funciona em tela cheia/PWA instalado, e nem existe no Safari/iOS) —
   em vez disso, cobre o site com um aviso pedindo retrato de volta. */
.orientation-lock {
	display: none;
}

@media (max-width: 768px) and (orientation: landscape) {
	.orientation-lock {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 9999;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		padding: 40px;
		background: var(--abe-bg);
		text-align: center;
	}

	.orientation-lock-icon {
		width: 56px;
		height: 56px;
		color: var(--abe-ink);
	}

	.orientation-lock p {
		max-width: 320px;
		margin: 0;
		font-family: var(--abe-font-heading);
		font-weight: 500;
		font-size: 1.1rem;
		color: var(--abe-ink);
	}
}

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

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

h1, h2, h3 {
	font-family: var(--abe-font-heading);
	font-weight: 500;
	margin: 0;
	line-height: 1.25;
}

.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 30px;
}

/* Header — transparent, sits directly on top of the hero gradient */
.site-header {
	position: relative;
	z-index: 500;
}

/* Sticky (não fixed): mantém o header no fluxo normal do documento —
   fixed removeria o espaço que ele ocupa, e a .hero-banner (que usa
   margin-top negativo pra deslizar por baixo do header) desalinharia
   tudo. Sticky preserva o espaço e ainda assim gruda no topo ao rolar.
   Sem media query: vale em todas as larguras, mobile incluído. */
.site-header {
	position: sticky;
	top: 0;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Linha degradê de 1px na base do header sticky — mesmas cores/ângulo
   do "Olá." (.about-hello-word). Só aparece com o header já "grudado"
   e branco (.is-scrolled), não sobre o banner transparente. */
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(100deg, var(--abe-teal) 0%, var(--abe-green) 50%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.site-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.site-header.is-scrolled::after {
	opacity: 1;
}

/* Hover/ativo do menu era branco (pensado pro header transparente
   sobre o banner colorido) — em cima do fundo branco do header
   "grudado", ficaria invisível. Troca pro verde da marca só nesse
   estado. */
.site-header.is-scrolled .header-nav-menu a:hover,
.site-header.is-scrolled .header-nav-menu a:focus,
.site-header.is-scrolled .header-nav-menu .current-menu-item > a {
	color: var(--abe-green);
}

.site-header.is-scrolled .header-nav-menu:has(a:hover, a:focus) .current-menu-item > a {
	color: var(--abe-ink);
}

.site-header.is-scrolled .header-nav-menu:has(a:hover, a:focus) .current-menu-item > a:hover,
.site-header.is-scrolled .header-nav-menu:has(a:hover, a:focus) .current-menu-item > a:focus {
	color: var(--abe-green);
}

/* Mesmo comportamento acima, mas disparado pelo hover no WhatsApp/Apps
   (fora de .header-nav-menu, então o :has() acima não pega). */
.site-header.is-scrolled .header-actions:has(.header-whatsapp:hover, .apps-badge-desktop:hover) .header-nav-menu .current-menu-item > a {
	color: var(--abe-ink);
}

/* Botão "Nossos Apps": hover era branco (regra base .apps-badge-desktop:hover)
   — na barra flutuante troca pro mesmo verde do hover das categorias,
   com texto branco. Mesmo padrão em todas as larguras. */
.site-header.is-scrolled .apps-badge-desktop:hover {
	background: var(--abe-green);
	color: #fff;
}

/* Barra flutuante: logo troca da cor sólida (--abe-ink) pro mesmo
   degradê usado no logo do menu aberto (.nav-drawer-header). */
.site-header.is-scrolled .site-logo-mark {
	background: linear-gradient(91deg, var(--abe-teal) 0%, var(--abe-green) 45%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 28px;
	padding-bottom: 28px;
}

/* display:flex (não o bloco padrão) pra altura da div encolher pro
   tamanho real do logo — em bloco normal, um filho inline-flex herda
   line-height do body e cria uma "caixa de linha" fantasma mais alta
   que a imagem, o que descentralizava o logo em relação aos botões do
   header (ambos ficam centralizados por .site-header .container, mas
   contra a altura dessa caixa, não a do logo visível). */
.site-branding {
	display: flex;
	align-items: center;
}

.site-logo {
	display: inline-flex;
	flex-shrink: 0;
}

.site-logo img {
	height: 30px;
	width: auto;
}

/* Right-side header actions: email + hamburger */
.header-actions {
	display: flex;
	align-items: center;
	gap: 66px;
	flex-wrap: nowrap;
}

/* Menu inline no header — só aparece em telas grandes (ver media query
   min-width:1025px); no restante, as categorias moram no nav-drawer. */
.header-nav {
	display: none;
}

.whatsapp-wrap {
	display: none;
}

.header-nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 32px;
}

.header-nav-menu a {
	display: block;
	color: var(--abe-ink);
	font-family: var(--abe-font-heading);
	font-weight: 500;
	font-size: 1.05rem;
	transition: color 0.2s ease;
}

.header-nav-menu a:hover,
.header-nav-menu a:focus {
	color: #fff;
}

.header-nav-menu .current-menu-item > a {
	color: #fff;
}

/* Só um item por vez em destaque: assim que outro item do menu ganha
   hover/foco, a categoria ativa volta à cor normal — a menos que o item
   em hover/foco seja ela mesma, caso em que segue a cor de hover. */
.header-nav-menu:has(a:hover, a:focus) .current-menu-item > a {
	color: var(--abe-ink);
}

.header-nav-menu:has(a:hover, a:focus) .current-menu-item > a:hover,
.header-nav-menu:has(a:hover, a:focus) .current-menu-item > a:focus {
	color: #fff;
}

/* Mesmo comportamento acima, mas disparado pelo hover no WhatsApp/Apps
   (fora de .header-nav-menu, então o :has() acima não pega) — sem a
   ressalva de "é o próprio item em hover" porque esses botões nunca
   são o item ativo do menu. */
.header-actions:has(.header-whatsapp:hover, .apps-badge-desktop:hover) .header-nav-menu .current-menu-item > a {
	color: var(--abe-ink);
}

/* Mesma "caixa" do .apps-badge-desktop (padding/radius/tipografia em
   maiúsculas) — só a cor muda pro verde oficial do WhatsApp (mesmo tom
   de .whatsapp-float). Hover inverte: fundo branco, texto/ícone
   voltam a ser verdes (a cor do ícone vem por herança — sem color
   próprio em .header-whatsapp-icon-wrap). */
.header-whatsapp {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25d366;
	color: #fff;
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 0.62rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 8px 12px;
	border-radius: 8px;
	flex-shrink: 0;
	transition: background 0.2s ease, color 0.2s ease;
}

.header-whatsapp:hover {
	background: #fff;
	color: #25d366;
}

/* Balão com o horário de atendimento, abaixo do botão, só no hover. */
.header-whatsapp-tooltip {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	color: var(--abe-ink);
	padding: 10px 14px;
	border-radius: 8px;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.3);
	font-family: var(--abe-font-body);
	font-weight: 400;
	font-size: 0.78rem;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 100;
}

.header-whatsapp-tooltip strong {
	display: block;
	color: var(--abe-ink);
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	margin-bottom: 2px;
}

.header-whatsapp-tooltip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-bottom-color: #fff;
}

/* Abaixo de 769px não tem hover de verdade (touch) — o balão só abre
   com clique (.is-active, ver main.js), que também dispara a contagem
   regressiva antes de redirecionar. Em 769px+ continua no hover puro,
   sem clique/contagem — o link navega direto como um link normal. */
@media (min-width: 769px) {
	.header-whatsapp:hover .header-whatsapp-tooltip {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
}

.header-whatsapp.is-active .header-whatsapp-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Escondido até .is-active (clique real, contagem em andamento) — em
   769px+ o balão também abre só no hover (preview, sem contar nada);
   sem isso, essa linha apareceria "parada" durante esse preview, antes
   de qualquer clique. */
.header-whatsapp-countdown {
	display: none;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.72rem;
	font-weight: 600;
	color: #25d366;
}

.header-whatsapp.is-active .header-whatsapp-countdown {
	display: block;
}

.header-whatsapp-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	flex: none;
}

.header-whatsapp-icon {
	width: 100%;
	height: 100%;
}

/* Texto diferente por faixa: "Whatsapp" abaixo de 500px, "Fale
   conosco" em 501-768px (único lugar onde .header-whatsapp aparece —
   ver display:none/inline-flex mais abaixo no arquivo). */
.header-whatsapp-text-tablet {
	display: none;
}

@media (min-width: 501px) and (max-width: 768px) {
	.header-whatsapp-text-mobile {
		display: none;
	}

	.header-whatsapp-text-tablet {
		display: inline;
	}
}

.hamburger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 26px;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 6px 0;
	cursor: pointer;
}

.hamburger span {
	display: block;
	height: 3px;
	background: var(--abe-ink);
	border-radius: 2px;
}

.hamburger span:nth-child(1) {
	width: 100%;
}

.hamburger span:nth-child(2) {
	width: 70%;
}

.hamburger span:nth-child(3) {
	width: 100%;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
	width: 100%;
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	width: 100%;
}

/* Nav drawer opened by the hamburger — slides in from the right, like Litho's */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
	z-index: 190;
}

.nav-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 50%;
	background: rgba(26, 26, 26, 0.95);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
	z-index: 200;
	display: flex;
	flex-direction: column;
	overflow-y: hidden;
}

.nav-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease;
}

.nav-drawer-header {
	width: 100%;
	max-width: 640px;
	align-self: flex-start;
	padding: 64px 56px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 120px;
}

.nav-drawer-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Cópia do botão "Entrar" reaproveitada ao final do menu — some por
   padrão, só aparece via media query (ver 501-768px mais abaixo). O
   original em .nav-drawer-header some nessa mesma faixa pra não duplicar
   visualmente. */
.nav-drawer-login-end {
	display: none;
}

.nav-drawer-login:hover,
.nav-drawer-login:focus {
	background: #fff;
	color: var(--abe-ink);
	border-color: #fff;
}

.nav-drawer-header .site-logo img {
	height: 32px;
}

.site-logo-mark {
	display: block;
	-webkit-mask-image: url('assets/images/logo-ab-white.png');
	mask-image: url('assets/images/logo-ab-white.png');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
}

.nav-drawer-header .site-logo-mark {
	width: 104px;
	height: 37px;
	background: linear-gradient(91deg, var(--abe-teal) 0%, var(--abe-green) 45%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
	/* A caixa é mais larga que a proporção real da imagem — mask-position
	   left (usado no ícone do cabeçalho) deixaria o desenho colado na
	   borda esquerda mesmo com a caixa centralizada. Aqui, centralizado. */
	-webkit-mask-position: center;
	mask-position: center;
}

.site-logo-header .site-logo-mark {
	width: 84px;
	height: 30px;
	background: var(--abe-ink);
}

.nav-drawer-close {
	position: absolute;
	top: 29px;
	right: calc(max(0px, calc((100vw - 1280px) / 2)) + 32px);
	width: 26px;
	height: 26px;
	background: none;
	border: none;
	cursor: pointer;
	color: #fff;
}

.nav-drawer-close::before,
.nav-drawer-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
}

.nav-drawer-close::before {
	transform: rotate(45deg);
}

.nav-drawer-close::after {
	transform: rotate(-45deg);
}

.nav-drawer nav {
	width: 100%;
	max-width: 640px;
	align-self: flex-start;
	margin: 50px 0 auto;
	padding: 0 0 32px;
}

.nav-drawer .primary-menu {
	list-style: none;
	margin: 0 auto;
	max-width: 380px;
	width: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nav-drawer .primary-menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	color: #fff;
	font-family: var(--abe-font-heading);
	font-weight: 400;
	font-size: 1.15rem;
	padding: 10px 20px;
	text-align: center;
	border: 1px solid #313131;
	border-radius: 8px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-drawer .primary-menu a:hover,
.nav-drawer .primary-menu a:focus {
	color: #d7e26a;
	border-color: #d7e26a;
}

/* Current page is sinalizada na cor verde da paleta — já indica onde você está */
.nav-drawer .primary-menu .current-menu-item > a {
	color: #d7e26a;
}

/* Item ativo mantém a borda padrão mesmo no hover — só o texto reage */
.nav-drawer .primary-menu .current-menu-item > a:hover,
.nav-drawer .primary-menu .current-menu-item > a:focus {
	border-color: #313131;
}

.nav-drawer .primary-menu .current-menu-item > a:hover {
	color: #d7e26a;
}

/* Hero / banner */
@property --abe-gradient-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 19deg;
}

@property --abe-green-stop {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 45%;
}

@property --abe-yellow-stop {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 88%;
}

@property --abe-blob1-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 60%;
}
@property --abe-blob1-y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 40%;
}
@property --abe-blob2-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 75%;
}
@property --abe-blob2-y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 65%;
}

.hero-banner {
	position: relative;
	overflow: hidden;
	height: 650px;
	background-image:
		radial-gradient(circle at var(--abe-blob1-x) var(--abe-blob1-y), var(--abe-green) 0%, rgba(100, 179, 154, 0) 48%),
		radial-gradient(circle at var(--abe-blob2-x) var(--abe-blob2-y), var(--abe-yellow) 0%, rgba(124, 206, 151, 0) 48%),
		linear-gradient(var(--abe-gradient-angle), var(--abe-teal) 0%, var(--abe-green) var(--abe-green-stop), var(--abe-yellow) var(--abe-yellow-stop), var(--abe-orange) 100%);
	/* -100/100 (não -96/96) porque o header, em telas ≥1025px, ficou mais
	   alto que 96px depois que o botão "Nossos Apps" passou a viver
	   inline no header-actions (padding+ícone do botão somam ~99.6px de
	   altura total pro header) — sem a folga, sobrava uma tira branca
	   entre o topo da página e o gradiente do banner. */
	margin-top: -100px;
	padding-top: 100px;
	animation: abe-gradient-drift 42s ease-in-out infinite;
}

/* Irregular, non-evenly-spaced steps so the angle, each color's share of the
   linear wash, and the two soft "blobs" all drift on their own uncorrelated
   paths — never settling into an obvious back-and-forth pattern. The blobs
   overlap the straight-line wash and each other, so the green/yellow
   boundary reads as an organic, curved blend instead of a straight edge.
   The gap between --abe-green-stop and --abe-yellow-stop always stays wide
   (40%+) so the base wash itself stays soft too. */
@keyframes abe-gradient-drift {
	0% {
		--abe-gradient-angle: 0deg;
		--abe-green-stop: 45%;
		--abe-yellow-stop: 90%;
		--abe-blob1-x: 60%;
		--abe-blob1-y: 40%;
		--abe-blob2-x: 75%;
		--abe-blob2-y: 65%;
	}
	16% {
		--abe-gradient-angle: 55deg;
		--abe-green-stop: 58%;
		--abe-yellow-stop: 98%;
		--abe-blob1-x: 38%;
		--abe-blob1-y: 62%;
		--abe-blob2-x: 82%;
		--abe-blob2-y: 30%;
	}
	33% {
		--abe-gradient-angle: 95deg;
		--abe-green-stop: 32%;
		--abe-yellow-stop: 78%;
		--abe-blob1-x: 70%;
		--abe-blob1-y: 20%;
		--abe-blob2-x: 45%;
		--abe-blob2-y: 75%;
	}
	50% {
		--abe-gradient-angle: 165deg;
		--abe-green-stop: 52%;
		--abe-yellow-stop: 94%;
		--abe-blob1-x: 25%;
		--abe-blob1-y: 50%;
		--abe-blob2-x: 65%;
		--abe-blob2-y: 45%;
	}
	66% {
		--abe-gradient-angle: 230deg;
		--abe-green-stop: 28%;
		--abe-yellow-stop: 72%;
		--abe-blob1-x: 55%;
		--abe-blob1-y: 78%;
		--abe-blob2-x: 30%;
		--abe-blob2-y: 25%;
	}
	83% {
		--abe-gradient-angle: 300deg;
		--abe-green-stop: 48%;
		--abe-yellow-stop: 96%;
		--abe-blob1-x: 80%;
		--abe-blob1-y: 55%;
		--abe-blob2-x: 50%;
		--abe-blob2-y: 85%;
	}
	100% {
		--abe-gradient-angle: 360deg;
		--abe-green-stop: 45%;
		--abe-yellow-stop: 90%;
		--abe-blob1-x: 60%;
		--abe-blob1-y: 40%;
		--abe-blob2-x: 75%;
		--abe-blob2-y: 65%;
	}
}

.hero-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 58%;
	background-image: radial-gradient(circle 5.2px, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(circle at 8% 22%, #000 0%, transparent 62%);
	mask-image: radial-gradient(circle at 8% 22%, #000 0%, transparent 62%);
	pointer-events: none;
}

.hero-glow-0,
.hero-glow-1 {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

/* Second, larger circle behind the main one — same center, softer/more transparent */
.hero-glow-0 {
	width: 52%;
	aspect-ratio: 1;
	top: 50%;
	right: 1%;
	transform: translateY(-50%);
	background: linear-gradient(191deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(100, 179, 154, 0.05) 100%);
}

/* Big circle behind the photo — vertically centered in the banner */
.hero-glow-1 {
	width: 40%;
	aspect-ratio: 1;
	top: 50%;
	right: 7%;
	transform: translateY(-50%);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0) 100%);
}

.hero-banner .container {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 24px;
}

.hero-copy {
	position: relative;
	padding: 0 0 0 48px;
	max-width: 640px;
	align-self: center;
	justify-self: start;
	text-align: left;
	transform: translateY(-74px);
}

.hero-quote-wrap {
	position: absolute;
	top: 100%;
	left: 48px;
	right: 0;
	margin-top: 50px;
}

.hero-title {
	margin: 0;
	font-size: clamp(3.4rem, 7.9vw, 6.8rem);
	line-height: 0.95;
}

.hero-title span {
	display: block;
	font-family: var(--abe-font-heading);
	font-weight: 800;
}

.hero-title-solid {
	color: var(--abe-ink);
}

.hero-title-outline {
	color: transparent;
	-webkit-text-stroke: 2px #fff;
}

.hero-quote {
	display: flex;
	/* baseline (não center): o dash acompanha a base da primeira linha do
	   texto em qualquer resolução, em vez de ficar centralizado na altura
	   total (que muda conforme o texto quebra ou não). */
	align-items: baseline;
	justify-content: flex-start;
	gap: 14px;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--abe-ink);
	margin: 0;
	max-width: 100%;
	white-space: nowrap;
}

.hero-quote .dash {
	width: 17px;
	height: 2px;
	background: var(--abe-ink);
	flex: none;
}

.hero-quote-text {
	display: inline-block;
}

.hero-quote-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-quote-word.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.hero-quote-word.is-hiding {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.hero-copy .button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--abe-ink);
	color: #fff;
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 16px 30px;
	border-radius: 999px;
}

.hero-copy .button:hover {
	opacity: 0.85;
}

.hero-photo {
	position: relative;
	height: 100%;
	min-height: 560px;
	align-self: stretch;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding-left: 100px;
}

/* Entre 501 e 1024px a foto volta a ficar encostada na borda esquerda
   da coluna (sem o padding de 100px do desktop largo) — nessa faixa a
   coluna já é bem mais estreita, então o respiro extra sobra menos e
   empurra a pessoa demais pra dentro. */
@media (min-width: 501px) and (max-width: 1024px) {
	.hero-photo {
		padding-left: 0;
	}
}

.hero-photo img {
	height: auto;
	min-height: 500px;
	max-height: 500px;
	width: auto;
	margin: 0;
	object-fit: contain;
	object-position: bottom left;
}

.hero-photo-placeholder {
	width: 100%;
	max-width: 380px;
	aspect-ratio: 3 / 4;
	margin-bottom: -2px;
	border-radius: 16px 16px 0 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.hero-photo-placeholder .avatar-head {
	width: 34%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
}

.hero-photo-placeholder .avatar-body {
	width: 62%;
	height: 46%;
	border-radius: 50% 50% 0 0;
	background: rgba(255, 255, 255, 0.55);
}

.hero-photo-hint {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--abe-font-heading);
	font-size: 0.72rem;
	color: rgba(35, 35, 35, 0.65);
	background: rgba(255, 255, 255, 0.75);
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Wraps the hero so the scroll button can overlap it without being
   clipped by the hero's own overflow:hidden (needed for the dot pattern). */
.hero-wrap {
	position: relative;
}

/* Scroll-down indicator — overlaps the banner and the section below it */
.scroll-down {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
}

/* Seta em todas as resoluções agora, com a mesma animação contínua de
   "quicar" que era só do mobile — sem depender de :hover. */
.scroll-down-icon-mouse {
	display: none;
}

.scroll-down-icon-arrow {
	display: block;
	animation: abe-scroll-bounce 1.4s ease-in-out infinite;
}

.scroll-down:hover {
	box-shadow: 0 16px 34px -8px rgba(0, 0, 0, 0.3);
}

.scroll-down svg {
	width: 18px;
	height: 28px;
	transition: transform 0.2s ease;
}

.scroll-down:hover svg {
	animation: abe-scroll-bounce 0.9s ease-in-out infinite;
}

@keyframes abe-scroll-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
}

/* Botão flutuante "APPS" — link para a Galeria de APPs */
.apps-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #d7e26a;
	color: var(--abe-ink);
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
}

.apps-badge:hover {
	background: #fff;
	color: var(--abe-ink);
}

.apps-badge-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.apps-badge-mobile {
	display: none;
}

.apps-badge-desktop {
	position: fixed;
	right: 0;
	top: 544px;
	z-index: 40;
	padding: 14px 18px;
	border-radius: 4px 0 0 4px;
	background: var(--abe-ink);
	color: #fff;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
}

.apps-badge-desktop:hover {
	background: #fff;
	color: var(--abe-ink);
}

/* .apps-badge-desktop agora fica visível também abaixo de 500px — mesmo
   tratamento inline no header usado em 501-768px (ver regra sem media
   query mais abaixo). .apps-badge-mobile (acima) nunca é usado. */

/* Página Sobre — linha de destaques + seção "hello." */
.about-hello {
	padding: 95px 0 200px;
}

@media (min-width: 1025px) {
	.about-hello {
		padding-top: 145px;
	}
}

.about-hello .container {
	max-width: 1140px;
}

.about-hello-row {
	display: grid;
	grid-template-columns: 25fr 45fr 30fr;
	align-items: start;
	gap: 16px;
}

.about-hello-word {
	align-self: end;
	text-align: center;
	font-family: var(--abe-font-body);
	font-weight: 600;
	font-size: 5.4rem;
	color: var(--abe-yellow);
	background: linear-gradient(100deg, var(--abe-teal) 0%, var(--abe-yellow) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	white-space: nowrap;
}

@media (min-width: 1025px) {
	.about-hello-word {
		text-align: right;
		/* Mesmo degradê de 4 cores das faixas mais estreitas (era só
		   teal→amarelo aqui, ficava discreto demais). width:fit-content +
		   justify-self:end encolhe a caixa ao tamanho do texto e mantém
		   encostado à direita — sem isso, o degradê usaria a largura
		   inteira da coluna (25fr), bem mais larga que "Olá.", e só uma
		   fatia estreita apareceria atrás das letras. */
		width: fit-content;
		justify-self: end;
		background: linear-gradient(100deg, var(--abe-teal) 0%, var(--abe-green) 50%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
		-webkit-background-clip: text;
		background-clip: text;
	}
}

.about-hello-heading {
	font-family: var(--abe-font-body);
	font-weight: 500;
	font-size: 2.4rem;
	line-height: 1.1;
	color: var(--abe-ink);
	text-align: right;
	padding-right: 50px;
	margin: 0;
}

/* Entrelinhas um pouco maior em "Estamos..." — a regra acima (1.1) é
   bem apertada; sutilmente mais folgada aqui pra telas largas. */
@media (min-width: 769px) {
	.about-hello-heading {
		line-height: 1.2;
	}

	.about-hello-copy {
		position: relative;
		top: 8px;
	}
}

.about-hello-heading strong {
	font-weight: 700;
}

.about-hello-copy p {
	color: rgba(12, 37, 33, 0.6);
	font-family: var(--abe-font-body);
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 8px 0 20px;
}

.about-info-link {
	display: inline-block;
	position: relative;
	top: -8px;
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--abe-ink);
	text-decoration: underline;
	text-underline-offset: 6px;
	transition: color 0.2s ease;
}

.about-info-link:hover {
	color: var(--abe-green);
}

/* Reduz um pouco o "Olá." e alinha à direita só entre 901 e 1024px (a
   faixa em que ainda usa o tamanho cheio de 5.4rem da versão desktop).
   Precisa vir ANTES da regra @media (max-width:900px) logo abaixo: como
   as duas batem no mesmo elemento com a mesma especificidade, a que
   aparece depois no arquivo vence em caso de empate de faixa —
   colocando esta primeiro, 902-1024px usa os valores daqui e ≤900px
   continua intocado (2.3rem, centralizado). */
@media (min-width: 769px) and (max-width: 1024px) {
	.about-hello-word {
		font-size: 4.6rem;
		text-align: right;
		padding-right: 16px;
		/* Mesmo degradê de 4 cores e mesmo truque de fit-content das
		   demais faixas — ver comentário equivalente em min-width:1025px
		   logo acima. */
		width: fit-content;
		justify-self: end;
		background: linear-gradient(100deg, var(--abe-teal) 0%, var(--abe-green) 50%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
		-webkit-background-clip: text;
		background-clip: text;
	}
}

@media (max-width: 900px) {
	.about-hello-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-hello-word {
		font-size: 2.3rem;
		text-align: center;
	}

	.about-hello-heading {
		font-size: 1.5rem;
		line-height: 1.4;
		text-align: center;
	}

	.about-hello-copy {
		text-align: center;
	}
}

/* Abaixo de 500px: "Estamos..." mais perto de "Olá." (24px → 8px) e sem
   o padding-right:50px herdado da regra base (pensado pro layout de 3
   colunas do desktop) — nessa faixa o texto é centralizado, então aquele
   respiro só de um lado empurrava o bloco pra fora do centro. */
@media (max-width: 500px) {
	.about-hello .container {
		padding-left: 50px;
		padding-right: 50px;
	}

	.about-hello-row {
		row-gap: 18px;
	}

	.about-hello-heading {
		padding-right: 0;
	}

	/* Duas correções pro degradê parecer "verde sólido" nesse tamanho:
	   1) sequência completa teal→verde→amarelo→laranja (igual ao "ab" do
	      logo), não só teal→amarelo — mais contraste de cor mesmo numa
	      palavra curta.
	   2) display:inline-block + width:fit-content encolhe a caixa do
	      elemento exatamente ao tamanho do texto "Olá." — sem isso, o
	      background-clip:text usa a largura total da coluna (bem mais
	      larga que a palavra), então só uma fatia estreita do degradê
	      (perto do centro, por causa do text-align:center) aparecia atrás
	      das letras, cortando fora o amarelo/laranja das pontas. */
	.about-hello-word {
		width: fit-content;
		justify-self: center;
		background: linear-gradient(100deg, var(--abe-teal) 0%, var(--abe-green) 50%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
		-webkit-background-clip: text;
		background-clip: text;
	}
}

/* Só entre 501 e 768px: duas colunas em vez de empilhado. Coluna 1
   ("Olá." + heading) alinhada à esquerda, coluna 2 (copy + "Mais")
   alinhada à direita — reaproveita os três filhos existentes de
   .about-hello-row via grid-column/grid-row, sem precisar de wrapper
   novo no HTML. Vem DEPOIS do @media (max-width:900px) acima de
   propósito, pra vencer o empate de especificidade nesse trecho. */
@media (min-width: 501px) and (max-width: 768px) {
	.about-hello-row {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	/* Centralizado no meio da tela inteira (spans as 2 colunas), não só
	   dentro da coluna 1 — por isso grid-column:1/3 em vez de 1. Mesmo
	   degradê de 4 cores e mesmo truque de width:fit-content da faixa
	   ≤500px (ver lá o motivo: sem isso, a caixa larga + texto centralizado
	   só mostra uma fatia estreita do degradê atrás das letras). */
	.about-hello-word {
		grid-column: 1 / 3;
		grid-row: 1;
		width: fit-content;
		justify-self: center;
		text-align: center;
		font-weight: 700;
		font-size: 2.6rem;
		padding-right: 0;
		margin-top: -20px;
		background: linear-gradient(100deg, var(--abe-teal) 0%, var(--abe-green) 50%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
		-webkit-background-clip: text;
		background-clip: text;
	}

	.about-hello-heading {
		grid-column: 1;
		grid-row: 2;
		text-align: right;
		padding-right: 10px;
		line-height: 1.55;
	}

	.about-hello-copy {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		padding-left: 10px;
		padding-right: 15px;
		position: relative;
		top: 2px;
	}
}

@media (max-width: 600px) {
	.about-hello {
		padding: 50px 0 56px;
	}
}

/* 10px a menos que os 50px acima, depois +30px a mais — 70px líquido,
   só até 500px. */
@media (max-width: 500px) {
	.about-hello {
		padding-top: 50px;
	}
}

/* +50px de espaçamento entre o hero-banner e a seção Sobre, igual ao
   pedido acima (>=1025px), mantendo o degrau que já existia em 600px
   (a faixa mais estreita partia de uma base menor). */
@media (min-width: 501px) and (max-width: 600px) {
	.about-hello {
		padding-top: 100px;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.about-hello {
		padding-top: 145px;
	}
}

/* Sobe a seção 30px só entre 501 e 768px (pedido específico dessa
   faixa) — subtrai 30 dos dois degraus que já existiam aí (100px até
   600px, 145px de 601 a 768px), sem mexer em 769-1024px que reusa a
   regra de 145px acima. */
@media (min-width: 501px) and (max-width: 600px) {
	.about-hello {
		padding-top: 55px;
	}
}

@media (min-width: 601px) and (max-width: 768px) {
	.about-hello {
		padding-top: 100px;
	}
}

@media (max-width: 1440px) {
	.hero-quote-wrap {
		margin-top: 50px;
	}
}

@media (min-width: 1440px) {
	.hero-quote {
		font-size: 1.2rem;
		max-width: 100%;
		white-space: nowrap;
	}

	.hero-copy {
		max-width: 100%;
		justify-self: end;
	}

	/* .hero-quote-wrap é posicionado relativo à própria .hero-copy (não à
	   seção inteira) — com right:0 (padrão, herdado) ele já acompanha a
	   borda direita da caixa do título automaticamente. */
}

/* Foto um pouco maior em telas bem largas — só acima de 1280px (a
   largura máxima do .container), onde sobra espaço de sobra na
   .hero-banner (650px de altura) pra crescer sem esbarrar no rodapé
   do banner. */
@media (min-width: 1281px) {
	.hero-photo img {
		min-height: 550px;
		max-height: 550px;
	}
}

@media (min-width: 768px) and (max-width: 1439px) {
	.hero-quote-wrap {
		margin-top: 40px;
	}

	.hero-photo {
		min-height: 0;
		overflow: hidden;
	}

	.hero-photo img {
		max-width: 100%;
		width: auto;
		height: 100%;
		max-height: 1200px;
		object-fit: contain;
		object-position: bottom left;
	}
}

@media (max-width: 768px) {
	.nav-drawer-header .site-logo-mark {
		width: 76px;
		height: 27px;
	}

	.nav-drawer .primary-menu {
		padding: 0 48px;
	}

	.nav-drawer .primary-menu a {
		font-size: 0.95rem;
	}

	.nav-drawer .primary-menu a::after {
		font-size: 1.1rem;
	}
}

@media (min-width: 501px) and (max-width: 768px) {
	.hero-banner {
		height: 450px;
	}

	/* Deixa o travessão + texto quebrar linha se passar da largura da
	   coluna, em vez de vazar pra fora (nowrap era herdado da regra
	   base). .hero-quote-wrap já delimita a largura disponível via
	   left/right, então a quebra respeita a coluna automaticamente.
	   align-items:baseline já vem da regra base (.hero-quote), vale pra
	   qualquer resolução. */
	.hero-quote {
		white-space: normal;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.hero-banner .container {
		grid-template-columns: 1fr 1fr;
	}

	.hero-copy {
		padding-right: 30px;
		justify-self: end;
	}

	.hero-quote-wrap {
		right: 30px;
	}

	.hero-quote {
		max-width: 100%;
	}

	.hero-photo img {
		min-height: 100%;
	}
}

@media (min-width: 1024px) and (max-width: 1280px) {
	.hero-copy {
		padding-right: 30px;
		justify-self: end;
	}

	.hero-quote-wrap {
		right: 30px;
	}

	.hero-quote {
		max-width: 100%;
		white-space: nowrap;
	}
}

@media (max-width: 500px) {
	.hero-banner {
		height: auto;
		padding-bottom: 0;
	}

	.hero-copy {
		justify-self: stretch;
		padding-left: 0;
		text-align: center;
		transform: none;
	}

	.hero-title {
		font-size: 2.9rem;
	}

	.hero-title span {
		display: inline;
	}

	/* No tamanho reduzido daqui, os 2px de contorno da regra base ficam
	   proporcionalmente mais grossos que no desktop — afina um pouco. */
	.hero-title-outline {
		-webkit-text-stroke: 1px #fff;
	}

	.hero-quote-wrap {
		display: none;
	}

	/* Flex em coluna: empilha .hero-copy e .hero-photo (a foto volta a
	   aparecer nessa faixa) em vez do grid de 2 colunas lado a lado, que
	   não cabe numa tela estreita. */
	.hero-banner .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		text-align: center;
	}

	.hero-copy {
		max-width: 100%;
		padding-bottom: 0;
	}

	.hero-copy .eyebrow {
		justify-content: center;
	}

	.hero-copy p {
		margin-left: auto;
		margin-right: auto;
	}

	.hero-photo {
		display: flex;
		height: auto;
		min-height: 0;
		padding-left: 0;
		justify-content: center;
	}

	.hero-photo img {
		min-height: 242px;
		max-height: 282px;
	}

	.container {
		padding: 0 20px;
	}
}

@media (max-width: 768px) {
	.hamburger {
		display: none;
	}
}

@media (max-width: 425px) {
	.site-header .container {
		flex-direction: row;
		align-items: center;
		gap: 0;
		padding-top: 28px;
	}

	.header-actions {
		width: auto;
	}

	.site-logo-header .site-logo-mark {
		width: 66px;
		height: 24px;
	}

	.hero-quote {
		width: 100%;
		max-width: 100%;
		white-space: normal;
	}
}

@media (min-width: 426px) and (max-width: 640px) {
	.site-header .container {
		flex-direction: column;
		gap: 14px;
		padding-top: 20px;
	}

	.header-actions {
		width: 100%;
		justify-content: flex-end;
	}

	.primary-menu {
		gap: 18px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.hero-banner {
		margin-top: -140px;
		padding-top: 140px;
		min-height: auto;
	}
}

@media (max-width: 767px) {
	/* Uma regra só cobrindo toda a faixa mobile (em vez de três blocos
	   fragmentados por sub-faixa) — elimina qualquer chance de lacuna ou
	   limite mal calculado entre os breakpoints. */
	.nav-drawer {
		width: 100%;
	}

	.nav-drawer-header {
		position: relative;
		padding-top: 96px;
	}

	/* position:fixed + left:50vw centraliza direto na viewport real,
	   sem depender da largura efetiva do header (flex/padding/align-self
	   podiam deixar isso impreciso). */
	.nav-drawer-header .site-logo {
		position: fixed;
		top: 96px;
		left: 50vw;
		transform: translateX(-50%);
		z-index: 201;
	}

	/* O logo saiu do fluxo (position:fixed), então o Entrar — único item
	   que sobra no flex column — sobe pro topo do padding e fica atrás
	   do logo. Empurra pra baixo o suficiente pra limpar a altura dele. */
	.nav-drawer-header .nav-drawer-login {
		margin-top: 70px;
	}
}

/* Só entre 501 e 768px: "Entrar" sai do topo do drawer (perto do logo)
   e passa a aparecer no final da lista de categorias — usa a cópia
   .nav-drawer-login-end (ver HTML em header.php), escondendo a
   original. 150px de espaço entre o logo e a primeira categoria: como
   o "Entrar" não ocupa mais espaço no header do drawer, esse respiro
   vem só do margin-top do <nav>. */
@media (min-width: 501px) and (max-width: 768px) {
	.nav-drawer-header .nav-drawer-login {
		display: none;
	}

	.nav-drawer nav {
		margin-top: 60px;
	}

	/* Fixo na parte de baixo do drawer (que ocupa 100vh), em vez de fluir
	   depois do último item do menu. */
	/* position:absolute (não fixed): o .nav-drawer já é position:fixed,
	   então ele mesmo vira o containing block do "Entrar" — left:50% fica
	   relativo à largura do drawer (que varia, 50% ou 100% conforme a
	   sub-faixa), em vez do viewport inteiro. Com fixed, o botão
	   centralizava na tela toda e saía do drawer quando ele era mais
	   estreito que 100%. */
	.nav-drawer-login-end {
		display: flex;
		position: absolute;
		left: 50%;
		bottom: 40px;
		transform: translateX(-50%);
		z-index: 10;
	}
}

/* Entre 501 e 767px o logo é position:fixed (ver @media max-width:767px
   acima), então ele não conta na altura do fluxo de .nav-drawer-header
   — o margin-top de 60px lá em cima mediria a partir de um ponto 27px
   ACIMA do rodapé visual do logo (a altura do logo nessa faixa,
   76×27px). Compensa aqui só nessa sub-faixa pra o espaço visual bater
   60px de verdade; em 768px o logo já está no fluxo normal, então a
   regra de cima já é exata sem precisar desse ajuste. */
@media (min-width: 501px) and (max-width: 767px) {
	.nav-drawer nav {
		margin-top: 87px;
	}
}

@media (max-width: 321px) {
	.hero-title {
		font-size: 2.5rem;
	}

	.about-hello-word {
		font-size: 2rem;
	}

	.about-hello-heading {
		font-size: 1.3rem;
	}
}

/* Barra de navegação rápida — fixa no rodapé, só no mobile */
.mobile-tabbar {
	display: none;
}

/* Cluster flutuante (rótulo + navegação) da sessão atual — só no
   mobile (ver @media max-width:500px abaixo, que troca pra
   display:flex). */
.section-nav {
	display: none;
}

/* Cluster flutuante da sessão atual — rótulo + botões de navegação
   (sessão anterior/próxima) — some fora da área de conteúdo, colado na
   borda direita do navegador. Visibilidade controlada via .is-visible
   (ver main.js): aparece só enquanto o topo da sessão está cruzando o
   topo da viewport, some ao sair dessa faixa. Faixa própria (768px, não
   500px): também vale pra tablet (501-768px), que perdeu o hambúrguer/
   drawer e usa isso como navegação entre sessões. */
@media (max-width: 768px) {
	.section-nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		position: fixed;
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
		z-index: 60;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.section-nav.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	/* Só na sessão Início: cluster sobe 50px em relação ao centro
	   vertical padrão das outras sessões. */
	.section-nav[data-section-target="section-inicio"] {
		transform: translateY(calc(-50% - 22px));
	}

	.section-badge {
		/* rotate(180deg) inverte o sentido de leitura de vertical-rl (que
		   por padrão lê de cima pra baixo) pra baixo-pra-cima. */
		transform: rotate(180deg);
		writing-mode: vertical-rl;
		text-orientation: sideways;
		background: #e8e8e6;
		color: var(--abe-ink);
		font-family: var(--abe-font-heading);
		font-weight: 600;
		font-size: 0.8rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		padding: 16px 2px;
		border-radius: 4px;
	}

	.section-nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		border: none;
		border-radius: 4px;
		background: #e8e8e6;
		color: var(--abe-ink);
		cursor: pointer;
	}

	.section-nav-btn svg {
		width: 14px;
		height: 14px;
	}
}

/* Só em 501-768px (abaixo de 500px o JS assume o posicionamento via
   top/px — ver main.js): cluster da Sobre desce 30px em relação ao
   centro vertical padrão. */
@media (min-width: 501px) and (max-width: 768px) {
	.section-nav[data-section-target="section-sobre"] {
		transform: translateY(calc(-50% + 30px));
	}
}

/* Overrides do header — no fim do arquivo de propósito, pra garantir
   que vençam as regras-base de .hamburger, .header-whatsapp e
   .apps-badge-desktop (mesma especificidade, ordem de código decide).
   Sem media query: .apps-badge-desktop vira inline no header, e o
   .header-whatsapp fica visível, em qualquer largura — mesmo
   tratamento em todo o site agora, sem versão flutuante separada pro
   desktop. */
.apps-badge-desktop {
	position: relative;
	top: auto;
	right: auto;
	box-shadow: none;
	padding: 8px 12px;
	font-size: 0.62rem;
	border-radius: 8px;
}

/* Botão vira só "APPS" em qualquer largura — sem a palavra "Nossos". */
.apps-badge-text-nossos {
	display: none;
}

/* De 501 a 768px o menu inline não coube bem, e não tem mais
   hambúrguer/drawer nessa faixa (ver abaixo) — navegação entre sessões
   passa a ser só o cluster flutuante (.section-nav, mesma
   funcionalidade do mobile). Acima de 768px continua o menu embutido
   no header. */
@media (min-width: 501px) and (max-width: 768px) {
	.header-nav {
		display: none;
	}

	/* Sem hambúrguer nessa faixa — o drawer perde o único gatilho
	   visível aqui (fica só acessível em min-width:769px pra baixo do
	   hambúrguer, ou não é mais alcançável nessa faixa; navegação vira
	   o .section-nav flutuante). */
	.hamburger {
		display: none;
	}

	/* WhatsApp volta a aparecer aqui (a versão flutuante com texto
	   giratório não existe mais nessa faixa — ver .whatsapp-wrap
	   abaixo), reaproveitando o mesmo botão+label usado no mobile. */
	.header-whatsapp {
		display: inline-flex;
	}
}

@media (min-width: 769px) {
	.header-nav {
		display: flex;
	}

	.hamburger {
		display: none;
	}
}

/* Entre 501 e 1024px a barra do header é mais apertada que no desktop —
   compacta o menu/badge o suficiente pra caber numa linha só (testado
   contra a largura real, não é um chute). Força row aqui porque uma
   regra mais antiga (426–640px) ainda empilha o header em coluna, o
   que não faz sentido pro menu inline novo. */
@media (max-width: 1024px) {
	.site-header .container {
		flex-direction: row;
	}

	.header-actions {
		gap: 40px;
	}

	.header-nav-menu {
		gap: 36px;
	}

	.header-nav-menu a {
		font-size: 0.92rem;
	}
}

@media (min-width: 501px) {
	.whatsapp-wrap {
		display: block;
		position: fixed;
		right: calc(max(0px, calc((100vw - 1280px) / 2)) + 30px);
		bottom: 32px;
		width: 60px;
		height: 60px;
		z-index: 45;
	}

	/* Fundo branco atrás do botão, cobrindo até onde o texto girando
	   alcança (raio do texto: 39px + a própria altura da fonte), pra
	   legenda ficar legível não importa o que houver atrás dela. Pseudo
	   ::before pinta antes de tudo (fica atrás); o botão .whatsapp-float,
	   mais tarde no DOM, some por cima naturalmente. */
	.whatsapp-wrap::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 96px;
		height: 96px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: #fff;
		pointer-events: none;
	}

	.whatsapp-float {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #25d366;
		color: #fff;
		box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
		transition: background 0.35s ease-in-out;
	}

	/* Verde oficial do WhatsApp como cor principal; hover num verde mais
	   escuro da mesma família — deliberadamente fora da paleta do site,
	   pra reconhecer a marca. */
	.whatsapp-float:hover {
		background: #1da851;
	}

	.whatsapp-float svg {
		width: 30px;
		height: 30px;
	}

	/* Legenda circulando o botão — uma metade em cima, outra embaixo,
	   raio maior que o círculo do botão (30px) pra sobrar espaço entre os
	   dois. O arco de baixo percorre o caminho na direção oposta (direita
	   pra esquerda) pra que o texto fique voltado pra fora do círculo,
	   como num selo/moeda — estilo clássico de badge circular. */
	.whatsapp-orbit {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 120px;
		height: 120px;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	/* letter/word-spacing reduzidos de propósito: com os valores
	   anteriores (0.12em/0.3em) o texto renderizado (128.5px, medido via
	   getComputedTextLength) ficava mais LARGO que o próprio arco
	   (122.5px, getTotalLength) — o excesso cortava a pontinha do "•"
	   no final da frase, já que texto além do comprimento do path
	   simplesmente não é desenhado. */
	.whatsapp-orbit text {
		font-family: var(--abe-font-heading);
		font-weight: 600;
		font-size: 8.5px;
		letter-spacing: 0.08em;
		word-spacing: 0.15em;
		fill: var(--abe-ink);
	}

	/* Gira o anel de texto continuamente ao redor do próprio centro do
	   botão (60,60 no viewBox). transform-box:view-box permite usar essa
	   coordenada do SVG como transform-origin em vez do bounding box do
	   texto (que muda de tamanho conforme o conteúdo). */
	.whatsapp-orbit-spin {
		transform-box: view-box;
		transform-origin: 60px 60px;
		animation: abe-orbit-spin 16s linear infinite;
	}
}

/* Só nessa faixa (769–1024px) o botão do WhatsApp fica mais afastado do
   canto do que o padrão (30px, regra acima) — pedido específico pra essa
   resolução, sem alterar o desktop mais largo. Precisa vir DEPOIS da
   regra base pra vencer no empate de especificidade. */
@media (min-width: 769px) and (max-width: 1024px) {
	.whatsapp-wrap {
		right: calc(max(0px, calc((100vw - 1280px) / 2)) + 70px);
	}
}

@keyframes abe-orbit-spin {
	to {
		transform: rotate(360deg);
	}
}

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

	.scroll-down-icon-arrow {
		animation: none;
	}
}

/* Removido em qualquer largura (substituído pelo botão+label inline no
   header — ver .header-whatsapp — e, abaixo de 769px, pela navegação
   por sessão flutuante). Sem media query de propósito: precisa vencer
   as regras de .whatsapp-wrap acima (inclusive as de 769px+), que
   vêm antes no arquivo. */
.whatsapp-wrap {
	display: none;
}

@media (max-width: 768px) {
	/* Vence o gap:40px da regra 501-1024px acima (vem depois no
	   arquivo) — nessa faixa mais estreita, header-actions tem só o
	   WhatsApp + Nossos Apps (sem menu inline pra caber junto). */
	.header-actions {
		gap: 16px;
	}
}

/* Acima de 500px, top/bottom não entram mais aqui — o posicionamento
   vertical (nasce 30px abaixo do hero-banner, sobe até parar no meio
   da tela conforme rola) é todo calculado via JS (main.js),
   acompanhando o scroll em tempo real via requestAnimationFrame — não
   dá pra fazer só com CSS porque a posição muda continuamente com o
   quanto a página já rolou, não em dois estados fixos. */

/* Só 769px+: sessão Sobre sobe 80px (145px -> 65px de padding-top) —
   vence tanto a regra de 601-1024px quanto a de 1025px+ (ambas 145px),
   por vir depois das duas no arquivo. */
@media (min-width: 769px) {
	.about-hello {
		padding-top: 105px;
	}

	/* Vence o gap:40px (601-1024px) e o gap:66px base (1025px+) — mesmo
	   espaçamento do menu/WhatsApp/Apps usado abaixo de 769px. */
	.header-actions {
		gap: 16px;
	}

	/* +16px só entre o menu e o WhatsApp (32px no total) — o gap acima
	   é uniforme entre todos os itens de .header-actions, então pra
	   afastar só esse par específico (sem mexer no WhatsApp-Apps) usa-se
	   margin no próprio WhatsApp. */
	.header-whatsapp {
		margin-left: 16px;
	}
}

/* Modal "Confira nossos APPs recentes", aberto pelo botão Apps do
   header (ver data-apps-modal-toggle em main.js). */
.apps-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	/* Precisa vencer .site-header (z-index:500) — maior z-index do resto
	   do site, ainda abaixo de .orientation-lock (9999), que deve
	   sempre vencer tudo. */
	z-index: 900;
}

.apps-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.apps-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	width: 500px;
	height: 600px;
	/* Borda degradê de 1px, mesma cor/ângulo do "Olá." — duas camadas de
	   background: a de cima (branco) preenche o miolo (padding-box), a
	   de baixo (degradê) só aparece na faixa de 1px do border-box. */
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(100deg, var(--abe-teal) 0%, var(--abe-green) 50%, var(--abe-yellow) 88%, var(--abe-orange) 100%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border-radius: 16px;
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
	z-index: 901;
}

.apps-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.apps-modal-close {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 22px;
	height: 22px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--abe-green);
	z-index: 2;
}

.apps-modal-close::before,
.apps-modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--abe-green);
}

.apps-modal-close::before {
	transform: rotate(45deg);
}

.apps-modal-close::after {
	transform: rotate(-45deg);
}

/* padding-top folgado o bastante pra sobrar uma linha inteira de
   respiro abaixo do X (que fica em top:22px, 22px de altura). */
.apps-modal-title {
	margin: 0;
	padding: 64px 32px 20px;
	text-align: center;
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--abe-ink);
}

.apps-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 0 32px 32px;
	color: var(--abe-ink);
	font-family: var(--abe-font-body);
}

/* Card de cada app — thumbnail | título+descrição | seta, cartão
   inteiro clicável. */
.apps-card {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	/* start (não center): thumbnail e título alinhados pelo topo. A seta
	   recebe align-self próprio pra continuar centralizada na altura do
	   card, já que ela não tem essa exigência. */
	align-items: start;
	gap: 16px;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.apps-card:hover {
	background: #f6f6f4;
	border-color: rgba(0, 0, 0, 0.16);
}

/* Verde-esmeralda da paleta do app abfinancas (referência enviada pelo
   cliente) — diferente do degradê de marca do AB Estúdio, usado só
   nessa thumbnail específica. */
.apps-card-thumb {
	width: 72px;
	height: 72px;
	border-radius: 12px;
	background: linear-gradient(180deg, #1d9c7c 0%, #4e9765 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.apps-card-thumb-logo {
	width: 60%;
	height: auto;
}

.apps-card-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.apps-card-title {
	font-family: var(--abe-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--abe-ink);
}

.apps-card-desc {
	font-family: var(--abe-font-body);
	font-size: 0.85rem;
	line-height: 1.4;
	color: rgba(34, 48, 28, 0.7);
}

.apps-card-arrow {
	align-self: center;
	width: 20px;
	height: 20px;
	color: var(--abe-green);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.apps-card:hover .apps-card-arrow {
	transform: translateX(3px);
}

@media (min-width: 501px) and (max-width: 768px) {
	.apps-modal {
		width: 420px;
		height: 500px;
	}
}

@media (max-width: 500px) {
	.apps-modal {
		top: 15px;
		left: 15px;
		right: 15px;
		bottom: 15px;
		width: auto;
		height: auto;
		transform: none;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.apps-modal.is-open {
		transform: none;
		transition: opacity 0.3s ease;
	}
}