/* Estilos proprios do SITEPHP - complementam o CSS espelhado do WordPress
   (public/vendor/, ver layouts/header.php) usando a mesma paleta do tema
   original (--heading-color:#0F0D1D, --paragraph-color:#585858, accent
   azul #246BFD). Aqui NAO se reaproveita as classes de container do
   Elementor (elementor-element / e-con / e-flex) porque elas dependem de
   CSS custom properties (--display, --gap etc.) definidas só para os IDs
   originais em post-*.css - sem o ID exato, `display:var(--display)` cai
   pro valor inicial (inline) e quebra o layout. Em vez disso, cada secao
   usa uma classe propria com CSS explicito (flex/grid), e só reaproveita
   classes REAIS do tema quando sao componentes autocontidos (nao dependem
   do sistema de containers) - ex: .new-service-card-items, .theme-btn,
   .elementor-counter, .accordion (Bootstrap), .news-image-items. */

/* ==========================================================================
   Overrides globais (fonte + cor de destaque)
   ========================================================================== */

/* Cor de destaque do tema (laranja original do Konstic, #F55B1F, definida
   em vendor/themes/konstic/assets/css/main.css) trocada para azul
   #0085C7. --theme e uma CSS custom property lida por ~180 regras em
   main.css/wp-fix.css (botoes, bordas, hovers, icones) - sobrescrever só
   essa variavel no :root (carregado por ultimo, depois do main.css) já
   propaga a cor nova pra tudo que usa var(--theme), sem precisar caçar
   cada regra uma por uma. */
:root {
	--theme: #0085C7;
	--theme2: #0085C7;
}

/* Fonte Poppins em todo o site. O tema original usa "DM Sans" fixo
   (string literal, nao variavel) espalhado em muitas regras individuais
   de main.css - por isso precisa de !important aqui pra vencer a
   especificidade dessas regras. Os icones (Font Awesome, sempre em
   `<i class="fa-...">` neste projeto) sao excluidos via :not(i), porque
   eles dependem da propria font-family da fonte de icones pra desenhar o
   glifo certo - forçar Poppins neles quebraria os icones. */
body, body *:not(i) {
	font-family: 'Poppins', sans-serif !important;
}

.container-narrow {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* position+z-index proprios pro header: sem isso ele e um elemento
   "static" comum, e o dropdown do menu (position:absolute;z-index:20 -
   ver .site-header__nav .sub-menu) acaba competindo diretamente com
   qualquer coisa posicionada logo abaixo (ex: o hero da Home tem
   elementos com z-index proprio) no MESMO contexto de empilhamento em
   vez de ficar garantidamente por cima. Com isso o header cria seu
   proprio contexto de empilhamento e fica sempre acima do conteudo da
   pagina. */
.site-header {
	position: relative;
	z-index: 100;
}

.site-header__topbar {
	background: #fff;
	border-bottom: 1px solid #eef0f3;
}

.site-header__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 20px;
	flex-wrap: wrap;
}

.site-header__contact {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.site-header__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #585858;
	text-decoration: none;
	font-size: 13px;
}

.site-header__contact a:hover {
	color: #246BFD;
}

.site-header__contact svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.site-header__lang {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-header__lang a {
	display: flex;
	opacity: 0.45;
	transition: opacity 0.2s;
	line-height: 0;
}

.site-header__lang a:hover,
.site-header__lang a.is-active {
	opacity: 1;
}

.site-header__lang svg {
	width: 21px;
	height: 15px;
	border-radius: 2px;
}

.site-header__main {
	background: #fff;
}

.site-header__main-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 20px;
}

.site-header__logo {
	display: block;
	flex: 0 0 auto;
}

.site-header__logo img {
	display: block;
	width: 200px;
	height: auto;
}

.site-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.site-header__nav .elementor-nav-menu {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.site-header__nav .menu-item {
	position: relative;
}

.site-header__nav .elementor-item {
	display: inline-flex;
	align-items: center;
	color: #0F0D1D;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

.site-header__nav-caret {
	margin-left: 6px;
	font-size: 11px;
}

.site-header__nav .elementor-item:hover,
.site-header__nav .elementor-item-active {
	color: #246BFD;
}

.site-header__nav .sub-menu {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--theme);
	min-width: 190px;
	box-shadow: none;
	border-radius: 0;
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
	z-index: 20;
}

.site-header__nav .menu-item-has-children:hover .sub-menu {
	visibility: visible;
	pointer-events: auto;
}

.site-header__nav .elementor-sub-item {
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.site-header__nav .elementor-sub-item:hover {
	background: #0D1B33;
	color: #fff;
}

.site-header__cta {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 16px 32px;
	font-size: 14px;
}

.site-header__toggle {
	display: none;
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
}

.site-header__toggle svg {
	width: 26px;
	height: 26px;
	fill: #0F0D1D;
}

@media (max-width: 991px) {
	.site-header__topbar-inner {
		justify-content: center;
	}
	.site-header__contact {
		display: none;
	}
	.site-header__nav {
		display: none;
		flex-basis: 100%;
		order: 3;
	}
	.site-header__nav.is-open {
		display: block;
	}
	.site-header__nav .elementor-nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 16px 0;
	}
	.site-header__nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		display: none;
		padding-left: 16px;
	}
	.site-header__nav .menu-item-has-children:hover .sub-menu {
		display: block;
	}
	.site-header__cta {
		display: none;
	}
	.site-header__toggle {
		display: block;
	}
}

.section-eyebrow {
	display: block;
	color: #246BFD;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 8px;
}

.section-title {
	color: #0F0D1D;
	font-weight: 700;
	font-size: 34px;
	margin: 0 0 40px;
}

/* ---------- Projetos (listagem /projetos/ e grid reaproveitada) ---------- */

.project-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 36px;
}

.project-filters__btn {
	background: #F2F5FA;
	border: 1px solid #E5E8EE;
	color: #0F0D1D;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.project-filters__btn:hover {
	border-color: var(--theme);
	color: var(--theme);
}

.project-filters__btn.is-active {
	background: var(--theme);
	border-color: var(--theme);
	color: #fff;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 60px 0 100px;
}

@media (max-width: 992px) {
	.project-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.project-grid { grid-template-columns: 1fr; }
}

/* Cards da listagem /projetos/ reaproveitam .project-card-item (mesmo
   componente do carrossel "Projetos Realizados" da Home) - ver secao
   "Projetos" mais abaixo neste arquivo. */

/* ---------- Detalhe de projeto / pagina generica ---------- */

.project-detail {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px 100px;
}

.project-detail__back {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--theme);
	font-weight: 600;
	text-decoration: none;
}

.project-detail__back:hover {
	text-decoration: underline;
}

.project-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.project-detail__badge {
	background: #246BFD;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 999px;
}

.project-detail__badge--outline {
	background: #F2F5FA;
	color: #0F0D1D;
}

.project-detail__hero {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	margin-bottom: 36px;
}

.project-detail__content {
	color: #585858;
	font-size: 16px;
	line-height: 1.8;
}

.project-detail__content p {
	margin: 0 0 16px;
}

.project-detail__content ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.project-detail__content li {
	margin-bottom: 8px;
}

.project-detail__content h2,
.project-detail__content h3 {
	color: #0F0D1D;
	font-size: 19px;
	font-weight: 800;
	margin: 32px 0 14px;
}

/* Os "sub-titulos" do conteudo migrado nao sao headings de verdade -
   sao paragrafos cujo unico conteudo e um <b> (`<p><b>O DESAFIO</b></p>`).
   `:has()` deixa estiliza-los como heading sem precisar reescrever o
   HTML migrado projeto por projeto. */
.project-detail__content p:has(> b:only-child):not(:has(> b > *)) {
	color: #0F0D1D;
	font-size: 17px;
	font-weight: 800;
	margin: 32px 0 12px;
}

/* Paragrafos "Rotulo: valor" (marcados em PHP, ver cleanContent()) tem
   a MESMA estrutura HTML de um sub-titulo (`<p><b>...</b></p>`), entao
   precisam de uma regra depois pra voltar a ser texto normal - so o
   `<b>` do rotulo continua em negrito. */
.project-detail__content p.project-detail__meta-line {
	/* !important necessario aqui: a regra de heading acima (`:has()`)
	   tambem bate estruturalmente nesse mesmo paragrafo (mesmo formato
	   HTML - so o texto depois do <b> diferencia um do outro, e isso o
	   CSS nao enxerga) e tem especificidade maior (3 pseudo-classes vs
	   2 classes aqui) - sem isso ela venceria mesmo vindo depois. */
	color: #585858 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	margin: 0 0 12px !important;
}

.project-detail__content p.project-detail__meta-line b {
	color: #0F0D1D;
	font-weight: 700;
}

.project-detail__content a {
	color: var(--theme);
}

.project-detail__gallery-title {
	color: #0F0D1D;
	font-size: 22px;
	font-weight: 800;
	margin: 48px 0 20px;
}

.project-gallery-slider {
	position: relative;
}

.project-gallery-swiper {
	overflow: hidden;
}

.project-gallery-item {
	display: block;
	height: 220px;
	cursor: pointer;
}

.project-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.project-gallery-swiper__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.15);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.project-gallery-swiper__nav svg {
	width: 18px;
	height: 18px;
	stroke: #0F0D1D;
}

.project-gallery-swiper__nav:hover {
	background: var(--theme);
	border-color: var(--theme);
}

.project-gallery-swiper__nav:hover svg {
	stroke: #fff;
}

.project-gallery-swiper__nav--prev {
	left: -22px;
}

.project-gallery-swiper__nav--next {
	right: -22px;
}

@media (max-width: 640px) {
	.project-gallery-swiper__nav { display: none; }
}

.project-cta {
	background: #0F0D1D;
	color: #fff;
	padding: 60px 20px;
	text-align: center;
}

.project-cta h2 {
	color: #fff;
	max-width: 700px;
	margin: 0 auto 16px;
	font-size: 26px;
}

.project-cta p {
	max-width: 700px;
	margin: 0 auto 24px;
	opacity: 0.85;
}

/* ---------- Detalhe de servico (/nossos-servicos/{slug}/) ---------- */

.service-detail {
	max-width: 900px;
	margin: 0 auto;
	padding: 60px 20px 100px;
}

.service-detail__back {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--theme);
	font-weight: 600;
	text-decoration: none;
}

.service-detail__back:hover {
	text-decoration: underline;
}

.service-detail__hero {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	margin-bottom: 36px;
}

.service-detail__content {
	color: #585858;
	font-size: 16px;
	line-height: 1.8;
}

.service-detail__content p {
	margin: 0 0 16px;
}

.service-detail__content em {
	color: #0F0D1D;
}

.service-detail__content ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.service-detail__content li {
	margin-bottom: 8px;
}

.service-detail__content li p {
	margin: 0;
}

/* Sub-titulos ("Capacidades:", "Materiais:" etc.) sao marcados em PHP
   (Service::cleanContent()) em vez de heuristica CSS via :has() - ver
   comentario no model sobre por que o conteudo de servicos nao tem a
   mesma ambiguidade "rotulo: valor" do conteudo de projetos. */
.service-detail__content p.service-detail__heading {
	color: #0F0D1D;
	font-size: 17px;
	font-weight: 800;
	margin: 32px 0 12px;
}

.service-detail__content a {
	color: var(--theme);
}

.placeholder-page, .not-found-page {
	max-width: 700px;
	margin: 0 auto;
	padding: 120px 20px;
	text-align: center;
}

.placeholder-page h1, .not-found-page h1 {
	color: #0F0D1D;
	font-size: 30px;
	margin-bottom: 16px;
}

.placeholder-page p, .not-found-page p {
	color: #585858;
	margin-bottom: 24px;
}

.btn-primary {
	display: inline-block;
	background: #246BFD;
	color: #fff;
	padding: 12px 28px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}

/* ==========================================================================
   Home
   ========================================================================== */

.hero-section {
	position: relative;
	overflow: hidden;
}

.hero-slider {
	position: relative;
	height: 650px;
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease, visibility 0.9s ease;
	z-index: 1;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.hero-slide__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10,15,30,0.92) 0%, rgba(10,15,30,0.6) 65%, rgba(10,15,30,0.3) 100%);
}

/* .container-narrow ja da max-width:1200px + margin:0 auto (centraliza a
   coluna). Aqui o wrapper fica position:absolute;inset:0 (nao mais flex
   item de .hero-slide) pra evitar a ambiguidade de "auto margin dentro de
   flex item" - assim o margin:auto centraliza a coluna de 1200px de
   forma direta e previsivel, e .hero-slide__inner (o texto) fica
   encostado na borda ESQUERDA dessa coluna via justify-content padrao do
   flex (flex-start), sem nenhum margin:auto competindo. */
.hero-slide__container {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
}

.hero-slide__inner {
	max-width: 640px;
	color: #fff;
}

.hero-slide__eyebrow,
.hero-slide__title,
.hero-slide__text,
.hero-slide__checklist,
.hero-slide__actions {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero-slide.is-active .hero-slide__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.hero-slide.is-active .hero-slide__title { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.hero-slide.is-active .hero-slide__text { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.hero-slide.is-active .hero-slide__checklist { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.hero-slide.is-active .hero-slide__actions { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

.hero-slide__eyebrow {
	display: block;
	color: #4d9fff;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 14px;
}

.hero-slide__title {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.18;
	margin: 0 0 20px;
	color: #fff;
}

.hero-slide__text {
	font-size: 17px;
	line-height: 1.6;
	opacity: 0.9;
	margin-bottom: 36px;
	max-width: 520px;
}

.hero-slide__checklist {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	font-size: 17px;
	line-height: 1.7;
}

.hero-slide__checklist li {
	position: relative;
	padding-left: 30px;
}

.hero-slide__checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #4d9fff;
	font-weight: 700;
}

.hero-slide__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.hero-slide__actions .theme-btn {
	padding: 14px 26px;
	font-size: 13px;
}

.hero-section .theme-btn.bg-transparent {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.5);
	color: #fff;
}

/* Barra de progresso do slide atual (autoplay), controlada via JS
   (assets/js/site.js) reiniciando a transicao de width a cada troca. */
.hero-slider__progress {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: rgba(255,255,255,0.15);
	z-index: 3;
}

.hero-slider__progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: rgba(255,255,255,0.75);
}

.hero-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.06);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.hero-slider__nav:hover {
	background: #0085C7;
	border-color: #0085C7;
}

.hero-slider__nav svg {
	width: 20px;
	height: 20px;
}

.hero-slider__nav--prev { left: 24px; }
.hero-slider__nav--next { right: 24px; }

@media (max-width: 767px) {
	.hero-slider__nav { display: none; }
}

/* z-index maior que .hero-slide.is-active (2) e .hero-slider__progress
   (3) - sem isso essas decorações ficam escondidas atrás do slide ativo
   (era exatamente o bug: "overlay ficando pra trás de tudo"). */
.hero-section__gear {
	position: absolute;
	right: -40px;
	bottom: -40px;
	width: 420px;
	max-width: 45vw;
	opacity: 0.1;
	z-index: 5;
	pointer-events: none;
}

.hero-section__dots {
	position: absolute;
	left: 30px;
	bottom: 20px;
	width: 160px;
	height: auto;
	opacity: 0.8;
	z-index: 5;
	pointer-events: none;
}

@media (max-width: 767px) {
	.hero-section__gear { display: none; }
}

/* ---------- Sobre nos ---------- */

.about-section {
	padding: 100px 0;
}

.about-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: center;
}

@media (max-width: 860px) {
	.about-section__grid { grid-template-columns: 1fr; gap: 40px; }
}

.about-image-col {
	position: relative;
	width: 100%;
	padding-bottom: 60px;
}

.about-image {
	width: 100%;
	display: block;
	clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%);
}

/* Padrao de pontos (clip-engport.webp) - fica ABAIXO da foto, nao por
   cima (era o bug: sobrepondo o canto superior direito da imagem). */
.about-image-shape {
	position: absolute;
	left: 10px;
	bottom: 0;
	width: 140px;
	z-index: 0;
}

.about-counter {
	position: absolute;
	right: -20px;
	bottom: 40px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #12294D;
	color: #fff;
	padding: 20px 26px;
	box-shadow: 0 15px 35px rgba(15,20,40,0.35);
}

.about-counter__prefix {
	font-size: 30px;
	font-weight: 700;
}

.about-counter__number {
	display: inline-flex;
	align-items: center;
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
}

.about-counter__label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

.about-content-col p {
	color: #585858;
	line-height: 1.7;
	margin-bottom: 14px;
}

/* ---------- Servicos ---------- */

.services-section {
	background: url('../images/hero-bg-2.webp') center/cover no-repeat;
	padding: 90px 0;
	overflow: hidden;
}

.services-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 40px;
}

.projects-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	margin-bottom: 40px;
}

/* Corrige bug do CSS do tema: .array-button .array-next vinha com
   background-color:var(--theme2) fixo (bola azul solida), diferente do
   .array-prev (transparente/bordado) - normaliza os dois pra ficarem
   iguais, só destacando em azul no hover. */
.array-button .array-next {
	background-color: transparent;
	color: inherit;
	border: 1px solid rgba(0,0,0,0.15);
}

.services-nav .array-next {
	color: #fff;
	border-color: rgba(255,255,255,0.25);
}

.array-button .array-next:hover {
	background-color: #246BFD;
	color: #fff;
	border-color: #246BFD;
}

.array-button {
	display: flex;
	gap: 10px;
}

.array-button button {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.15);
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
}

.array-button button:hover {
	background: #246BFD;
	color: #fff;
	border-color: #246BFD;
}

.services-nav button {
	border-color: rgba(255,255,255,0.25);
	color: #fff;
}

.service-slider-2 {
	overflow: hidden;
}

.service-slider-2 .swiper-slide {
	height: auto;
}

.service-slider-2 .new-service-card-items {
	background: #fff;
	border-radius: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.new-service-card-items .content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.service-image {
	width: 100%;
	height: 250px;
	flex: 0 0 auto;
	overflow: hidden;
}

.service-image img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
}

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

.projects-section {
	position: relative;
	overflow: hidden;
	padding: 90px 0;
}

.projects-section__shape {
	position: absolute;
	right: 40px;
	top: 0;
	width: 100px;
	opacity: 0.9;
	z-index: 5;
	pointer-events: none;
}

.projects-slider {
	overflow: hidden;
}

.project-card-item {
	position: relative;
	display: block;
	height: 340px;
	border-radius: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: #fff;
}

.project-card-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,13,29,0) 35%, rgba(15,13,29,0.9) 100%);
}

.project-card-item__client {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
	background: #246BFD;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.project-card-item__title {
	position: absolute;
	z-index: 1;
	bottom: 20px;
	left: 20px;
	right: 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

/* ---------- CTA "Porque o Grupo Engport" ---------- */

.cta-section-wrap {
	padding: 40px 0;
}

.cta-section {
	background-size: cover;
	background-position: center;
	background-color: #123a86;
	border-radius: 0;
	color: #fff;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 20px;
	padding: 60px;
}

@media (max-width: 860px) {
	.cta-section { grid-template-columns: 1fr; padding: 40px 24px; }
}

.cta-section__content h2 {
	color: #fff;
	font-size: 28px;
	margin: 0 0 16px;
}

.cta-section__content p {
	opacity: 0.9;
	margin-bottom: 24px;
}

.cta-section__image img {
	width: 100%;
	max-width: 420px;
	display: block;
	margin: 0 auto;
}

/* ---------- Diferenciais ---------- */

.diferenciais-section {
	padding: 90px 0;
}

.diferenciais-section__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 60px;
	align-items: start;
}

@media (max-width: 860px) {
	.diferenciais-section__grid { grid-template-columns: 1fr; gap: 40px; }
}

.diferenciais-images {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.diferenciais-images__1 {
	width: 55%;
	border-radius: 12px;
}

.diferenciais-images__2 {
	width: 40%;
	margin-top: 60px;
	border-radius: 12px;
}

.diferenciais-images__badge {
	position: absolute;
	left: 45%;
	top: 40%;
	width: 70px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.diferencial-item {
	margin-bottom: 24px;
	padding-left: 20px;
	border-left: 3px solid #246BFD;
}

.diferencial-item h2 {
	font-size: 18px;
	margin: 0 0 6px;
	color: #0F0D1D;
}

.diferencial-item p {
	color: #585858;
	margin: 0;
}

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

.faq-section {
	background: #F7F8FA;
	padding: 90px 0;
}

.faq-heading {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 40px;
}

.faq-heading p {
	color: #585858;
}

/* Conteudo interno de cada resposta ($faqs[]['a']) e HTML puro (<p>,
   <strong>, <ul><li>) vindo do array PHP - o Bootstrap (accordion-body)
   so estiliza o container, nao o texto por dentro, entao sem isso os
   paragrafos/listas saiam tudo colado, sem espacamento e com o marcador
   padrao do navegador (disc) em vez do ponto azul do design. */
.accordion-body p {
	color: #585858;
	line-height: 1.7;
	margin: 0 0 16px;
}

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

.accordion-body p strong {
	display: inline-block;
	color: #0F0D1D;
	font-weight: 700;
	margin: 4px 0 10px;
}

.accordion-body ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.accordion-body ul:last-child {
	margin-bottom: 0;
}

.accordion-body li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
	color: #585858;
	line-height: 1.6;
}

.accordion-body li:last-child {
	margin-bottom: 0;
}

.accordion-body li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--theme);
}

/* ---------- Blog ---------- */

.blog-section {
	padding: 90px 0;
}

.blog-section .section-eyebrow,
.blog-section .section-title {
	text-align: center;
}

.blog-section .row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 -12px;
}

.blog-section .col-lg-6 {
	flex: 1 1 calc(50% - 24px);
	min-width: 300px;
	padding: 0 12px;
}

/* ---------- Clientes ---------- */

.clients-section {
	padding: 70px 0 100px;
}

.clients-section .section-eyebrow,
.clients-section .section-title {
	text-align: center;
}

.clients-section .swiper-wrapper {
	align-items: center;
}

.client-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.client-logo img {
	max-width: 100%;
	max-height: 60px;
	filter: grayscale(1);
	opacity: 0.7;
	transition: opacity 0.2s, filter 0.2s;
}

.client-logo img:hover {
	filter: none;
	opacity: 1;
}

/* ==========================================================================
   Footer - o post-2278.css (espelhado) da o layout dos containers externos
   (que mantiveram o ID hash original em layouts/footer.php), mas os
   widgets internos (logo, headings, listas) foram simplificados e perdem
   o dimensionamento fino que so existia via ID hash - complementado aqui.
   ========================================================================== */

.footer-style-01 {
	background:
		linear-gradient(rgba(6,8,16,0.93), rgba(6,8,16,0.93)),
		url('../images/bg-footer.webp') center/cover no-repeat;
	color: rgba(255,255,255,0.65);
	padding: 70px 20px 24px;
}

/* Sem hash ID original, os containers Elementor internos caem em
   display:inline (ver nota no topo do arquivo) - forca bloco por padrao
   e da grid/flex explicito só onde precisa de layout lado a lado. */
.footer-style-01 .e-con.e-child:not(.copyright-wrap) {
	display: block;
}

.footer-style-01 .footer-columns {
	display: grid !important;
	grid-template-columns: 1.3fr 1fr 1.3fr 1.3fr;
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto 32px;
	padding: 0 20px;
}

@media (max-width: 992px) {
	.footer-style-01 .footer-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.footer-style-01 .footer-columns { grid-template-columns: 1fr; }
}

.footer-style-01 .e-con.e-parent > .e-con-inner,
.footer-style-01 > .elementor-element > .e-con-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.footer-style-01 .elementor-widget-image img {
	display: block;
	max-width: 190px;
	height: auto;
	margin: 0 auto 20px 0;
}

.footer-style-01 .footer-text {
	font-size: 14px;
	line-height: 1.7;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	margin: 0 0 20px;
}

.footer-style-01 .footer-heading {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 22px;
}

.footer-style-01 .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-style-01 .elementor-icon-list-item {
	margin-bottom: 8px;
}

/* .elementor-grid (icones sociais) usa grid-template-columns:var(...)
   sem fallback no CSS do Elementor - sem valor definido a propriedade e
   ignorada e os itens empilham verticalmente em vez de lado a lado.
   Forca flex explicito pra garantir a fileira horizontal. */
.footer-style-01 .elementor-social-icons-wrapper.elementor-grid {
	display: flex !important;
	flex-direction: row;
	justify-content: flex-start;
	gap: 10px;
}

.footer-style-01 .elementor-icon-list-item a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,0.65);
	text-decoration: none;
	font-size: 14px;
}

.footer-style-01 .elementor-icon-list-item a:hover {
	color: #4d9fff;
}

.footer-style-01 .elementor-icon-list-icon svg {
	width: 11px;
	height: 11px;
	fill: #4d9fff;
	flex-shrink: 0;
}

.footer-contact-list .elementor-icon-list-icon svg {
	width: 15px;
	height: 15px;
}

.footer-contact-list__whatsapp .elementor-icon-list-icon svg {
	fill: #25D366;
}

.footer-style-01 .elementor-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: #fff;
}

.footer-style-01 .elementor-social-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.footer-style-01 .elementor-divider-separator {
	display: block;
	border-top: 1px solid rgba(255,255,255,0.12);
	margin: 30px 0;
}

.footer-style-01 .elementor-image-box-title {
	font-size: 13px;
	font-weight: 400;
	color: rgba(255,255,255,0.5);
	margin: 0;
}

.footer-credit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-credit__logo {
	display: inline-flex;
	align-items: center;
}

.footer-credit__logo img {
	height: 18px;
	width: auto;
	display: block;
}

.footer-style-01 .footer-companies,
.footer-style-01 .copyright-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px;
}

.footer-style-01 .footer-companies .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
}

.footer-style-01 .footer-companies .elementor-icon-list-item:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	margin-left: 10px;
	background: rgba(255,255,255,0.3);
	vertical-align: middle;
}

.footer-style-01 .footer-companies a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

.footer-style-01 .footer-companies a:hover {
	color: #4d9fff;
}

.footer-style-01 .elementor-divider {
	max-width: 1200px;
	margin: 6px auto;
	padding: 0 20px;
}

.footer-style-01 .elementor-divider-separator {
	display: block;
	border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-style-01 .copyright-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

/* ---------- Pagina "Sobre Nos" (pages/about.php) ---------- */

.page-banner {
	position: relative;
	background: var(--theme);
	padding: 50px 0;
	overflow: hidden;
}

.page-banner__title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	text-transform: capitalize;
}

.page-banner__gear {
	position: absolute;
	inset: 0;
	background: url('../images/icon.webp') right bottom / 700px auto no-repeat;
	pointer-events: none;
}

@media (max-width: 768px) {
	.page-banner__gear { background-size: 420px auto; }
}

@media (max-width: 480px) {
	.page-banner__gear { background-size: 280px auto; }
}

.about-story {
	max-width: 1200px;
	padding-top: 30px;
}

.about-story p {
	color: #585858;
	line-height: 1.7;
	margin: 0 0 16px;
}

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

.mission-vision {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	padding-top: 50px;
}

@media (max-width: 768px) {
	.mission-vision { grid-template-columns: 1fr; gap: 30px; }
}

.mission-vision__item {
	padding-left: 22px;
	border-left: 4px solid var(--theme);
}

.mission-vision__item h2 {
	margin: 0 0 14px;
	color: #0F0D1D;
	font-size: 28px;
	font-weight: 800;
}

.mission-vision__item p {
	color: #585858;
	line-height: 1.7;
	margin: 0;
}

.values-section {
	position: relative;
	background: linear-gradient(160deg, #0A0F1F 0%, #0F1E38 100%);
	padding: 100px 0;
	overflow: hidden;
}

.values-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('../images/hero-bg-2.webp') center/cover no-repeat;
	opacity: 0.07;
	pointer-events: none;
}

.values-section .container-narrow {
	position: relative;
	z-index: 1;
}

.values-section__title {
	text-align: center;
	color: #fff;
	margin-bottom: 50px;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

@media (max-width: 992px) {
	.values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.values-grid { grid-template-columns: 1fr; }
}

.value-card {
	position: relative;
	background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: 18px;
	padding: 34px 26px 28px;
	overflow: hidden;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.value-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% -10%, rgba(0,133,199,0.35), transparent 60%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.value-card:hover {
	transform: translateY(-6px);
	border-color: rgba(0,133,199,0.45);
	box-shadow: 0 24px 48px rgba(0,8,24,0.45);
}

.value-card:hover::after {
	opacity: 1;
}

.value-card__index {
	position: absolute;
	top: 22px;
	right: 24px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.18);
}

.value-card__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 22px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--theme), #3fc5ff);
	font-size: 20px;
	color: #fff;
	box-shadow: 0 10px 24px rgba(0,133,199,0.35);
}

.value-card h3 {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 10px;
}

.value-card p {
	position: relative;
	z-index: 1;
	color: rgba(255,255,255,0.6);
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
}

/* ---------- Pagina "Presenca Global" (pages/global-presence.php) ---------- */

.theme-btn.bg-dark {
	background-color: #0D1B33;
	color: #fff;
}

.theme-btn.bg-dark:hover {
	color: #fff;
}

.theme-btn.bg-dark::before,
.theme-btn.bg-dark::after {
	background-color: var(--theme);
}

.global-hero__btn i,
.global-cta .theme-btn i {
	margin-left: 0;
	margin-right: 10px;
}

.global-hero {
	position: relative;
	background: linear-gradient(160deg, var(--theme) 0%, #0A5F8F 100%);
	padding: 100px 0 150px;
	overflow: hidden;
}

.global-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('../images/hero-bg-2.webp') center/cover no-repeat;
	opacity: 0.1;
	pointer-events: none;
}

.global-hero__globe {
	position: absolute;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	width: 480px;
	height: 460px;
	background: url('../images/global-engport.webp') center/contain no-repeat;
}

.global-hero__globe::before {
	content: "";
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
	filter: blur(20px);
	z-index: -1;
}

@media (max-width: 992px) {
	.global-hero__globe { display: none; }
}

.global-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 620px;
}

.global-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 9px 20px;
	border-radius: 999px;
	margin-bottom: 22px;
}

.global-hero__badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4EE1A0;
	box-shadow: 0 0 8px 2px rgba(78,225,160,0.7);
}

.global-hero__title {
	color: #fff;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 18px;
}

.global-hero__text {
	color: rgba(255,255,255,0.92);
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 30px;
	max-width: 480px;
}

.global-stats {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: -70px auto 0;
	padding: 0 20px;
}

.global-stats__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: rgba(13,27,51,0.85);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	box-shadow: 0 30px 60px rgba(5,10,25,0.35);
	backdrop-filter: blur(6px);
	overflow: hidden;
}

@media (max-width: 768px) {
	.global-stats__inner { grid-template-columns: repeat(2, 1fr); }
}

.global-stat {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 30px 26px;
}

.global-stat:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20%;
	bottom: 20%;
	right: 0;
	width: 1px;
	background: rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
	.global-stat:nth-child(2)::after { display: none; }
}

.global-stat__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--theme), #3fc5ff);
	color: #fff;
	font-size: 17px;
}

.global-stat__number {
	display: block;
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
}

.global-stat__label {
	display: block;
	color: rgba(255,255,255,0.6);
	font-size: 12px;
	margin-top: 2px;
}

.expansion-section {
	padding: 130px 0 90px;
}

.expansion-section__eyebrow {
	display: block;
	text-align: center;
	color: var(--theme);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: 10px;
}

.expansion-section__title {
	text-align: center;
	color: #0F0D1D;
	margin-bottom: 30px;
}

.expansion-section p {
	color: #585858;
	line-height: 1.75;
	margin: 0 0 16px;
}

.expansion-section__locations-label {
	margin-top: 14px;
	color: #0F0D1D;
	font-size: 16px;
}

.locations-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 22px;
}

@media (max-width: 768px) {
	.locations-grid { grid-template-columns: 1fr; }
}

.location-card {
	position: relative;
	background: #fff;
	border: 1px solid #EAEDF3;
	border-radius: 14px;
	padding: 32px 24px;
	text-align: center;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.location-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--theme), #3fc5ff);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.location-card:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: 0 20px 40px rgba(0,133,199,0.16);
}

.location-card:hover::before {
	transform: scaleX(1);
}

.location-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--theme), #3fc5ff);
	color: #fff;
	font-size: 19px;
	box-shadow: 0 10px 22px rgba(0,133,199,0.3);
}

.location-card h3 {
	color: #0D1B33;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.3px;
	margin: 0 0 6px;
}

.location-card p {
	color: var(--theme);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.why-global-section {
	position: relative;
	background: linear-gradient(160deg, #0A0F1F 0%, #0F1E38 100%);
	padding: 100px 0;
	overflow: hidden;
}

.why-global-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('../images/hero-bg-2.webp') center/cover no-repeat;
	opacity: 0.07;
	pointer-events: none;
}

.why-global-section .container-narrow {
	position: relative;
	z-index: 1;
}

.why-global-section__eyebrow {
	display: block;
	text-align: center;
	color: #3fc5ff;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: 10px;
}

.why-global-section__title {
	text-align: center;
	color: #fff;
	margin-bottom: 50px;
}

.why-global-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

@media (max-width: 992px) {
	.why-global-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.why-global-grid { grid-template-columns: 1fr; }
}

.why-global-card {
	position: relative;
	background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: 18px;
	padding: 34px 28px 30px;
	text-align: left;
	overflow: hidden;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.why-global-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% -10%, rgba(0,133,199,0.35), transparent 60%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.why-global-card:hover {
	transform: translateY(-6px);
	border-color: rgba(0,133,199,0.45);
	box-shadow: 0 24px 48px rgba(0,8,24,0.45);
}

.why-global-card:hover::after {
	opacity: 1;
}

.why-global-card__index {
	position: absolute;
	top: 22px;
	right: 24px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.18);
}

.why-global-card__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--theme), #3fc5ff);
	color: #fff;
	font-size: 20px;
	box-shadow: 0 10px 24px rgba(0,133,199,0.35);
}

.why-global-card h3 {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.3px;
	margin: 0 0 10px;
}

.why-global-card p {
	position: relative;
	z-index: 1;
	color: rgba(255,255,255,0.6);
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
}

.global-cta-wrap {
	padding: 90px 0 100px;
}

.global-cta {
	position: relative;
	background: linear-gradient(135deg, var(--theme) 0%, #0D2547 100%);
	border-radius: 20px;
	padding: 64px 60px;
	text-align: center;
	overflow: hidden;
}

.global-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('../images/hero-bg-2.webp') center/cover no-repeat;
	opacity: 0.08;
	pointer-events: none;
}

.global-cta > * {
	position: relative;
	z-index: 1;
}

.global-cta h2 {
	color: #fff;
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 16px;
}

.global-cta p {
	color: rgba(255,255,255,0.9);
	font-size: 16px;
	line-height: 1.6;
	max-width: 700px;
	margin: 0 auto 30px;
}

@media (max-width: 640px) {
	.global-hero { padding-bottom: 190px; }
	.global-hero__title { font-size: 28px; }
	.global-stats { margin-top: -110px; }
	.global-stats__inner { grid-template-columns: 1fr; }
	.global-stat:not(:last-child)::after { display: none; }
	.global-cta { padding: 40px 24px; }
	.global-cta h2 { font-size: 24px; }
}

/* ---------- Pagina "Certificacoes" (pages/certifications.php) ---------- */

/* Mesmo hero de Presenca Global (.global-hero/.global-hero__globe), so
   trocando o globo 3D por um selo+estrelas plano (imagem propria, sem
   fundo, encaminhada pelo usuario) - modificador em vez de classe nova
   pra reaproveitar todo o resto do bloco (posicionamento, glow, etc.).
   Diferenca de posicionamento: o globo de Presenca Global fica solto
   dentro de `.global-hero` (full-bleed, sem max-width) com `right:40px`
   relativo a BORDA DA JANELA - em telas largas (1920px+) isso deixava o
   selo quase encostando na borda direita do navegador, fora da area
   visual do `.container-narrow` (max-width:1200px) que contem o resto
   do conteudo da pagina. Aqui o `<span>` fica DENTRO do
   `.global-hero__container` (`.container-narrow` com `position:relative`
   adicionado - ver regra abaixo), entao o mesmo `right:40px` herdado
   passa a ser relativo a borda do container de 1200px, nao da janela. */
.global-hero__container {
	position: relative;
}

.global-hero__globe--seal {
	background-image: url('../images/certificacoes.webp');
	width: 420px;
	height: 420px;
}

/* "Por Que Nossas Certificacoes Fazem a Diferenca" - visualmente CLARO
   (fundo cinza claro, cards brancos), ao contrario do equivalente em
   Presenca Global (.why-global-section, fundo escuro) - a imagem de
   referencia usa um tratamento diferente pra essa secao mesmo reaproveitando
   a mesma ideia de grid 3x2 de cards com icone+titulo+texto. */
.certifications-why {
	background: #F7F8FA;
	padding: 100px 0;
}

.certifications-why__title {
	text-align: center;
}

.certifications-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

@media (max-width: 992px) {
	.certifications-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.certifications-why-grid { grid-template-columns: 1fr; }
}

.certifications-why-card {
	background: #fff;
	border-radius: 14px;
	padding: 34px 28px;
	text-align: center;
	box-shadow: 0 4px 18px rgba(15,13,29,0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certifications-why-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 34px rgba(15,13,29,0.1);
}

.certifications-why-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: 50%;
	border: 2px solid var(--theme);
	color: var(--theme);
	font-size: 22px;
}

.certifications-why-card h3 {
	color: #0F0D1D;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.3px;
	margin: 0 0 10px;
}

.certifications-why-card p {
	color: #585858;
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
}

/* ---------- Pagina "Servicos" (pages/services.php) ---------- */

.services-listing {
	padding: 100px 0 110px;
}

.services-listing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media (max-width: 992px) {
	.services-listing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.services-listing__grid { grid-template-columns: 1fr; }
}

.service-card {
	background: #F2F5FA;
	display: flex;
	flex-direction: column;
}

.service-card__image {
	width: 100%;
	height: 230px;
	overflow: hidden;
}

.service-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.service-card__body {
	padding: 26px 28px 30px;
}

.service-card__title {
	color: #0F0D1D;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
}

.service-card__text {
	color: #585858;
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 22px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.service-card .theme-btn.service-card__btn {
	padding: 14px 28px;
	font-size: 12px;
}

/* ---------- Pagina "Contato" (pages/contact.php) ---------- */

.contact-info-section {
	padding: 100px 0 60px;
}

.contact-info-section__heading {
	text-align: center;
	margin-bottom: 44px;
}

.contact-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 992px) {
	.contact-info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.contact-info-grid { grid-template-columns: 1fr; }
}

.contact-info-card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #F2F5FA;
	padding: 30px 26px;
}

.contact-info-card__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--theme);
	font-size: 18px;
	box-shadow: 0 6px 16px rgba(15,13,29,0.08);
}

.contact-info-card__body h3 {
	color: #0F0D1D;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
}

.contact-info-card__body p {
	color: #585858;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.contact-form-section {
	padding: 20px 0 100px;
}

.contact-form-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: stretch;
}

@media (max-width: 860px) {
	.contact-form-section__grid { grid-template-columns: 1fr; }
}

.contact-form-card {
	background: #fff;
	border: 1px solid #EAEDF3;
	box-shadow: 0 20px 50px rgba(15,13,29,0.06);
	padding: 44px;
}

.contact-form-card h2 {
	color: #0F0D1D;
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 26px;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

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

.contact-form__field {
	position: relative;
	margin-bottom: 18px;
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	background: #F2F5FA;
	border: 1px solid #E5E8EE;
	padding: 15px 42px 15px 18px;
	font-size: 14px;
	font-family: inherit;
	color: #0F0D1D;
	resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
	border-color: var(--theme);
}

.contact-form__field i {
	position: absolute;
	top: 17px;
	right: 16px;
	color: #9AA3B2;
	font-size: 14px;
	pointer-events: none;
}

.contact-form__field--textarea textarea {
	min-height: 130px;
}

.contact-form__field--textarea i {
	top: 17px;
}

.contact-form__submit {
	display: block;
	width: 100%;
	text-align: center;
	border: none;
	cursor: pointer;
	padding: 18px;
	font-size: 14px;
}

.contact-map {
	background: #F2F5FA;
	overflow: hidden;
	min-height: 420px;
}

.contact-map iframe {
	width: 100%;
	height: 100%;
	min-height: 420px;
	display: block;
}

/* ---------- Pagina "Blog" (pages/blog.php) ---------- */

.blog-listing {
	padding: 100px 0 110px;
}

.blog-listing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media (max-width: 992px) {
	.blog-listing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.blog-listing__grid { grid-template-columns: 1fr; }
}

.blog-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #EAEDF3;
}

.blog-card__image {
	position: relative;
	display: block;
	height: 220px;
	background-size: cover;
	background-position: center;
}

.blog-card__badge {
	position: absolute;
	top: 20px;
	right: 20px;
	background: #0D1B33;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 8px 16px;
	border-radius: 999px;
}

.blog-card__body {
	padding: 24px 24px 20px;
}

.blog-card__title {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.35;
}

.blog-card__title a {
	color: #0F0D1D;
	font-weight: 700;
	text-decoration: none;
}

.blog-card__title a:hover {
	color: var(--theme);
}

.blog-card__excerpt {
	color: #585858;
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__more {
	display: inline-block;
	color: var(--theme);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
}

.blog-card__more:hover {
	text-decoration: underline;
}

.blog-card__meta {
	margin-top: auto;
	padding: 16px 24px;
	border-top: 1px solid #EAEDF3;
	color: #9AA3B2;
	font-size: 13px;
}

.blog-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 60px;
}

.blog-pagination__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 8px;
	background: #F2F5FA;
	color: #0F0D1D;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.blog-pagination__page:hover {
	background: #E5E8EE;
}

.blog-pagination__page.is-active {
	background: var(--theme);
	color: #fff;
}

.blog-pagination__nav {
	color: #0F0D1D;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.blog-pagination__nav:hover {
	color: var(--theme);
}

/* ---------- Detalhe de post (posts/show.php) ---------- */

.blog-detail {
	padding: 80px 0 40px;
}

.blog-detail__inner {
	max-width: 860px;
}

.blog-detail__back {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--theme);
	font-weight: 600;
	text-decoration: none;
}

.blog-detail__back:hover {
	text-decoration: underline;
}

.blog-detail__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.blog-detail__badge {
	background: #0D1B33;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 8px 16px;
	border-radius: 999px;
}

.blog-detail__date {
	color: #9AA3B2;
	font-size: 14px;
}

.blog-detail__hero {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	margin-bottom: 36px;
}

.blog-detail__content {
	color: #585858;
	font-size: 16px;
	line-height: 1.8;
}

.blog-detail__content h4 {
	color: #0F0D1D;
	font-size: 19px;
	font-weight: 800;
	margin: 36px 0 16px;
}

.blog-detail__content p {
	margin: 0 0 16px;
}

.blog-detail__content ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.blog-detail__content li {
	margin-bottom: 8px;
}

.blog-detail__content a {
	color: var(--theme);
}

.blog-detail__content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 8px 0 28px;
	object-fit: cover;
}

/* ---------- Posts de conteudo/SEO - cards, FAQ, relacionado, tags ---------- */
/* Ver CLAUDE.md "Posts de conteudo/SEO (padrao para novos posts)" para o
   checklist completo de que todo post novo desse tipo deve ter. */

.blog-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 8px 0 28px;
}

@media (max-width: 860px) {
	.blog-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.blog-cards-grid { grid-template-columns: 1fr; }
}

.blog-feature-card {
	background: #F7F8FA;
	border-radius: 14px;
	padding: 26px 22px;
}

.blog-feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--theme), #3fc5ff);
	color: #fff;
	font-size: 18px;
}

.blog-feature-card h5 {
	color: #0F0D1D;
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 8px;
}

.blog-feature-card p {
	color: #585858;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.blog-detail__related {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #F2F5FA;
	border-radius: 14px;
	padding: 22px;
	margin: 8px 0 36px;
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-detail__related:hover {
	box-shadow: 0 16px 34px rgba(15,13,29,0.1);
	transform: translateY(-3px);
}

.blog-detail__related__image {
	flex: 0 0 auto;
	width: 110px;
	height: 90px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
}

.blog-detail__related__label {
	display: block;
	color: var(--theme);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.blog-detail__related__title {
	color: #0F0D1D;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.blog-detail__faq {
	margin: 12px 0 36px;
}

.blog-detail__faq-title {
	color: #0F0D1D;
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 20px;
}

/* O accordion do FAQ do post usa as mesmas classes Bootstrap do FAQ da
   Home (.accordion/.accordion-item/.accordion-button), mas o estilo
   "de verdade" pro tema (fundo branco, texto azul quando aberto, sem
   caixa colorida) vem de main.css/wp-fix.css escopado em
   `.faq-wrapper .faq-accordion .accordion-button` - sem esses
   wrappers (que o post não usa), o botão cai no visual padrão do
   Bootstrap (fundo azul claro em caixa ao abrir), bem destoante do
   resto do site. Replicado aqui escopado em `.blog-detail__faq` em vez
   de simplesmente envolver o HTML com `.faq-wrapper`/`.faq-accordion`
   porque esses wrappers têm efeito colateral (`.faq-accordion{margin-
   left:20px}` pensado pro layout 2 colunas da Home) que deslocaria o
   accordion pra direita sem motivo aqui. */
.blog-detail__faq .accordion-item {
	border: 0;
	background-color: #fff;
	margin-bottom: 12px;
}

.blog-detail__faq .accordion-header {
	border: none;
}

.blog-detail__faq .accordion-button {
	font-weight: 700;
	color: var(--theme);
	border: 0;
	border-radius: 0 !important;
	box-shadow: none;
	background-color: #fff;
	padding: 20px 24px 0;
	font-size: 16px;
}

.blog-detail__faq .accordion-button::after {
	font-weight: 500;
	transition: transform 0.3s ease-in-out;
}

.blog-detail__faq .accordion-button.collapsed {
	background-color: transparent;
	padding: 20px 24px;
	color: #0F0D1D;
}

.blog-detail__faq .accordion-body {
	padding: 12px 24px 20px;
	background-color: #fff;
}

.blog-detail__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #EAEDF3;
}

.blog-detail__tags-label {
	color: #0F0D1D;
	font-weight: 700;
	font-size: 14px;
	margin-right: 4px;
}

.blog-detail__tag {
	display: inline-block;
	background: #F2F5FA;
	color: #0F0D1D;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 999px;
}