/* ==========================================================================
   Walsywa — folha de estilo do site.
   Escrita à mão, no lugar dos 59 arquivos de CSS que o site antigo carregava.
   Cores e medidas conferidas no site em produção.
   ========================================================================== */

:root {
	--azul: #002257;           /* institucional: menu, rodapé, títulos */
	--azul-claro: #0a3a86;
	--laranja: #ff7f00;        /* chamadas para ação */
	--laranja-escuro: #e06f00;
	--cinza-topo: #464646;     /* faixa superior */
	--texto: #33373d;
	--texto-fraco: #7a7a7a;
	--linha: #e3e6ec;
	--fundo: #ffffff;
	--fundo-suave: #f5f6f8;
	--largura: 1320px;
	/* Largura padrão das seções do layout antigo (o padrão do Elementor). */
	--largura-padrao: 1000px;
	--fonte: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

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

/* Os blocos que vão de ponta a ponta usam a largura da janela, que conta a
   barra de rolagem: sem isto sobram alguns pixels de rolagem lateral. */
html, body { overflow-x: clip; }

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

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--fonte); color: var(--azul); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 40px; }
h2 { font-size: 30px; }
/* Título de abertura que era <h2> e virou <h1> para a página ter título de
   primeiro nível: fica do tamanho que já tinha, para o layout não mudar. */
h1.titulo--promovido { font-size: 30px; }
h3 { font-size: 22px; }

.wrap { width: min(100% - 48px, var(--largura)); margin-inline: auto; }

/* ============================================================== cabeçalho */

.cab { position: relative; z-index: 50; }

/* faixa superior: redes, portal do parceiro, idiomas e contato */
.cab__topo { background: var(--cinza-topo); color: #fff; }
.cab__topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.cab__redes { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cab__redes a { display: grid; place-items: center; width: 26px; height: 26px; background: #fff; color: var(--cinza-topo); border-radius: 3px; }
.cab__redes svg { width: 15px; height: 15px; fill: currentColor; }

.cab__portal {
	background: var(--laranja); color: #fff; font-size: 14px; line-height: 1.25;
	padding: 10px 26px; border-radius: 3px; text-align: center; font-style: italic;
}
.cab__portal:hover { background: var(--laranja-escuro); text-decoration: none; color: #fff; }
.cab__portal strong { display: block; font-style: normal; font-weight: 700; }

.cab__direita { display: flex; align-items: center; gap: 26px; }
.cab__idiomas { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cab__idiomas a { color: #fff; opacity: .7; }
.cab__idiomas [aria-current="true"] a { opacity: 1; font-weight: 700; text-decoration: underline; }
.cab__contato { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.cab__contato a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.cab__contato svg { width: 18px; height: 18px; fill: #fff; flex: none; }

/* faixa do menu, com o logotipo ao centro */
.cab__barra { background: var(--azul); }
.cab__barra .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.cab__logo { flex: none; }
.cab__logo img { width: 170px; }

.cab__nav { flex: 1; }
.cab__menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.cab__nav--esq .cab__menu { justify-content: flex-start; }
.cab__nav--dir .cab__menu { justify-content: flex-end; }
.cab__menu > li { position: relative; }
.cab__menu > li > a {
	display: block; color: #fff; font-size: 13px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em; padding: 22px 0;
}
.cab__menu > li > a:hover { text-decoration: none; color: #cfe0ff; }
.cab__menu .menu-item-has-children > a::after { content: "▾"; margin-left: 6px; font-size: 11px; }

/* submenu */
.cab__menu .sub-menu {
	position: absolute; top: 100%; left: -18px; min-width: 260px; margin: 0; padding: 10px 0;
	list-style: none; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease;
}
.cab__menu > li:hover > .sub-menu,
.cab__menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.cab__menu .sub-menu a {
	display: block; padding: 9px 22px; color: var(--azul); font-size: 14px;
}
.cab__menu .sub-menu a:hover { background: var(--fundo-suave); text-decoration: none; }

/* painel de produtos: ocupa a barra inteira, uma coluna por linha */
.cab__barra { position: relative; }
.cab__menu > li.tem-mega { position: static; }
.mega {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
	background: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
	border-top: 3px solid var(--laranja);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease;
}
.cab__menu > li.tem-mega:hover > .mega,
.cab__menu > li.tem-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
/* Seis colunas de verdade, alinhadas pelo topo — e não um texto em colunas,
   que empurrava cada bloco para uma altura diferente. O seletor carrega o
   .cab__barra porque o painel também usa .wrap: sem isso a regra da barra
   (flex centrado) vence por especificidade e cada coluna cai numa altura. */
.cab__barra .mega__grade {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: start; gap: 26px 30px; padding-block: 28px;
}
.mega__coluna { display: grid; align-content: start; gap: 26px; }
.mega__bloco { margin: 0; }
.mega__titulo { font-size: 16px; font-weight: 600; margin: 0 0 8px; text-transform: none; }
.mega__titulo a { color: var(--cor, var(--azul)); }
.mega__titulo { border-bottom: 1px solid var(--linha); padding-bottom: 6px; }
.mega__itens { list-style: none; margin: 0; padding: 0; }
.mega__itens a { display: block; padding: 4px 0; color: var(--texto); font-size: 14px; line-height: 1.35; }
.mega__itens a:hover { color: var(--cor, var(--azul)); text-decoration: none; }

.cab__busca { flex: none; }
.cab__busca button { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; display: block; }
.cab__busca svg { width: 20px; height: 20px; fill: currentColor; }

/* A faixa que a lupa abre: fundo escuro por cima da página inteira (o
   cabeçalho incluído) e o campo logo abaixo do menu. O JS mede a altura do
   cabeçalho e guarda em --topo; o valor da folha serve para a primeira
   pintura. */
.buscaTopo { position: fixed; inset: 0; z-index: 97; }
.buscaTopo[hidden] { display: none; }
.buscaTopo__fundo {
	position: absolute; inset: 0; width: 100%; padding: 0; border: 0;
	background: rgba(0, 0, 0, .8); cursor: pointer;
}
/* Medidas conferidas no site em produção: 760px de largura e campo de 66px.
   Lá a faixa fica no meio de um bloco centrado na janela, o que a encosta no
   menu em telas baixas; aqui ela é presa ao fim do cabeçalho, que dá a mesma
   posição numa janela de 900px de altura sem o risco. */
.buscaTopo__caixa {
	position: relative; width: min(100% - 48px, 760px); margin: var(--topo, 178px) auto 0;
}
.buscaTopo__fechar {
	position: absolute; right: -32px; bottom: calc(100% + 52px);
	width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
	background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.buscaTopo__fechar:hover { color: var(--laranja); }
.buscaTopo__form { display: flex; gap: 8px; height: 66px; }
.buscaTopo__form input[type="search"] {
	flex: 1; min-width: 0; height: 100%; background: #fff; border: 2px solid #cdcdcd;
	padding: 0 16px; font-family: inherit; font-size: 15px; color: var(--texto);
}
/* O campo abre já em foco; a borda laranja marca isso sem anel do navegador. */
.buscaTopo__form input[type="search"]:focus { outline: 0; border-color: var(--laranja); }
.buscaTopo__form .btn {
	flex: none; display: grid; place-items: center; border-radius: 0; padding: 0 24px; font-size: 16px;
}

@media (max-width: 1023px) {
	.buscaTopo__fechar { right: 0; bottom: calc(100% + 10px); }
	.buscaTopo__form { height: 52px; }
}

/* menu no celular */
.cab__hamburguer { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.cab__hamburguer svg { width: 26px; height: 26px; fill: currentColor; }

@media (max-width: 1023px) {
	.cab__topo .wrap { min-height: 0; padding-block: 10px; flex-wrap: wrap; justify-content: center; }
	.cab__contato { display: none; }
	.cab__hamburguer { display: block; }
	.cab__barra .wrap { justify-content: space-between; }
	.cab__nav {
		position: absolute; left: 0; right: 0; top: 100%; background: var(--azul);
		display: none; padding: 10px 20px 24px;
	}
	.cab__nav--dir { padding-top: 0; }
	.cab--aberto .cab__nav { display: block; }
	.cab__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.cab__menu > li > a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.cab__menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		background: transparent; padding: 0 0 8px 14px;
	}
	.cab__menu .sub-menu a { color: #cfe0ff; padding: 7px 0; }
	/* No celular o painel vira a lista das linhas, sem os itens de dentro:
	   com tudo aberto seriam quase cem links antes do conteúdo da página. */
	.mega {
		position: static; opacity: 1; visibility: visible; transform: none;
		background: transparent; box-shadow: none; border: 0;
	}
	.cab__barra .mega__grade { display: block; padding: 0 0 8px 14px; }
	.mega__bloco { margin: 0; }
	.mega__titulo { border: 0; padding: 0; font-size: 14px; }
	.mega__titulo a { color: #cfe0ff; display: block; padding: 7px 0; }
	.mega__itens { display: none; }
}

/* ================================================================= rodapé */

.rod { background: var(--azul); color: #fff; padding: 56px 0 0; }
.rod a { color: #fff; }
.rod__grade { display: grid; grid-template-columns: 1.2fr .9fr .9fr 1fr; gap: 40px; }
.rod__titulo { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.rod__lista { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 2; }
.rod__lista .sub-menu { list-style: none; margin: 0; padding-left: 14px; opacity: .85; }
.rod__marca { text-align: center; }
.rod__marca img { width: 210px; margin-bottom: 26px; }
.rod__selo { width: 120px !important; margin: 0 auto; }
.rod__contatos { font-size: 14px; display: grid; gap: 12px; }
.rod__contatos a { display: inline-flex; align-items: center; gap: 10px; }
.rod__contatos svg { width: 20px; height: 20px; fill: #fff; flex: none; }
.rod__redes { display: flex; gap: 14px; margin-top: 26px; }
.rod__redes a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; }
.rod__redes svg { width: 16px; height: 16px; fill: #fff; }
.rod__fim { margin-top: 48px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; font-size: 12px; letter-spacing: .04em; }

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

/* ============================================== botão flutuante WhatsApp */

.zap {
	position: fixed; right: 18px; bottom: 18px; z-index: 80;
	display: grid; place-items: center; width: 56px; height: 56px;
	background: #25d366; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.zap svg { width: 30px; height: 30px; fill: #fff; }

/* ================================================================ comuns */

.btn {
	display: inline-block; background: var(--laranja); color: #fff; font-size: 15px; font-weight: 500;
	padding: 12px 24px; border-radius: 3px; border: 0; cursor: pointer;
}
.btn:hover { background: var(--laranja-escuro); color: #fff; text-decoration: none; }
.btn--azul { background: var(--azul); }
.btn--azul:hover { background: var(--azul-claro); }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 10px; top: 10px; background: #fff; padding: 10px; z-index: 100; }

/* ========================================================= ficha do produto */

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding: 36px 0 50px; align-items: start; }
/* Sem isto, uma tabela larga estica a coluna e vaza a página no celular. */
.ficha__principal, .ficha__lado, .listagem__corpo > * { min-width: 0; }
.ficha__topo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin-bottom: 26px; }
.ficha__nome { font-size: 45px; line-height: 1.05; margin-bottom: 22px; }
.ficha__orcamento { font-size: 16px; padding: 13px 44px; }

.ficha__palco { background: var(--fundo-suave); display: grid; place-items: center; min-height: 320px; padding: 20px; }
.ficha__foto { margin: 0; display: none; }
.ficha__foto--ativa { display: block; }
.ficha__foto img { max-height: 340px; width: auto; margin-inline: auto; }
.ficha__miniaturas { display: flex; gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; flex-wrap: wrap; }
.ficha__miniaturas button { width: 64px; height: 64px; padding: 4px; background: #fff; border: 1px solid var(--linha); cursor: pointer; }
.ficha__miniaturas button.ativa { border-color: var(--laranja); }
.ficha__miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.ficha__catalogos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.btn--escuro { background: var(--cinza-topo); }
.btn--escuro:hover { background: #343434; }

.ficha__titulo { font-size: 20px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 14px; }
.ficha__secao, .ficha__descricao { margin-bottom: 32px; }
.texto { font-size: 15px; line-height: 1.75; color: var(--texto); }
.texto img { margin: 14px 0; }
.texto table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.texto th, .texto td { border: 1px solid var(--linha); padding: 8px 10px; text-align: left; }
.texto th { background: var(--fundo-suave); color: var(--azul); }

.certificacoes { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; }
.certificacoes img { width: 120px; }
.certificacoes span { display: block; font-size: 13px; margin-top: 6px; }

/* coluna lateral */
.ficha__lado { font-size: 13px; }
.ficha__ladoNome { color: var(--azul); font-weight: 700; font-size: 15px; margin: 0 0 14px; }
.ficha__video { margin-bottom: 18px; }
.video { position: relative; padding-top: 56.25%; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ficha__videoNome { font-size: 12px; color: var(--texto-fraco); margin: 6px 0 0; }

/* Capa do vídeo: o play abre a janela grande, sem sair da página. */
.video--capa { display: block; width: 100%; padding: 0; padding-top: 56.25%; border: 0; cursor: pointer; }
.video--capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 62px; height: 43px; background: rgba(0, 0, 0, .7); border-radius: 10px;
	transition: background .15s ease;
}
.video__play::after {
	content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-38%, -50%);
	border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.video--capa:hover .video__play, .video--capa:focus-visible .video__play { background: var(--laranja); }

/* A janela do vídeo: ocupa a tela, e o X por cima fecha e volta ao produto. */
.videoLuz { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 56px 20px 20px; }
.videoLuz[hidden] { display: none; }
.videoLuz__fundo { position: absolute; inset: 0; padding: 0; border: 0; background: rgba(0, 6, 20, .9); cursor: pointer; }
/* A largura também olha a altura da tela: numa janela baixa o vídeo encolhe
   em vez de empurrar o X para fora. */
.videoLuz__caixa { position: relative; width: min(100%, 1120px, calc((100vh - 160px) * 16 / 9)); }
.videoLuz__caixa .video { background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.videoLuz__fechar {
	position: absolute; top: -46px; right: -4px; width: 38px; height: 38px;
	display: grid; place-items: center; padding: 0;
	background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.videoLuz__fechar:hover { color: var(--laranja); }
.videoLuz__nome { margin: 12px 0 0; color: #fff; font-size: 14px; text-align: center; }

.abas__titulos { display: flex; }
.abas__titulos button {
	flex: 1; background: var(--fundo-suave); border: 0; padding: 10px 8px; cursor: pointer;
	font: 700 13px/1 var(--fonte); color: var(--azul);
}
.abas__titulos button.ativa { background: var(--azul); color: #fff; }
.abas__painel { display: none; list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-top: 0; }
.abas__painel.ativa { display: block; }
.abas__painel li + li { border-top: 1px solid var(--linha); }
.abas__painel a { display: block; padding: 9px 12px; color: var(--texto); }
.abas__painel a:hover { background: var(--fundo-suave); text-decoration: none; }
.abas__painel a.atual { color: var(--laranja); font-weight: 700; }
.abas__painel .vazio { padding: 9px 12px; color: var(--texto-fraco); }

.ficha__irmaos { margin-top: 26px; }
.ficha__ladoTitulo { color: var(--azul); font-weight: 700; text-transform: uppercase; font-size: 12px; margin: 0 0 8px; }
.ficha__irmaos ul { list-style: none; margin: 0; padding: 0; }
.ficha__irmaos a { display: block; padding: 7px 0; border-bottom: 1px solid var(--linha); color: var(--texto); font-size: 12px; text-transform: uppercase; }
.ficha__irmaos a.atual { color: var(--laranja); font-weight: 700; }

/* materiais — as duas faixas de pictogramas, medidas no site atual:
   painel cinza de ponta a ponta do contêiner, com os doze materiais base
   (e os dez tipos) numa linha só. */
.materiais { margin: 50px 0; }
.materiais__painel { background: #f0f0f0; padding: 50px 25px; }
.materiais__titulo {
	font-size: 18.72px; line-height: 1; font-weight: 600; color: var(--azul);
	text-transform: uppercase; margin: 0 0 20px;
}
.materiais__lista { display: flex; list-style: none; padding: 0; margin: 0; }
.materiais__item { width: 8.5%; padding: 5px; text-align: center; opacity: .25; }
.materiais__item--ativo { opacity: 1; }
.materiais__item img { width: 100%; }
.materiais__item span { display: block; font-size: 9px; line-height: 1.2; color: var(--texto-fraco); }
.materiais--tipos .materiais__item { width: 10%; }

.secao__titulo { font-size: 22px; text-transform: uppercase; margin-bottom: 18px; }

/* Nas telas estreitas o site atual quebra os materiais base em sete e depois
   em duas colunas; os tipos continuam numa linha só. */
@media (max-width: 960px) {
	.materiais--base .materiais__lista { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.materiais--base .materiais__item { width: auto; }
}
@media (max-width: 600px) {
	.materiais--base .materiais__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.materiais__painel { padding: 30px 15px; }
}

/* relacionados */
.relacionados { padding: 36px 0 60px; border-top: 1px solid var(--linha); }
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 1023px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grade { grid-template-columns: 1fr; } }
.card a { display: block; border: 1px solid var(--linha); padding: 16px; text-align: center; height: 100%; }
.card a:hover { border-color: var(--azul); text-decoration: none; }
.card img { margin-inline: auto; max-height: 150px; width: auto; }
.card__nome { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--azul); text-transform: uppercase; }

/* A fila de produtos relacionados: todos os cartões numa linha só, andando
   para o lado. As setas ficam por cima das pontas, dentro da largura do wrap. */
.carrossel { position: relative; }
.carrossel__trilho {
	display: flex; gap: 22px; list-style: none; padding: 0; margin: 0;
	overflow-x: auto; overscroll-behavior-x: contain;
	/* "proximity", não "mandatory": com quatro cartões à vista o fim da fila
	   não cai em cima de um ponto de encaixe, e o encaixe obrigatório puxaria
	   a fila de volta no meio do caminho. */
	scroll-snap-type: x proximity; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho > .card { flex: 0 0 calc((100% - 66px) / 4); scroll-snap-align: start; }
@media (max-width: 1023px) { .carrossel__trilho > .card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .carrossel__trilho > .card { flex-basis: 80%; } }
@media (prefers-reduced-motion: reduce) { .carrossel__trilho { scroll-behavior: auto; } }

.carrossel__seta {
	position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
	width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
	background: #fff; border: 1px solid var(--linha); color: var(--azul);
	cursor: pointer; box-shadow: 0 2px 12px rgba(0, 10, 30, .16);
}
.carrossel__seta[hidden] { display: none; }
.carrossel__seta:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.carrossel__seta--antes { left: -10px; }
.carrossel__seta--depois { right: -10px; }
.carrossel__seta span { width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.carrossel__seta--antes span { transform: rotate(-135deg); margin-left: 3px; }
.carrossel__seta--depois span { transform: rotate(45deg); margin-right: 3px; }
@media (max-width: 560px) { .carrossel__seta--antes { left: 0; } .carrossel__seta--depois { right: 0; } }

@media (max-width: 1023px) {
	.ficha { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.ficha__topo { grid-template-columns: 1fr; }
	.ficha__nome { font-size: 32px; }
}

/* ================================================================ listagem */

.listagem { padding: 34px 0 56px; }
.listagem__topo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; margin-bottom: 34px; }
.listagem__titulo { font-size: 45px; margin-bottom: 14px; }
.listagem__intro { font-size: 15px; color: var(--texto); max-width: 52ch; margin: 0; }

.buscaProduto__rotulo { display: block; color: var(--azul); font-weight: 700; font-size: 13px; text-transform: uppercase; text-align: right; margin-bottom: 10px; }
.buscaProduto__campo { display: flex; }
.buscaProduto__campo input[type="search"] {
	flex: 1; min-width: 0; border: 1px solid var(--linha); border-right: 0; padding: 11px 14px;
	font: 400 14px/1 var(--fonte); background: var(--fundo-suave);
}
.buscaProduto__campo .btn { display: grid; place-items: center; padding: 0 16px; border-radius: 0; }
.buscaProduto__campo .btn svg { width: 18px; height: 18px; fill: #fff; }

.listagem__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.listagem__lado { font-size: 13px; }
.grade--linhas .card a { padding: 20px; }
.grade--linhas .card img { max-height: 170px; }
.grade + .grade { margin-top: 30px; }

@media (max-width: 1023px) {
	.listagem__topo, .listagem__corpo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.buscaProduto__rotulo { text-align: left; }
	.listagem__titulo { font-size: 32px; }
}

/* ============================================================ home: banners */

.banners { position: relative; background: var(--azul); }
.banners__item { display: none; }
.banners__item.ativo { display: block; }
.banners__item img { width: 100%; }
.banners__pontos { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; }
.banners__pontos button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .55); cursor: pointer; padding: 0; }
.banners__pontos button.ativo { background: var(--laranja); }

/* home: bloco da marca */
/* A marca: foto em largura total, texto por cima, como no site atual. */
.marca { position: relative; min-height: clamp(460px, 70vw, 1010px); display: flex; align-items: flex-start; overflow: hidden; }
.marca__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.marca__grade { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; width: 100%; padding-top: 80px; }
.marca__texto { grid-column: 2; }
.marca__titulo { font-size: 36px; margin-bottom: 18px; }
.marca__texto p { font-size: 15px; line-height: 1.6; }
.marca__texto .btn { margin-top: 14px; }

/* ======================================================= infraestrutura */

.infra { background: var(--azul); color: #fff; padding: 0 0 56px; }
/* O cartão sobe sobre a foto da seção de cima. */
.infra__cartao {
	position: relative; margin-top: -100px; background: #d3d3d3; color: var(--azul);
	border-radius: 20px; padding: 50px 50px 110px; text-align: center;
}
.infra__titulo { color: var(--azul); font-size: 30px; line-height: 1.2; margin: 0; }
.infra__texto { margin: 16px auto 0; font-size: 15px; max-width: 62ch; }
.infra__cartao .btn { margin-top: 22px; }

/* E os círculos descem sobre o cartão. */
.infra__fila { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 16px; margin-top: -90px; }
.infra__cases { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; padding: 0; margin: 0; }
.infra__cases li { width: 175px; }
.infra__cases a { color: #fff; display: block; text-align: center; }
.infra__cases a:hover { text-decoration: none; }
.infra__circulo {
	display: block; width: 159px; height: 159px; margin: 0 auto; border-radius: 50%;
	overflow: hidden; border: 2px solid var(--anel, #00833b); background: var(--azul);
}
.infra__circulo img { width: 100%; height: 100%; object-fit: cover; }
.infra__circulo--1 { --anel: #00833b; }
.infra__circulo--2 { --anel: #911880; }
.infra__circulo--3 { --anel: #cd2653; }
.infra__circulo--4 { --anel: #006890; }
.infra__circulo--5 { --anel: #fdca2b; }
.infra__nome { display: block; margin-top: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.infra__mais {
	flex: none; display: grid; place-items: center; width: 80px; height: 80px; margin-top: 40px;
	border-radius: 50%; background: var(--laranja); color: #fff; font-size: 34px; font-weight: 300; line-height: 1;
}
.infra__mais:hover { text-decoration: none; filter: brightness(1.08); }

/* home: estrutura */
.estrutura { padding: 54px 0; }
.estrutura__grade { display: flex; justify-content: center; align-items: flex-start; gap: 46px; }
.estrutura__foto { margin: 0; max-width: 345px; }
.estrutura__foto img { width: 100%; height: auto; }
.estrutura__abas { display: grid; gap: 12px; }
.estrutura__botao {
	position: relative; display: flex; align-items: center; gap: 12px; width: 213px;
	padding: 11px 16px; background: var(--azul); color: #fff; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .55);
	font: 700 12px/1 var(--fonte); text-transform: uppercase; letter-spacing: .02em;
}
.estrutura__botao svg { flex: none; width: 22px; height: 22px; fill: #fff; }
.estrutura__botao span { flex: 1; text-align: center; }
.estrutura__botao:hover { background: #00306f; }
.janela__texto { font-size: 15px; line-height: 1.6; margin: 14px 0 0; }
.janela__caixa img { width: 100%; height: auto; }

/* home: aplicações */
.aplicacoes { padding-bottom: 54px; }
.aplicacoes__capa { position: relative; background: var(--cinza-topo); }
.aplicacoes__capa > img { width: 100%; height: 478px; object-fit: cover; }
.aplicacoes__sobre { position: absolute; inset: 0; display: flex; }
/* O painel atravessa a faixa de cima a baixo, como no site atual. */
.aplicacoes__painel {
	display: flex; flex-direction: column; justify-content: center;
	width: min(620px, 52%); padding: 50px; color: #fff; background: rgba(0, 34, 87, .6);
}
.aplicacoes__painel h2 { color: #fff; font-size: 30px; text-transform: uppercase; margin-bottom: 14px; }
.aplicacoes__painel p { font-size: 15px; line-height: 1.55; }

.aplicacoes__fila { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 16px; margin-top: -90px; padding-bottom: 20px; }
.aplicacoes__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; padding: 0; margin: 0; }
.aplicacoes__lista li { width: 175px; }
.aplicacoes__lista a { display: block; text-align: center; }
.aplicacoes__lista a:hover { text-decoration: none; }
.aplicacoes__nome { display: block; margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--azul); }

/* home: notícias e redes */
.noticias { background: var(--fundo-suave); padding: 54px 0; }
.noticias__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; list-style: none; padding: 0; margin: 0 0 26px; }
.noticias__lista a { position: relative; display: block; background: #fff; height: 100%; }
.noticias__lista img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.noticias__lista h3 { font-size: 17px; margin: 14px 16px 8px; }
.noticias__lista p { margin: 0 16px 16px; font-size: 14px; color: var(--texto); }
.noticias__mais { text-align: center; margin: 0; }
.redes { padding: 46px 0 60px; text-align: center; }
/* Os botões das redes ficam no bloco do fim desta folha. */

@media (max-width: 1023px) {
	/* Sem espaço para a foto ao lado, ela passa para cima do texto em vez de
	   ficar atrás dele — assim o texto não disputa leitura com a imagem. */
	.marca { display: block; min-height: 0; }
	.marca__fundo { position: static; height: clamp(220px, 46vw, 320px); }
	.marca__grade, .estrutura__grade { grid-template-columns: 1fr; gap: 26px; }
	.marca__grade { padding: 34px 0; }
	.marca__texto { grid-column: 1; }
	.marca__titulo { font-size: 28px; }
	.infra__cartao { margin-top: 0; padding: 34px 26px 100px; border-radius: 14px; }
	.infra__fila { margin-top: -80px; }
	.infra__titulo { font-size: 24px; }
	.noticias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aplicacoes__painel { width: 100%; padding: 30px 20px; }
	.aplicacoes__painel h2 { font-size: 24px; }
}
@media (max-width: 560px) {
	.marca__grade { padding: 28px 0; }
	.infra__fila { flex-direction: column; align-items: center; gap: 24px; }
	.infra__mais { margin-top: 0; }
	.noticias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aplicacoes__fila { flex-direction: column; align-items: center; gap: 24px; margin-top: -70px; }
}

/* ============================================================== aplicações */

.aplicacao { padding: 34px 0 56px; }
/* O texto de abertura fica estreito para leitura; o acordeão, não — ele
   ocupa a largura do conteúdo, como no site atual. */
.aplicacao__topo { margin-bottom: 30px; }
.aplicacao__topo > .texto > p { max-width: 90ch; }
.aplicacao__topo .dobras { max-width: 100%; }
.aplicacao__dica { margin-top: 16px; font-weight: 700; color: var(--azul); font-size: 14px; }
/* o balão do marcador pode encostar na borda: recorta sem criar rolagem */
/* Uma cena por vez, centralizada e grande — é assim que dá para enxergar os
   pontos sobre a foto, como no site atual. */
.cenas { overflow-x: clip; display: grid; gap: 50px; list-style: none; padding: 0; margin: 0 auto; max-width: 900px; }
.cena__quadro { position: relative; background: var(--fundo-suave); }
.cena__quadro img { width: 100%; }
.cena__marca { position: absolute; transform: translate(-50%, -50%); }
.cena__ponto {
	display: block; width: 18px; height: 18px; border-radius: 50%;
	background: var(--laranja); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.cena__ponto::after {
	content: ""; position: absolute; inset: -8px; border-radius: 50%;
	border: 2px solid var(--laranja); opacity: .5;
}
.cena__balao {
	position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
	background: var(--azul); color: #fff; font-size: 12px; line-height: 1.3; padding: 7px 10px;
	border-radius: 3px; max-width: min(220px, 60vw); width: max-content; text-align: center;
	opacity: 0; visibility: hidden; transition: .15s ease; pointer-events: none;
}
.cena__marca:hover .cena__balao, .cena__marca:focus .cena__balao { opacity: 1; visibility: visible; }
.aplicacao__usos { margin-top: 40px; }
.aplicacao__usos ul { columns: 2; font-size: 15px; }

@media (max-width: 1023px) { .cenas { gap: 34px; } }
@media (max-width: 560px) { .aplicacao__usos ul { columns: 1; } }

/* ============================================================ cases e blog */

.case { padding: 30px 0 18px; }
.case__local { color: var(--texto-fraco); font-size: 15px; margin: 0; }
.case__capa img { width: 100%; max-height: 460px; object-fit: cover; }
.case__corpo { padding: 0 0 56px; }
.case__abas { display: flex; margin: 26px 0 30px; }
.case__abas button {
	flex: 1; background: var(--azul); color: #fff; border: 0; padding: 14px 10px; cursor: pointer;
	font: 700 13px/1 var(--fonte); text-transform: uppercase; border-right: 1px solid rgba(255, 255, 255, .2);
}
.case__abas button:last-child { border-right: 0; }
.case__abas button.ativa { background: var(--laranja); }
.case__painel { display: none; }
.case__painel.ativa { display: block; }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.cases { padding: 34px 0 56px; }
.cases__topo { margin-bottom: 20px; text-align: center; }
.cases__topo .listagem__intro { margin-inline: auto; }
.cases__filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.cases__filtros button {
	background: #fff; border: 1px solid var(--azul); color: var(--azul); border-radius: 999px;
	padding: 7px 18px; font: 500 13px/1 var(--fonte); cursor: pointer;
}
.cases__filtros button.ativa { background: var(--azul); color: #fff; }
.cases__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; list-style: none; padding: 0; margin: 0; }
/* Cartão claro, com a etiqueta sobre a foto — como no site atual. */
.caseCard a {
	position: relative; display: block; background: #fff; color: var(--texto); height: 100%;
	border: 1px solid var(--linha); overflow: hidden;
}
.caseCard a:hover { text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.caseCard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.caseCard__etiqueta {
	position: absolute; top: 14px; left: 14px; z-index: 1;
	background: #fff; color: var(--azul); font-size: 12px; font-weight: 500;
	padding: 5px 14px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.caseCard__data { display: block; margin: 16px 18px 8px; font-size: 13px; color: var(--texto-fraco); }
.caseCard__nome { color: var(--azul); font-size: 19px; line-height: 1.25; margin: 0 18px 10px; }
.caseCard__mais { display: inline-block; margin: 0 18px 20px; font-size: 14px; font-weight: 700; color: var(--azul); }
.caseCard--oculto { display: none; }

.noticias__lista--arquivo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.noticias__lista--arquivo .caseCard__data { color: var(--texto-fraco); margin: 12px 16px 4px; opacity: 1; }
.noticias__lista--arquivo h2 { font-size: 17px; margin: 0 16px 8px; }

.artigo { padding: 34px 0 60px; max-width: 820px; }
.artigo__capa { margin: 0 0 24px; }
.artigo__texto { font-size: 16px; }
.pagina { padding: 34px 0 60px; }

.representantes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; padding: 0; margin: 0; }
.representante { border: 1px solid var(--linha); padding: 18px; }
.representante__estado { font-size: 17px; margin-bottom: 8px; }
.representante .texto { font-size: 14px; }

@media (max-width: 1023px) {
	.cases__lista, .noticias__lista--arquivo, .representantes, .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.cases__lista, .noticias__lista--arquivo, .representantes, .galeria { grid-template-columns: 1fr; }
	.case__abas { flex-direction: column; }
}

/* ================================================= páginas institucionais */

/* A seção não tem recuo próprio: no layout antigo todo o respiro vem da
   camada interna da coluna, e é ela que o conteúdo já traz. */
.bloco { background-size: cover; background-position: center; }
/* Fundo e gradiente vêm do próprio conteúdo (atributo style); o bloco só
   precisa ocupar a largura toda da tela, como no site atual. */
/* Bloco pintado ou marcado como largo atravessa a tela inteira, como no
   site atual — o conteúdo dentro continua na largura do site. */
/* Só o bloco pintado atravessa a tela: o "largo" do Elementor apenas tira o
   respiro, o conteúdo continua na largura do site. */
.bloco--fundo {
	/* Estica até as bordas da tela sem usar 100vw, que conta a barra de
	   rolagem e faz a página vazar para o lado. */
	margin-inline: calc(50% - 50vw); padding-block: 0;
}
.bloco--fundo > .bloco__grade {
	width: min(100% - 48px, var(--largura-bloco, var(--largura-padrao))); margin-inline: auto;
}
.bloco--meio .bloco__grade { align-items: center; }
.bloco--fundo .bloco__titulo, .bloco--fundo h1, .bloco--fundo h2, .bloco--fundo h3 { color: #fff; }
/* O Elementor separa colunas por recuo, não por espaço entre caixas — com
   espaço, as larguras em porcentagem não fecham a linha e quebram. */
/* Cada bloco tem a largura que a seção do layout antigo declarava; sem
   declaração, a largura padrão do Elementor. É o que mantém as tarjas na
   mesma medida do site atual. */
.bloco__grade {
	width: min(100% - 48px, var(--largura-bloco, var(--largura-padrao))); margin-inline: auto;
	/* Colunas da mesma linha têm a mesma altura, como no layout antigo. */
	display: flex; flex-wrap: wrap; align-items: stretch;
}
.bloco__coluna { flex: 1 1 0; min-width: min(100%, 240px); box-sizing: border-box; }
/* Seção dentro de coluna ocupa a caixa inteira dela, sem nova margem lateral:
   é assim que o layout antigo encaixa as linhas internas. */
.bloco__dentro .bloco:not(.bloco--fundo) > .bloco__grade { width: 100%; }
/* O layout antigo separa cada peça da coluna por 20px e deixa os parágrafos
   sem margem própria: é dessa separação que vem o respiro da página. */
.bloco__dentro > * { margin-block: 0; }
.bloco__dentro > *:not(:last-child) { margin-bottom: 20px; }
/* A camada interna da coluna é quem recebe fundo, margem e recuo — como no
   Elementor. A coluna fica só com a largura. */
/* O fundo pintado ocupa a coluna inteira; o recuo é o respiro do layout
   antigo, que o conteúdo sobrescreve quando a coluna declarava o seu. */
.bloco__dentro { height: 100%; padding: var(--gap, 10px); box-sizing: border-box; }
.bloco__dentro--escuro, .bloco__dentro--escuro h1, .bloco__dentro--escuro h2,
.bloco__dentro--escuro h3, .bloco__dentro--escuro p { color: #fff; }
/* Quando o layout antigo definia a largura da coluna, ela é respeitada. */
.bloco__coluna[style*="--largura"] {
	flex-basis: var(--largura); flex-grow: 0;
	/* sem piso de largura: as sete colunas de 14% precisam caber numa linha */
	min-width: 0;
}
.bloco__coluna > *:first-child { margin-top: 0; }
/* Mesma tipografia do site atual: título de 24px e texto de 16px com
   entrelinha natural. O tamanho declarado em cada título vem no próprio
   conteúdo e passa por cima daqui. */
.bloco__titulo { font-size: 24px; line-height: 1.1; margin-bottom: 14px; }
.bloco__coluna p { font-size: 16px; line-height: normal; }
.bloco__figura { margin: 0 0 16px; }
.bloco__figura img { max-width: 100%; height: auto; }
/* Imagem centralizada pelo layout antigo fica centralizada de verdade. */
.bloco__figura[style*="center"] img { margin-inline: auto; display: block; }
.bloco__figura[style*="right"] img { margin-left: auto; display: block; }
.bloco__galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.bloco__lista { padding-left: 18px; font-size: 15px; line-height: 1.9; }
.caixa { text-align: center; }
/* A imagem do cartão é bloco (como todas), então o text-align não a alcança:
   sem isto o ícone fica encostado à esquerda do cartão centralizado. */
.caixa .bloco__figura img { margin-inline: auto; }
.caixa h3 { font-size: 17px; margin: 20px 0 20px; }
.caixa p { font-size: 16px; line-height: normal; margin: 0; }
.caixa a { color: inherit; }
/* Acordeão no desenho do site atual: linhas com borda e um "+" à esquerda
   que vira "−" quando a dobra abre. */
.dobras { border: 1px solid var(--linha); margin: 10px 0 26px; }
.dobra + .dobra { border-top: 1px solid var(--linha); }
.dobra summary {
	display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
	padding: 16px 20px; font-weight: 700; color: var(--azul); font-size: 15px;
}
.dobra summary::-webkit-details-marker { display: none; }
.dobra summary::before { content: "+"; color: var(--laranja); font-size: 20px; line-height: 1; width: 14px; }
.dobra[open] summary::before { content: "–"; }
.dobra[open] summary { color: var(--laranja); }
.dobra summary:hover { background: var(--fundo-suave); }
.dobra__corpo { padding: 0 20px 18px 46px; font-size: 15px; line-height: 1.7; color: var(--texto-fraco); }
.dobra__corpo p:last-child { margin-bottom: 0; }
.mapa { position: relative; padding-top: 52%; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ============================================================ formulários */

.form { max-width: 640px; margin: 36px 0 0; display: grid; gap: 16px; }
.form__titulo { font-size: 22px; margin: 0; }
.form__campo { display: grid; gap: 6px; }
.form__campo label, .form__rotulo { font-size: 14px; font-weight: 700; color: var(--azul); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
	border: 1px solid var(--linha); padding: 11px 13px; font: 400 15px/1.4 var(--fonte);
	background: #fff; width: 100%;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--laranja); outline-offset: 1px; }
.form__opcoes { display: flex; gap: 20px; font-size: 15px; font-weight: 400; }
.form__opcoes label { font-weight: 400; display: inline-flex; gap: 7px; align-items: center; }
.form__aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texto); }
.form__aceite input { margin-top: 3px; }
.form__oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form__aviso { padding: 12px 14px; font-size: 14px; margin: 0; border-left: 4px solid; }
.form__aviso--ok { background: #eef7ee; border-color: #2e7d32; color: #1b5e20; }
.form__aviso--erro { background: #fdeeee; border-color: #c62828; color: #8e1c1c; }
.form small { font-weight: 400; color: var(--texto-fraco); font-size: 12px; }

/* ===================================================== janelas (pop-ups) */

.janela { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.janela[hidden] { display: none; }
.janela__fundo { position: absolute; inset: 0; background: rgba(0, 10, 30, .62); }
.janela__caixa {
	position: relative; background: #fff; width: min(100%, 560px); max-height: 88vh; overflow: auto;
	padding: 30px 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.janela__fechar {
	position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px;
	line-height: 1; color: var(--texto-fraco); cursor: pointer;
}
.janela__titulo { font-size: 22px; margin: 0 0 6px; }
.janela__produto { margin: 0 0 16px; font-size: 14px; color: var(--texto-fraco); }
.formRd { margin-top: 10px; }
.formRd input[type="text"], .formRd input[type="email"], .formRd input[type="tel"], .formRd textarea, .formRd select {
	font-family: var(--fonte);
}

/* ==================================================================== busca */

.busca__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.busca__lista a { display: block; padding: 14px 16px; background: var(--fundo-suave); }
.busca__lista a:hover { background: #eef1f6; text-decoration: none; }
.busca__lista strong { display: block; color: var(--azul); font-size: 16px; }
.busca__lista span { display: block; font-size: 14px; color: var(--texto); margin-top: 4px; }

/* dois caminhos na ficha: orçamento e compra online */
.ficha__acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.ficha__acoes .btn { display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 1.2; }
.ficha__orcamento { font-size: 16px; padding: 13px 28px; }
.ficha__comprar { font-size: 16px; padding: 10px 28px; }
.ficha__comprarNota { display: block; font-size: 11px; font-weight: 400; opacity: .85; margin-top: 3px; }

/* ======================================================== tabela técnica */

.tabela__rolagem { overflow-x: auto; }
.tabela__dados { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela__dados th, .tabela__dados td { border: 1px solid var(--linha); padding: 9px 12px; text-align: left; white-space: nowrap; }
.tabela__dados thead th { background: var(--azul); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.tabela__dados tbody tr:nth-child(even) { background: var(--fundo-suave); }
.tabela__dados tbody tr:hover { background: #eef3fb; }
.tabela__marcar { width: 42px; text-align: center !important; }
.tabela__marcar input { width: 18px; height: 18px; cursor: pointer; }
.tabela__acao {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	margin-top: 16px; padding: 14px 16px; background: var(--fundo-suave); border-left: 4px solid var(--laranja);
}
.tabela__acao[hidden] { display: none; }
.tabela__resumo { margin: 0; font-size: 14px; color: var(--azul); font-weight: 700; }
.janela__itens { background: var(--fundo-suave); padding: 10px 12px; font-size: 13px; margin: 0 0 14px; }
.janela__itens ul { margin: 6px 0 0; padding-left: 18px; }
.tabela__nome { font-size: 15px; color: var(--azul); margin: 18px 0 8px; text-transform: none; }
.tabela__rolagem + .tabela__rolagem { margin-top: 10px; }
.tabela__nota { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--texto-fraco); }

/* ===================================== descrições, busca e paginação das listas */

/* A grade de linhas traz a descrição da categoria, como no site atual. */
.card__resumo { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--texto); text-transform: none; font-weight: 400; }
.listagem__catalogos { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.btn--linha { font-size: 12px; padding: 9px 16px; }

/* Resumo nos cartões de case e de notícia. */
.caseCard__resumo { display: block; margin: 0 18px 14px; font-size: 14px; line-height: 1.55; color: var(--texto-fraco); }
.noticias__lista--arquivo p { margin: 0 16px 10px; }
.noticias__lista--arquivo .caseCard__etiqueta { top: 12px; left: 12px; }
.noticias__lista--arquivo .caseCard__mais { margin: 0 16px 16px; }

/* Busca das notícias: mesmo desenho da busca de produto. */
.busca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.busca input[type="search"] {
	flex: 1; min-width: 0; border: 1px solid var(--linha); border-right: 0;
	padding: 11px 14px; font: 400 14px/1 var(--fonte);
}
.busca .btn { border-radius: 0; padding: 11px 18px; }
.busca__limpar { font-size: 13px; color: var(--texto-fraco); }

.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 34px 0 0; }
.paginacao a, .paginacao span {
	min-width: 38px; padding: 9px 12px; text-align: center; font: 700 13px/1 var(--fonte);
	border: 1px solid var(--linha); color: var(--azul);
}
.paginacao a:hover { border-color: var(--azul); text-decoration: none; }
.paginacao .ativa { background: var(--azul); border-color: var(--azul); color: #fff; }

@media (max-width: 700px) {
	.busca { width: 100%; }
	.paginacao a, .paginacao span { min-width: 34px; padding: 8px 10px; }
}

/* ============================== redes sociais e newsletter da página inicial */

/* Botões com o nome do perfil, nas cores de cada rede. */
.redes__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 22px; }
.redes__botao {
	display: flex; align-items: center; gap: 10px; min-width: 190px; justify-content: center;
	padding: 11px 18px; color: #fff; font: italic 700 16px/1 var(--fonte);
}
.redes__botao:hover { text-decoration: none; filter: brightness(1.08); }
.redes__botao svg { width: 22px; height: 22px; fill: #fff; }
.redes__botao--facebook { background: #4267b2; }
.redes__botao--instagram { background: linear-gradient(90deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.redes__botao--linkedin { background: #0077b5; }
.redes__botao--youtube { background: #494949; }

.novidades { padding: 46px 0 56px; }

@media (max-width: 860px) {
	.redes__botao { min-width: 0; flex: 1 1 45%; font-size: 14px; }
}

/* ===================================== grade das aplicações (página própria) */

.aplicGrade { background: var(--fundo-suave); padding: 40px 0 56px; margin-top: 34px; }
.aplicGrade__titulo { text-align: center; font-size: 30px; font-style: italic; color: var(--azul); margin-bottom: 30px; }
.aplicGrade__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; list-style: none; padding: 0; margin: 0; }
.aplicGrade__lista a { display: block; background: #fff; height: 100%; padding-bottom: 18px; }
.aplicGrade__lista a:hover { text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .1); }
.aplicGrade__lista img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.aplicGrade__lista h3 {
	font-size: 18px; font-style: italic; text-transform: uppercase; text-align: center;
	color: var(--azul); margin: 18px 16px 10px;
}
.aplicGrade__mais { display: block; text-align: center; font-size: 14px; font-style: italic; font-weight: 700; color: var(--azul); }

@media (max-width: 1023px) { .aplicGrade__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aplicGrade__lista { grid-template-columns: 1fr; } }

/* ============================================================ representantes */

.reps { padding: 34px 0 60px; }
.reps__grade {
	position: relative; display: grid; gap: 40px; align-items: start;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Faixa cinza atravessando a página, como no site atual: ela sai da largura
   do conteúdo e vai de ponta a ponta, com o mapa por cima. Acompanha a coluna
   de texto inteira e sobra um pouco embaixo. */
.reps__faixa {
	position: absolute; left: 50%; top: 0; bottom: -40px; width: 100vw;
	margin-left: -50vw; background: #d4d4d4; z-index: 0;
}
.reps__coluna { position: relative; z-index: 1; }
/* O mapa fica no meio da faixa e passa por cima dela. Fora do fluxo da grade,
   a altura da faixa depende só do texto — o mapa não a estica. */
.reps__mapa {
	position: absolute; right: 0; top: calc(50% + 20px);
	transform: translateY(-50%);
	width: calc(50% - 20px); margin: 0; z-index: 1;
}
.reps__intro { font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.reps__selecao {
	width: 100%; max-width: 380px; padding: 12px 14px; font: 400 15px/1.2 var(--fonte);
	border: 1px solid var(--linha); background: #fff; color: var(--texto);
}
.reps__cartoes { margin-top: 22px; display: grid; gap: 16px; }
.reps__cartao { border: 1px solid var(--linha); padding: 20px; max-width: 380px; }
.reps__cartao[hidden] { display: none; }
.reps__estado { font-size: 18px; color: var(--azul); margin: 0 0 10px; }
.reps__cartao .texto { font-size: 15px; line-height: 1.6; }
/* Cartão montado a partir dos campos: o mesmo corpo de texto do conteúdo
   antigo, para o cartão não mudar de cara ao ser preenchido. */
.reps__representacao { font-size: 15px; line-height: 1.6; }
.reps__representacao + .reps__representacao {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--linha);
}
.reps__representacao p { margin: 0 0 2px; }
.reps__nome { color: var(--azul); }
.reps__regioes { color: var(--cinza, #555); }
.reps__linha a { color: var(--texto); }
.reps__whats {
	display: inline-flex;
	margin-top: 8px;
	padding: 7px 14px;
	border-radius: 5px;
	background: #28a745;
	color: #fff !important;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.reps__canais { margin-top: 26px; font-size: 15px; }
.reps__contatos { margin-top: 10px; }
.reps__contatos a { color: var(--texto); }
.reps__contatos svg { fill: var(--azul); }
.reps__mapa img { display: block; width: 100%; max-width: 520px; height: auto; margin-left: auto; }

@media (max-width: 860px) {
	.reps__grade { grid-template-columns: 1fr; }
	/* Empilhado, o mapa volta para o fluxo e a faixa fica como era. */
	.reps__faixa { top: 40px; bottom: auto; height: 250px; }
	.reps__mapa { position: static; width: auto; transform: none; order: -1; }
	.reps__mapa img { margin-right: auto; }
}

/* ============== blocos que vieram com classe própria do site antigo */

/* A caixa cinza das aplicações: o shortcode antigo trazia estas classes. */
.walsywa-section { background: var(--fundo-suave); padding: 34px 26px 44px; margin: 10px 0 30px; }
.walsywa-section .section-title {
	text-align: center; font-size: 30px; font-style: italic; color: var(--azul); margin: 0 0 28px;
}
.walsywa-section .aplicGrade__lista { margin: 0; }

/* Colunas e caixas que o Elementor pintava: a cor vem no próprio atributo
   style; aqui só entram o espaçamento e a cor do texto por cima. */
.bloco__coluna--fundo { padding: 26px; }
.bloco__coluna--escuro, .bloco__coluna--escuro h1, .bloco__coluna--escuro h2,
.bloco__coluna--escuro h3, .bloco__coluna--escuro p { color: #fff; }
.caixa--fundo { padding: 24px; height: 100%; }
.caixa--escuro, .caixa--escuro h3, .caixa--escuro p { color: #fff; }
.bloco--escuro, .bloco--escuro h1, .bloco--escuro h2, .bloco--escuro h3 { color: #fff; }

/* A reserva do formulário do RD ocupa a mesma largura do bloco que substitui. */
.formRd__reserva .form { margin-inline: auto; }

/* O formulário da faixa da newsletter é desenhado no RD, e de lá ele vem
   colado no alto e na beirada da caixa azul. Aqui entra o mesmo respiro de
   30px da coluna do texto, dos quatro lados. O RD escreve as medidas dele
   por id — que muda a cada versão do formulário —, daí o !important. */
.novidades .formRd .rd-form { padding: 30px 25px 10px !important; }

/* Na faixa da newsletter o formulário é baixo: título em cima, nome e e-mail
   lado a lado e o botão no fim da linha, como na faixa do site atual. */
.novidades .form { max-width: 920px; margin-inline: auto; }
.novidades .form__titulo { text-align: center; }
@media (min-width: 720px) {
	.novidades .form {
		display: grid; align-items: end; column-gap: 16px;
		grid-template-columns: 1fr 1fr auto;
	}
	.novidades .form__titulo,
	.novidades .form__aviso,
	.novidades .form__campo--checkbox { grid-column: 1 / -1; }
	.novidades .form__campo { margin-bottom: 0; }
	.novidades .form__enviar,
	.novidades .form button[type="submit"] { white-space: nowrap; }
}

/* Página montada por blocos: a largura é de cada bloco, não do contêiner. */
.pagina--blocos { padding: 0 0 60px; }

/* No celular o layout antigo empilha todas as colunas, qualquer que seja a
   fração que elas tenham no computador. */
@media (max-width: 767px) {
	.bloco__coluna, .bloco__coluna[style*="--largura"] { flex-basis: 100%; }
}