/* ==========================================================================
   Nexaltiva Sites — estética dark verde (terminal-inspired)
   Carregado via mu-plugin (handle: ls-custom). Regras estéticas usam
   :where() ou baixa especificidade para que o editor Elementor sempre vença.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de design
   -------------------------------------------------------------------------- */
:root {
	--ls-bg: #0b1210;
	--ls-bg-soft: #101a16;
	--ls-surface: #16221d;
	--ls-surface-2: #1b2a23;
	--ls-border: rgba(238, 244, 240, 0.10);
	--ls-border-strong: rgba(238, 244, 240, 0.22);
	--ls-text: #eef4f0;
	--ls-text-soft: rgba(238, 244, 240, 0.72);
	--ls-text-faint: rgba(238, 244, 240, 0.45);
	--ls-accent: #4ade80;
	--ls-btn: #50fa7b;
	--ls-btn-glow: rgba(80, 250, 123, 0.28);
	--ls-accent-soft: rgba(74, 222, 128, 0.14);
	--ls-accent-border: rgba(74, 222, 128, 0.35);
	--ls-font-body: 'Poppins', system-ui, sans-serif;
	--ls-font-mono: 'Roboto Mono', ui-monospace, monospace;
	--ls-radius: 14px;
	--ls-radius-sm: 8px;
	--ls-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	--ls-nav-h: 72px;
}

/* Mapeia tokens para as variáveis globais do Elementor (cores do kit) */
:root,
body.elementor-kit-6 {
	--e-global-color-lsbg: var(--ls-bg);
	--e-global-color-lssurface: var(--ls-surface);
	--e-global-color-lstext: var(--ls-text);
	--e-global-color-lstextsoft: var(--ls-text-soft);
	--e-global-color-lsaccent: var(--ls-accent);
	--e-global-color-lsborder: var(--ls-border);
}

/* --------------------------------------------------------------------------
   2. Base / resets
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
	background: var(--ls-bg);
	color: var(--ls-text);
	font-family: var(--ls-font-body);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--ls-accent); color: #06120c; }

/* Fundo global da homepage Elementor */
:where(.elementor) .elementor-section,
:where(.elementor) .elementor-column {
	background-color: transparent;
}

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ls-bg); }
::-webkit-scrollbar-thumb { background: var(--ls-surface-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ls-accent-border); }

/* --------------------------------------------------------------------------
   3. Labels "// " (assinatura visual)
   -------------------------------------------------------------------------- */
.ls-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ls-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ls-accent);
	margin-bottom: 14px;
}
.ls-label::before {
	content: '//';
	color: var(--ls-text-faint);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   4. Headings e texto
   -------------------------------------------------------------------------- */
:where(.elementor-widget-heading) .elementor-heading-title {
	color: var(--ls-text);
	font-family: var(--ls-font-body);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
:where(.elementor-widget-heading) .elementor-heading-title:has(+ *) { margin-bottom: 0; }

:where(.elementor-widget-text-editor) {
	color: var(--ls-text-soft);
	font-family: var(--ls-font-body);
	font-weight: 400;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   5. Botões (sistema único — Elementor sizes: xs|sm|md|lg|xl|xxl)
   -------------------------------------------------------------------------- */
:where(.elementor-widget-button) .elementor-button {
	font-family: var(--ls-font-mono);
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: var(--ls-radius-sm);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
		transform 0.25s ease, box-shadow 0.25s ease;
}

/* --------------------------------------------------------------------------
   6. Nav (header fixo)
   Estrutura: .ls-sec-nav > container > col > .ls-nav (inner) > 3 colunas:
   .ls-nav-col-logo | .ls-nav-col-menu | .ls-nav-col-cta
   Layout alvo: logo à esquerda | menu + CTA à direita.
   -------------------------------------------------------------------------- */
.ls-sec-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: rgba(11, 18, 16, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ls-border);
}
.ls-sec-nav > .elementor-container { max-width: 1140px; }
/* mata o padding:10px padrão do Elementor no widget-wrap → altura do
   nav fixo = min-height da .ls-nav = --ls-nav-h (geometria exata) */
.ls-sec-nav .elementor-widget-wrap { padding: 0 !important; }

.ls-nav {
	width: 100%;
	padding: 0;
}
.ls-nav > .elementor-container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
	min-height: var(--ls-nav-h);
}
.ls-nav .elementor-column {
	display: flex;
	align-items: center;
	width: auto !important; /* neutraliza o width:100% do col-100 do Elementor */
	flex: 0 0 auto;
}

/* Logo */
.ls-nav .ls-nav-col-logo { flex: 0 0 auto; }
:where(.ls-nav-col-logo .elementor-widget-image) img {
	max-height: 40px;
	width: auto;
}

/* Menu: alinhado à direita, colado no CTA */
.ls-nav .ls-nav-col-menu {
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}
.ls-menu {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.ls-menu .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}
:where(.ls-menu .elementor-icon-list-item) {
	margin: 0;
	padding: 0;
}
:where(.ls-menu .elementor-icon-list-item a) {
	font-family: var(--ls-font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ls-text-soft);
	transition: color 0.2s ease;
}
:where(.ls-menu .elementor-icon-list-item a):hover,
:where(.ls-menu .elementor-icon-list-item a):focus {
	color: var(--ls-accent);
}

/* CTA do nav: compacto, sem min-width */
.ls-nav .ls-nav-col-cta { flex: 0 0 auto; }
:where(.ls-nav-col-cta .elementor-widget-button) { margin: 0; }
.ls-nav-col-cta .elementor-button {
	background: var(--ls-btn);
	color: #06120c;
	padding: 9px 18px;
	font-size: 13px;
	border: 1px solid var(--ls-btn);
	box-shadow: 0 4px 14px var(--ls-btn-glow);
}
.ls-nav-col-cta .elementor-button:hover {
	background: transparent;
	color: var(--ls-btn);
	border-color: var(--ls-btn);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* Hero: ocupa a viewport abaixo do nav fixo, conteúdo centrado na vertical.
   O padding-top:200px vem do post-2.css do Elementor (0,3,0) → precisa de
   !important. A centralização acontece no container (que já é flex). */
.ls-sec-hero { padding-top: 0 !important; padding-bottom: 0 !important; }
.ls-sec-hero > .elementor-container {
	min-height: calc(100vh - var(--ls-nav-h));
	align-items: center;
	max-width: 1140px;
}
/* centraliza verticalmente: o widget-wrap é o flex real do conteúdo */
.ls-sec-hero .elementor-widget-wrap { align-content: center; }

/* CTAs do hero: colunas irmãs de largura idêntica → botões idênticos.
   1ª coluna = ghost ("ver projetos") | 2ª coluna = sólido ("fale comigo")
   (0,3,0) para vencer o max-width:1140px do .elementor-section-boxed do Elementor */
.ls-hero-ctas.elementor-section-boxed > .elementor-container {
	display: flex;
	gap: 18px;
	max-width: 560px;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.ls-hero-ctas .elementor-column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}
.ls-hero-ctas .elementor-column > .elementor-element-populated,
.ls-hero-ctas .elementor-widget-wrap {
	display: flex;
	width: 100%;
}
:where(.ls-hero-ctas .elementor-widget-button) {
	display: flex;
	width: 100%;
	margin: 0;
}
:where(.ls-hero-ctas .elementor-button) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 28px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* sólido (padrão) — verde vivo + glow para máxima visibilidade
   (sem :where() para vencer o background do kit do Elementor) */
.ls-hero-ctas .elementor-button,
.ls-sec-contato .elementor-button {
	background: var(--ls-btn);
	color: #06120c;
	border-color: var(--ls-btn);
	box-shadow: 0 6px 20px var(--ls-btn-glow);
}
.ls-hero-ctas .elementor-button:hover,
.ls-sec-contato .elementor-button:hover {
	background: transparent;
	color: var(--ls-btn);
	border-color: var(--ls-btn);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px var(--ls-btn-glow);
}
/* ghost (primeira coluna) — borda esverdeada visível */
:where(.ls-hero-ctas .elementor-column:first-child .elementor-button) {
	background: var(--ls-surface);
	color: var(--ls-text);
	border-color: rgba(80, 250, 123, 0.45);
	box-shadow: none;
}
:where(.ls-hero-ctas .elementor-column:first-child .elementor-button):hover {
	background: var(--ls-accent-soft);
	color: var(--ls-accent);
	border-color: var(--ls-accent-border);
	transform: translateY(-2px);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. Badges do hero — feature cards ("01 Sites profissionais" etc.)
   Estrutura real: .ls-hero-badges > container > colunas .ls-badge > .ls-badge-text
   -------------------------------------------------------------------------- */
.ls-hero-badges { margin-top: 32px; }
.ls-hero-badges > .elementor-container {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.ls-hero-badges .ls-badge {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}
.ls-hero-badges .ls-badge .elementor-widget-wrap { padding: 0 !important; }
/* sem :where() — precisa vencer o flex-direction do Elementor (0,1,0) */
.ls-hero-badges .ls-badge-text {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	height: 100%;
	box-sizing: border-box;
	background: var(--ls-surface);
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius-sm);
	padding: 16px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ls-text);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
:where(.ls-hero-badges .ls-badge-text) span {
	font-family: var(--ls-font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--ls-accent);
}
:where(.ls-hero-badges .ls-badge-text):hover {
	border-color: var(--ls-accent-border);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   9. Cards de projeto (.ls-card = coluna no grid .ls-grid)
   -------------------------------------------------------------------------- */
:where(.ls-card) {
	background: var(--ls-surface);
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius);
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
:where(.ls-card):hover {
	border-color: var(--ls-accent-border);
	transform: translateY(-4px);
	box-shadow: var(--ls-shadow);
}
:where(.ls-card .ls-card-media img) {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
:where(.ls-card .elementor-widget-heading .elementor-heading-title) {
	font-size: 20px;
	margin-bottom: 8px;
}
:where(.ls-card .elementor-widget-text-editor) { font-size: 14px; }
:where(.ls-card .ls-card-meta) {
	font-family: var(--ls-font-mono);
	font-size: 12px;
	color: var(--ls-text-faint);
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   10. Serviços (.ls-service = coluna no grid .ls-services)
   -------------------------------------------------------------------------- */
:where(.ls-service) {
	background: var(--ls-bg-soft);
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius);
	transition: border-color 0.3s ease;
}
:where(.ls-service):hover { border-color: var(--ls-accent-border); }
:where(.ls-service .elementor-widget-heading .elementor-heading-title) {
	font-size: 17px;
}
:where(.ls-service .elementor-widget-text-editor) { font-size: 14px; }

/* --------------------------------------------------------------------------
   11. Contato
   -------------------------------------------------------------------------- */
:where(.ls-contact .elementor-widget-text-editor) { font-size: 15px; }
:where(.ls-contact .elementor-widget-heading .elementor-heading-title) {
	font-size: clamp(28px, 4vw, 44px);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.ls-footer {
	border-top: 1px solid var(--ls-border);
	background: var(--ls-bg-soft);
	padding: 40px 0 28px;
}
.ls-footer > .elementor-container { max-width: 1140px; }
/* logo: a imagem é 1200×302 — sem limite ela estoura a coluna */
:where(.ls-footer-logo) img {
	width: 240px;
	max-width: 100%;
	height: auto;
	display: block;
}
:where(.ls-footer .elementor-widget-heading .elementor-heading-title) {
	font-size: 15px;
	letter-spacing: 0.02em;
}
:where(.ls-footer .elementor-widget-text-editor) {
	font-size: 13px;
	color: var(--ls-text-faint);
}
:where(.ls-footer a) {
	color: var(--ls-text-soft);
	text-decoration: none;
	transition: color 0.2s ease;
}
:where(.ls-footer a):hover { color: var(--ls-accent); }

/* links de serviços: spans colados → separador "·" */
:where(.ls-footer-links.elementor-widget-text-editor) span { display: inline; }
:where(.ls-footer-links.elementor-widget-text-editor) span + span::before {
	content: '·';
	margin: 0 10px;
	color: var(--ls-accent);
}

/* "voltar ao topo": pill ghost discreto */
:where(.ls-topo .elementor-button) {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-family: var(--ls-font-mono);
	font-size: 12px;
	color: var(--ls-text-soft);
	background: transparent;
	border: 1px solid var(--ls-border);
	border-radius: 999px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
:where(.ls-topo .elementor-button):hover {
	color: var(--ls-accent);
	border-color: var(--ls-accent-border);
}

/* --------------------------------------------------------------------------
   13. Animações reveal on scroll
   -------------------------------------------------------------------------- */
@keyframes ls-fade-up {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}
.ls-reveal,
:where(.elementor-section.ls-reveal) > .elementor-container > .elementor-column {
	animation: ls-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
:where(.ls-grid .ls-card:nth-child(2)),
:where(.ls-services .ls-service:nth-child(2)) { animation-delay: 0.12s; }
:where(.ls-grid .ls-card:nth-child(3)),
:where(.ls-services .ls-service:nth-child(3)) { animation-delay: 0.24s; }
:where(.ls-grid .ls-card:nth-child(4)),
:where(.ls-services .ls-service:nth-child(4)) { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
	.ls-reveal,
	:where(.elementor-section.ls-reveal) > .elementor-container > .elementor-column {
		animation: none;
	}
	html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   14. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ls-sec-nav > .elementor-container,
	.ls-sec-hero > .elementor-container,
	.ls-footer > .elementor-container { max-width: 920px; }
	.ls-menu .elementor-icon-list-items { gap: 20px; }
}

@media (max-width: 767px) {
	:root { --ls-nav-h: 64px; }

	/* nav: linha única — logo à esquerda + CTA à direita; menu escondido
	   (specificidade + !important para vencer o display:flex do escopo .ls-nav) */
	.ls-nav .ls-nav-col-menu { display: none !important; }
	.ls-nav .ls-nav-col-cta { margin-left: auto; }

	/* hero CTAs: empilhados, full-width */
	.ls-hero-ctas.elementor-section-boxed > .elementor-container {
		flex-direction: column;
		gap: 12px;
		max-width: 100%;
	}
	.ls-hero-ctas .elementor-column { flex: 1 1 auto; }

	.ls-sec-hero { padding-top: calc(var(--ls-nav-h) + 32px) !important; }
	.ls-sec-hero > .elementor-container { min-height: auto; }
	:where(.ls-hero-ctas .elementor-button) { padding: 14px 22px; }

	/* badges: cards empilhados full-width */
	.ls-hero-badges { margin-top: 24px; }
	.ls-hero-badges .ls-badge { flex: 1 1 100%; }

	/* footer mobile: logo menor e respiro entre blocos */
	:where(.ls-footer-logo) img { width: 200px; }
	.ls-footer .elementor-column + .elementor-column { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   15. Blog / single post (dark)
   -------------------------------------------------------------------------- */
:where(.single-post) .elementor,
:where(.blog) .elementor {
	background: var(--ls-bg);
	color: var(--ls-text);
}
:where(.single-post .elementor-widget-theme-post-content) {
	color: var(--ls-text-soft);
	line-height: 1.8;
}
:where(.single-post .elementor-widget-theme-post-content) a,
:where(.single-post .elementor-widget-theme-post-title) a {
	color: var(--ls-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--ls-accent-border);
}
:where(.single-post .elementor-widget-theme-post-content) a:hover {
	border-bottom-color: var(--ls-accent);
}
:where(.single-post .elementor-widget-theme-post-content) h2,
:where(.single-post .elementor-widget-theme-post-content) h3 {
	color: var(--ls-text);
	font-weight: 600;
	letter-spacing: -0.01em;
}
:where(.single-post .elementor-widget-theme-post-content) code {
	font-family: var(--ls-font-mono);
	background: var(--ls-surface);
	border: 1px solid var(--ls-border);
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 0.9em;
	color: var(--ls-accent);
}
:where(.single-post .elementor-widget-theme-post-content) pre {
	background: var(--ls-surface);
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius-sm);
	padding: 18px 20px;
	overflow-x: auto;
}
:where(.single-post .elementor-widget-theme-post-content) pre code {
	background: none;
	border: none;
	padding: 0;
	color: var(--ls-text);
}
:where(.single-post .elementor-widget-theme-post-content) blockquote {
	border-left: 3px solid var(--ls-accent);
	background: var(--ls-accent-soft);
	border-radius: 0 var(--ls-radius-sm) var(--ls-radius-sm) 0;
	padding: 16px 20px;
	color: var(--ls-text);
}

/* --------------------------------------------------------------------------
   16. CTA WhatsApp no fim do post (.lsap-cta)
   -------------------------------------------------------------------------- */
.lsap-cta {
	display: flex;
	justify-content: center;
	margin: 48px 0 8px;
}
.single-post .page-content .lsap-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ls-accent);
	color: #fff;
	font-family: var(--ls-font-mono);
	font-size: 14px;
	font-weight: 500;
	padding: 14px 24px;
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(74, 222, 128, 0.35);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.single-post .page-content .lsap-cta-btn:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 14px 34px rgba(74, 222, 128, 0.45);
	color: #fff;
}
.lsap-cta-btn span {
	transition: transform 0.25s ease;
}
.lsap-cta-btn:hover span {
	transform: translateX(4px);
}
@media (max-width: 767px) {
	.lsap-cta { margin: 36px 0 8px; }
	.lsap-cta-btn { padding: 12px 18px; font-size: 13px; }
}