/*
Theme Name: Aliar Tecnologia
Theme URI: https://www.aliartecnologia.com.br
Author: Aliar Tecnologia
Description: Tema institucional da Aliar Tecnologia — automação, elétrica e segurança eletrônica em Belo Horizonte e região. Inclui as páginas Início, Serviços, Condomínios e Sobre, com formulário Fale conosco.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietária
Text Domain: aliar
*/

/* ---------- Base ---------- */
:root {
	--marinho: #0B1F3A;
	--marinho-2: #132C50;
	--marinho-3: #08172C;
	--azul: #1E63C4;
	--azul-claro: #5B8FE0;
	--laranja: #E8771A;
	--laranja-claro: #F5A55A;
	--texto: #0B1F3A;
	--texto-2: #4A5A72;
	--texto-3: #33445C;
	--linha: #E6EAF0;
	--fundo-2: #F4F7FB;
	--azul-suave: #EAF1FB;
	--raio: 20px;
	--fonte-titulo: "Sora", system-ui, sans-serif;
	--fonte: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--fonte);
	color: var(--texto);
	background: #FFFFFF;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--texto); }
a:hover { color: var(--laranja); }

h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }

.container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

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

.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto;
	background: #FFFFFF; padding: 12px 16px; border-radius: 8px;
}

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

/* ---------- Botões ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 28px; min-height: 52px;
	border-radius: 999px; border: 0;
	font: inherit; font-weight: 600; font-size: 16px;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { flex: none; }
.btn-laranja { background: var(--laranja); color: #FFFFFF; }
.btn-laranja:hover { background: #CF6510; color: #FFFFFF; }
.btn-marinho { background: var(--marinho); color: #FFFFFF; }
.btn-marinho:hover { background: var(--azul); color: #FFFFFF; }
.btn-contorno { color: #FFFFFF; border: 1px solid #3A5276; }
.btn-contorno:hover { color: #FFFFFF; border-color: #FFFFFF; }
.btn-grande { padding: 18px 32px; min-height: 56px; font-size: 17px; }

.link-seta {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	font-weight: 600; font-size: 15px;
}

/* ---------- Cabeçalho ---------- */
.site-header { background: #FFFFFF; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.logo img { height: 52px; width: auto; }

.menu-principal { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.menu-principal a { text-decoration: none; }
.menu-principal a.ativo { color: var(--azul); }
.menu-principal .btn { padding: 12px 20px; min-height: 44px; font-size: 15px; }

.menu-toggle {
	display: none; background: none; border: 1px solid var(--linha); border-radius: 12px;
	width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; color: var(--marinho);
}

@media (max-width: 900px) {
	.menu-toggle { display: inline-flex; }
	.menu-principal {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #FFFFFF; border-bottom: 1px solid var(--linha); padding: 8px 24px 24px;
		box-shadow: 0 16px 32px rgba(11, 31, 58, .08);
	}
	.menu-principal.aberto { display: flex; }
	.menu-principal a { padding: 14px 0; border-bottom: 1px solid var(--linha); }
	.menu-principal .btn { margin-top: 16px; justify-content: center; border-bottom: 0; }
	.logo img { height: 44px; }
}

/* ---------- Seções ---------- */
.secao { padding-top: 104px; padding-bottom: 104px; }
.secao-media { padding-top: 88px; padding-bottom: 88px; }
.fundo-marinho { background: var(--marinho); color: #FFFFFF; }
.fundo-cinza { background: var(--fundo-2); }
.fundo-azul { background: var(--azul); color: #FFFFFF; }

.rotulo {
	display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--azul);
}
.fundo-marinho .rotulo { color: var(--laranja-claro); }
.fundo-azul .rotulo { color: #FFD3AD; }

.titulo-secao { font-size: 40px; line-height: 1.15; font-weight: 700; }
.cabeca-secao { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-bottom: 48px; }

/* ---------- Hero ---------- */
.hero .container { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 96px; padding-bottom: 96px; }
.hero-texto { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: 56px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }
.hero h1.h1-menor { font-size: 52px; line-height: 1.1; }
.hero-lead { font-size: 19px; line-height: 1.6; color: #C9D4E5; max-width: 560px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.hero-contato { font-size: 14px; color: #9FB0C8; }
.hero-arte { flex: 1 1 420px; min-width: 0; border-radius: 24px; background: var(--marinho-2); overflow: hidden; }
.hero-arte svg { display: block; width: 100%; height: auto; }

.topo-pagina .container { display: flex; flex-direction: column; gap: 20px; padding-top: 88px; padding-bottom: 88px; }
.topo-pagina h1 { font-size: 52px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; max-width: 860px; }
.topo-pagina .hero-lead { max-width: 700px; }

/* ---------- Marcas ---------- */
.faixa-marcas { border-bottom: 1px solid var(--linha); }
.faixa-marcas .container { padding-top: 32px; padding-bottom: 32px; }
.faixa-marcas p { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5B6B82; }

/* ---------- Cards ---------- */
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card {
	border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; background: #FFFFFF;
	display: flex; flex-direction: column; gap: 14px;
}
.card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.card p { font-size: 15px; line-height: 1.6; color: var(--texto-2); }
.icone {
	width: 48px; height: 48px; border-radius: 14px; background: var(--azul-suave); color: var(--azul);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.icone-laranja { background: #FDEFE2; color: #C25E0E; }
.card-destaque {
	background: var(--laranja); color: #FFFFFF; border-radius: var(--raio); padding: 28px; min-height: 200px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 20px; text-decoration: none;
}
.card-destaque:hover { background: #CF6510; color: #FFFFFF; }
.card-destaque strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 22px; line-height: 1.25; }
.card-destaque span { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Blocos em duas colunas ---------- */
.duas-colunas { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.duas-colunas > * { flex: 1 1 420px; min-width: 0; }
.coluna-texto { display: flex; flex-direction: column; gap: 22px; }
.coluna-texto > p { font-size: 17px; line-height: 1.65; color: var(--texto-2); }
.arte { border-radius: 24px; overflow: hidden; background: #E3EAF4; }
.arte svg { display: block; width: 100%; height: auto; }

.lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lista-check li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
.lista-check svg { flex: none; margin-top: 2px; color: var(--laranja); }

/* ---------- Etapas ---------- */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.etapas li { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid var(--marinho); }
.etapas.em-cards li { border-top: 0; padding: 28px; background: #FFFFFF; border-radius: var(--raio); }
.etapas .num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; color: var(--laranja); }
.etapas h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.etapas p { font-size: 15px; line-height: 1.6; color: var(--texto-2); }

/* ---------- Sobre + Garantia (Home) ---------- */
.sobre-garantia { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.bloco-escuro { background: var(--marinho); color: #FFFFFF; border-radius: 24px; padding: 44px; display: flex; flex-direction: column; gap: 16px; }
.bloco-escuro .rotulo { color: var(--laranja-claro); }
.bloco-escuro h2 { font-size: 30px; line-height: 1.2; font-weight: 700; }
.bloco-escuro p { font-size: 16px; line-height: 1.65; color: #C9D4E5; }
.bloco-escuro a { color: #FFFFFF; }
.bloco-claro { border: 1px solid var(--linha); border-radius: 24px; padding: 44px; display: flex; flex-direction: column; gap: 24px; }
.bloco-claro > p { font-size: 15px; line-height: 1.6; color: var(--texto-2); }

.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.numero { display: flex; flex-direction: column; gap: 8px; }
.numero strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: 40px; line-height: 1; color: var(--marinho); letter-spacing: -0.02em; }
.numero span { font-size: 15px; color: var(--texto-2); }
.numero-card { border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; background: #FFFFFF; }
.grade-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

/* ---------- Serviços (página) ---------- */
.atalhos { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
.atalhos a {
	color: #FFFFFF; border: 1px solid #3A5276; padding: 10px 16px; border-radius: 999px;
	font-size: 14px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none;
}
.atalhos a:hover { border-color: #FFFFFF; color: #FFFFFF; }

.servico { display: flex; flex-wrap: wrap; gap: 40px 56px; padding: 56px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: 96px; }
.servico:last-child { border-bottom: 0; }
.servico-info { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.servico-info .icone { width: 56px; height: 56px; border-radius: 16px; }
.servico-info .num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 14px; color: var(--laranja); }
.servico-info h2 { font-size: 32px; line-height: 1.2; font-weight: 700; }
.servico-info p { font-size: 17px; line-height: 1.65; color: var(--texto-2); }
.servico-itens { flex: 1 1 420px; min-width: 0; align-self: flex-start; background: var(--fundo-2); border-radius: var(--raio); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.servico-itens .rotulo { letter-spacing: .08em; }

/* ---------- Sobre (página) ---------- */
.historia { display: flex; flex-wrap: wrap; gap: 56px; }
.historia-lateral { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.historia-lateral h2 { font-size: 34px; line-height: 1.2; font-weight: 700; }
.historia-lateral p { font-size: 16px; line-height: 1.6; color: var(--texto-2); }
.historia-texto { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.75; color: var(--texto-3); }
.historia-texto .compromisso {
	font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; line-height: 1.5; color: var(--marinho);
	border-top: 2px solid var(--laranja); padding-top: 20px;
}

.missao-visao { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.missao-visao .card { padding: 40px; border-radius: 24px; gap: 16px; }
.missao-visao h2 { font-size: 26px; font-weight: 700; }
.missao-visao p { font-size: 17px; line-height: 1.65; }

.valores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.valores li { border: 1px solid var(--linha); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.valores svg { color: var(--laranja); }
.valores span { font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; line-height: 1.35; }

/* ---------- Chamada final / contato ---------- */
.chamada .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-top: 88px; padding-bottom: 88px; }
.chamada-texto { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.chamada h2 { font-size: 40px; line-height: 1.15; font-weight: 700; }
.chamada p { font-size: 18px; line-height: 1.6; color: #DCE7F7; }

.contato .container { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 48px; padding-top: 88px; padding-bottom: 88px; }
.contato-texto { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.contato-texto h2 { font-size: 40px; line-height: 1.15; font-weight: 700; }
.contato-texto p { font-size: 18px; line-height: 1.6; color: #DCE7F7; }
.contato-texto .btn { align-self: flex-start; margin-top: 8px; }

.formulario {
	flex: 1 1 440px; min-width: 0; background: #FFFFFF; color: var(--texto); border-radius: 24px; padding: 36px;
	display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 96px;
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo .obrig, .nota-obrig .obrig { color: #C25E0E; }
.campo input, .campo textarea {
	font: inherit; font-size: 16px; color: var(--texto); padding: 14px 16px; min-height: 48px;
	border: 1px solid #B5C3D8; border-radius: 12px; background: #FFFFFF; width: 100%;
}
.campo textarea { resize: vertical; min-height: 140px; }
.campo input:focus, .campo textarea:focus { border-color: var(--azul); outline: 3px solid rgba(30, 99, 196, .2); outline-offset: 0; }
.campos-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.nota-obrig { font-size: 13px; color: var(--texto-2); }
.formulario .btn { align-self: flex-start; }
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { border-radius: 12px; padding: 14px 16px; font-size: 15px; font-weight: 500; }
.aviso-ok { background: #E7F5EC; color: #1B6B3A; }
.aviso-erro { background: #FDECEC; color: #A1261D; }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--marinho-3); color: #9FB0C8; font-size: 14px; }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-top: 48px; padding-bottom: 48px; }
.rodape-marca { display: flex; flex-direction: column; gap: 10px; max-width: 320px; line-height: 1.6; }
.rodape-marca img { height: 56px; width: auto; margin-bottom: 4px; }
.rodape-links, .rodape-contato { display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: #C9D4E5; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer a.destaque { color: #FFFFFF; font-weight: 600; }
.rodape-base { border-top: 1px solid #1A2D4A; }
.rodape-base .container { padding-top: 20px; padding-bottom: 20px; font-size: 13px; }

/* ---------- Página genérica ---------- */
.conteudo-generico { max-width: 760px; margin: 0 auto; padding: 72px 24px 104px; font-size: 17px; line-height: 1.75; color: var(--texto-3); }
.conteudo-generico h1 { font-size: 40px; line-height: 1.15; margin-bottom: 24px; color: var(--marinho); }
.conteudo-generico p { margin-bottom: 1em; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.secao { padding-top: 72px; padding-bottom: 72px; }
	.secao-media, .chamada .container, .contato .container { padding-top: 64px; padding-bottom: 64px; }
	.hero .container { padding-top: 56px; padding-bottom: 56px; gap: 40px; }
	.hero h1, .hero h1.h1-menor { font-size: 36px; }
	.topo-pagina .container { padding-top: 56px; padding-bottom: 56px; }
	.topo-pagina h1 { font-size: 34px; }
	.hero-lead { font-size: 17px; }
	.titulo-secao, .chamada h2, .contato-texto h2 { font-size: 30px; }
	.servico-info h2 { font-size: 26px; }
	.historia-lateral h2 { font-size: 28px; }
	.bloco-escuro, .bloco-claro { padding: 32px 24px; }
	.numero strong { font-size: 32px; }
	.formulario { padding: 28px 20px; }
	.servico-itens { padding: 24px; }
	.duas-colunas > *, .hero-texto, .hero-arte, .chamada-texto, .contato-texto, .formulario, .servico-info, .servico-itens, .historia-lateral, .historia-texto { flex-basis: 100%; }
	.hero-acoes .btn, .chamada .btn { width: 100%; justify-content: center; }
}