/* ---------------------------------------------------------------------
   Balarini Usinagem — estilos próprios.

   O visual base vem de assets/tema/style.css (tema original, intacto).
   Este arquivo cobre só o que era gerado por plugins do WordPress:
   slider, galeria, formulário e aviso de cookies — mais a escala
   tipográfica que unifica os tamanhos de fonte do site inteiro.
   --------------------------------------------------------------------- */

/* =====================================================================
   ESCALA TIPOGRÁFICA

   O tema define body em 12px e sobe para 18px apenas nos parágrafos do
   conteúdo. Tudo que não era <p> — listas, tabelas, células — ficava com
   os 12px herdados, e o conteúdo antigo do WordPress compensava isso com
   font-size inline em cada item. Daí cada página ter um tamanho:
   Maquinário saía em 12px, Serviços em 20,7px, o resto em 18px.

   As variáveis abaixo são o único lugar onde tamanho de fonte é definido.
   18px é o que o tema já usava nos parágrafos, então a home e a Quem Somos
   continuam idênticas — as outras páginas é que passam a acompanhá-las.
   ===================================================================== */

:root {
	--fonte-texto:   18px;   /* corpo do texto, listas, tabelas, formulário */
	--fonte-pequena: 15px;   /* notas, rodapé, aviso de cookies */
	--fonte-h1:      26px;
	--fonte-h2:      22px;
	--fonte-h3:      19px;
	--altura-linha:  1.5;
}

/* --- Conteúdo das páginas ------------------------------------------- */

.art-postcontent,
.art-postcontent p,
.art-postcontent li,
.art-postcontent td,
.art-postcontent th,
.art-postcontent dd,
.art-postcontent dt,
.art-postcontent label,
.art-postcontent blockquote {
	font-size: var(--fonte-texto);
	line-height: var(--altura-linha);
}

/* Neutraliza font-size inline vindo do conteúdo antigo do WordPress: o
   editor gravava <span style="font-size: 18px; line-height: 27px"> dentro
   de cada item de lista. Sem isto, texto colado do site velho volta a
   escapar da escala. */
.art-postcontent span[style*="font-size"],
.art-postcontent font[size] {
	font-size: inherit !important;
	line-height: inherit !important;
}

.art-postcontent h1 { font-size: var(--fonte-h1); }
.art-postcontent h2 { font-size: var(--fonte-h2); }
.art-postcontent h3 { font-size: var(--fonte-h3); }

.art-postcontent h1,
.art-postcontent h2,
.art-postcontent h3 {
	margin: 1.2em 0 .5em;
	line-height: 1.25;
}

/* O primeiro título da página não precisa do espaço de cima. */
.art-postcontent > h1:first-child,
.art-postcontent > h2:first-child {
	margin-top: 0;
}

.art-postcontent p,
.art-postcontent ul,
.art-postcontent ol {
	margin: 0 0 1em;
}

/* =====================================================================
   RODAPÉ

   Substitui a estrutura de tabela do tema Artisteer (art-layout-cell com
   larguras em porcentagem) por um grid que se reorganiza sozinho. O
   widget do Facebook saiu junto: era um SDK de terceiros que gravava
   cookies e carregava ~200 KB para exibir um quadro quase sempre vazio.
   No lugar ficou um link direto para a página.
   ===================================================================== */

.rodape {
	margin-top: 40px;
	background: linear-gradient(160deg, #123350 0%, #0b2135 100%);
	color: #c8d6e2;
	font-size: var(--fonte-pequena);
	line-height: var(--altura-linha);
	/* O tema justifica o texto do rodapé, o que abre buracos entre as
	   palavras nas colunas estreitas. */
	text-align: left;
}

.rodape p,
.rodape li {
	text-align: left;
}

.rodape-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 42px 24px 0;
}

.rodape-grade {
	display: grid;
	gap: 40px;
	grid-template-columns: 2fr 1fr 1.6fr;
	align-items: start;
}

.rodape-titulo {
	margin: 0 0 16px;
	color: #fff;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: calc(var(--fonte-pequena) + 3px);
	font-weight: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Linha curta de destaque sob cada título. */
.rodape-titulo::after {
	content: "";
	display: block;
	width: 38px;
	height: 2px;
	margin-top: 8px;
	background: #3d91d6;
}

.rodape-texto,
.rodape-crea {
	margin: 0 0 12px;
}

.rodape-crea {
	color: #8ea6bb;
	font-size: calc(var(--fonte-pequena) - 2px);
}

.rodape a {
	color: #c8d6e2;
	text-decoration: none;
	transition: color .2s;
}

.rodape a:hover,
.rodape a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* --- Listas do rodapé ----------------------------------------------- */

.rodape-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rodape-lista li {
	margin-bottom: 10px;
}

.rodape-lista-contato li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.rodape-lista-contato svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: #3d91d6;
}

/* --- Link do Facebook ----------------------------------------------- */

.rodape-social {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid rgba(200, 214, 226, .3);
	border-radius: 4px;
	transition: border-color .2s, background .2s;
}

.rodape-social:hover {
	border-color: #3d91d6;
	background: rgba(61, 145, 214, .12);
	text-decoration: none;
}

/* --- Chamada para orçamento ----------------------------------------- */

.rodape-botao {
	display: inline-block;
	margin-top: 6px;
	padding: 10px 20px;
	border-radius: 4px;
	background: #2d88d2;
	color: #fff !important;
	font-weight: bold;
	transition: background .2s;
}

.rodape-botao:hover {
	background: #1f6fb0;
	text-decoration: none;
}

/* --- Faixa inferior -------------------------------------------------- */

.rodape-base {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: space-between;
	align-items: center;
	margin-top: 36px;
	padding: 16px 0 20px;
	border-top: 1px solid rgba(200, 214, 226, .15);
	color: #8ea6bb;
	font-size: calc(var(--fonte-pequena) - 2px);
}

.rodape-base p {
	margin: 0;
}

.rodape-separador {
	margin: 0 8px;
	opacity: .5;
}

/* --- Rodapé em telas menores ---------------------------------------- */

@media (max-width: 860px) {
	.rodape-grade {
		grid-template-columns: 1fr 1fr;
	}

	.rodape-marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.rodape-grade {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.rodape-inner {
		padding: 32px 18px 0;
	}

	.rodape-base {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Slider da home ------------------------------------------------- */

.slider {
	position: relative;
	max-width: 880px;
	margin: 0 auto 20px;
}

.slider-palco {
	position: relative;
	/* Reserva a proporção 880x400 antes das imagens carregarem,
	   evitando o "pulo" do conteúdo. */
	aspect-ratio: 880 / 400;
	overflow: hidden;
	background: #1a1a1a;
}

.slider .slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .8s ease-in-out;
}

.slider .slide.ativo {
	opacity: 1;
}

/* Sem JavaScript, mostra ao menos o primeiro slide. */
.slider.sem-js .slide:first-child {
	opacity: 1;
}

.slider-pontos {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.slider-ponto {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .2s;
}

.slider-ponto.ativo,
.slider-ponto:hover {
	background: #fff;
}

/* --- Galerias ------------------------------------------------------- */

.galeria {
	display: grid;
	gap: 12px;
	margin: 20px 0;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.galeria[data-colunas="3"] {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.galeria-item {
	margin: 0;
}

.galeria-item img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #ccc;
	transition: opacity .2s;
}

.galeria-item a:hover img {
	opacity: .8;
}

/* --- Listas de conteúdo --------------------------------------------- */

.lista-equipamentos li,
.lista-servicos li {
	margin-bottom: 6px;
	text-align: justify;
}

/* --- Página de contato ---------------------------------------------- */

.contato-colunas {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: flex-start;
}

.contato-formulario {
	flex: 1 1 340px;
	min-width: 0;
}

.contato-mapa {
	flex: 1 1 440px;
	min-width: 0;
}

.contato-mapa iframe {
	width: 100%;
	max-width: 440px;
	height: 450px;
}

/* --- Formulário ----------------------------------------------------- */

.formulario p {
	margin: 0 0 14px;
}

.formulario label {
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	padding: 8px;
	border: 1px solid #b5b5b5;
	border-radius: 3px;
	background: #fff;
	font-family: inherit;
	font-size: var(--fonte-texto);
	line-height: var(--altura-linha);
}

.formulario input:focus,
.formulario textarea:focus {
	border-color: #1f5f97;
	outline: 2px solid rgba(31, 95, 151, .3);
}

.formulario textarea {
	resize: vertical;
}

.obrigatorio {
	color: #c0392b;
}

.botao {
	padding: 10px 22px;
	border: 0;
	border-radius: 3px;
	background: #1f5f97;
	color: #fff;
	font-family: inherit;
	font-size: var(--fonte-texto);
	font-weight: bold;
	cursor: pointer;
}

.botao:hover {
	background: #194c79;
}

.formulario-nota,
.art-postcontent .formulario-nota {
	font-size: var(--fonte-pequena);
	color: #666;
}

/* Campo isca anti-spam: fora da tela, mas não display:none — alguns robôs
   ignoram campos escondidos por display. */
.campo-isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Avisos --------------------------------------------------------- */

.aviso {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 4px solid;
	border-radius: 3px;
}

.aviso-ok {
	border-color: #2e7d32;
	background: #e8f5e9;
	color: #1b5e20;
}

.aviso-erro {
	border-color: #c0392b;
	background: #fdecea;
	color: #922b21;
}

.aviso ul {
	margin: 8px 0 0 18px;
}

/* --- Aviso de cookies ----------------------------------------------- */

/* Reproduz a barra do plugin Cookie Law Info: título em cima, texto,
   link e botão lado a lado na mesma linha. */
.aviso-cookies {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	padding: 14px 20px;
	background: #fff;
	border-top: 1px solid #b1a6a6;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
	color: #333;
	font-size: var(--fonte-pequena);
	line-height: var(--altura-linha);
}

.aviso-cookies[hidden] {
	display: none;
}

.aviso-cookies h5 {
	margin: 0 0 6px;
	font-size: var(--fonte-h3);
	font-weight: bold;
}

.aviso-cookies-linha {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.aviso-cookies-texto {
	flex: 1 1 480px;
	margin: 0;
}

.aviso-cookies-link {
	flex: 0 1 auto;
	margin: 0;
}

.aviso-cookies-acao {
	flex: 0 0 auto;
	margin: 0;
}

.botao-cookies {
	padding: 8px 20px;
	border: 0;
	border-radius: 3px;
	background: #1f5f97;
	color: #fff;
	font-family: inherit;
	font-size: var(--fonte-pequena);
	cursor: pointer;
}

.botao-cookies:hover {
	background: #194c79;
}

/* --- Telas médias --------------------------------------------------- */

@media (max-width: 768px) {
	.contato-colunas {
		flex-direction: column;
	}

	.contato-mapa iframe {
		height: 320px;
	}
}

/* --- Telas pequenas -------------------------------------------------
   Uma única redução, aplicada ao site inteiro de uma vez: como nada mais
   define font-size fora daqui, mexer nestes cinco valores muda todas as
   páginas ao mesmo tempo.
   -------------------------------------------------------------------- */

@media (max-width: 600px) {
	:root {
		--fonte-texto:   16px;
		--fonte-pequena: 14px;
		--fonte-h1:      22px;
		--fonte-h2:      19px;
		--fonte-h3:      17px;
	}
}