/* Lumini Theme — folha própria, sem herança do dkx-theme. */

/*
 * Tokens extraídos do kit de design "Klay" (Elementor, templates/global.json)
 * — só o sistema (cor, tipografia, espaçamento de botão), não as imagens de
 * demonstração do nicho de cerâmica, que não usamos.
 */
:root{
	--lm-bg:#FFFFFF;
	--lm-bg-alt:#FFF9F3;
	--lm-ink:#000000;
	--lm-muted:#4A4A4A;
	--lm-line:#E7E1D8;
	--lm-accent:#3A5159;
	--lm-white:#FFFFFF;
	--lm-radius:0px;
	/* Cor de borda do .lm-card — tom sóbrio, versão mais clara do teal da paleta (#2C3F48), pra não pesar em muitos cards repetidos. */
	--lm-card-border:#B7C2C6;
	--lm-card-padding:clamp(2rem,4vw,2.5rem);
	--lm-shell:1220px;
	--lm-gutter:clamp(1.15rem,4vw,2.5rem);
	--lm-section:clamp(3.5rem,7vw,6rem);
	/* Corpo de texto: fonte de sistema (neutra, leve, sem carregar peso extra). */
	--lm-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	/*
	 * Jost via Google Fonts — substituta temporária da Quiche Sans, fonte
	 * oficial da marca Lumini, até a compra da licença web (o arquivo que
	 * temos dela hoje é só demo/trial, sem uso permitido em produção).
	 */
	--lm-font-display:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
/*
 * Rede de segurança contra scroll horizontal indevido: os blocos full-bleed
 * (hero, galeria) já usam 100vw + margin negativo pra sair do .lm-shell de
 * propósito, então cortar no body/html (não no elemento full-bleed, que
 * precisa ficar visível) é o jeito certo de garantir que nenhum arredondamento
 * de vw ou embed de terceiro (iframe do mapa) empurre a barra de rolagem.
 */
body{margin:0;background:var(--lm-bg);color:var(--lm-muted);font-family:var(--lm-font);line-height:1.7;font-size:.95rem;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,h5{font-family:var(--lm-font-display);font-weight:500;line-height:1.25;margin:0 0 .5em;color:var(--lm-ink);letter-spacing:0}
h1{font-size:clamp(2.4rem,1.5rem + 3.6vw,4.1rem);line-height:1.15}
h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.5rem)}
h3{font-size:1.4rem;margin-bottom:.4em}
h4{font-size:1.15rem}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.lm-shell{width:100%;max-width:var(--lm-shell);margin-inline:auto;padding-inline:var(--lm-gutter)}
.lm-section{padding-block:var(--lm-section)}
/* Variante com menos respiro vertical — blocos de transição/texto curto (ex.: descrição do produto), que não precisam do mesmo espaço de uma seção cheia. */
.lm-section--compacta{padding-block:clamp(2rem,4vw,3rem)}
.lm-section--alt{background:var(--lm-bg-alt)}
.lm-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--lm-font-display);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--lm-accent);margin-bottom:1em}
.lm-diamond{flex-shrink:0;color:#DFB22B}
.lm-lead{font-size:1.05rem;color:var(--lm-muted);max-width:60ch}
/* Destaque de texto em título — dourado da marca, não o teal (lia como um verde estranho). */
.lm-hl{color:#DFB22B}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lm-skip{position:absolute;left:-999px;top:0;background:var(--lm-ink);color:#fff;padding:.75rem 1.25rem;z-index:200}
.lm-skip:focus{left:0}

/* Botões — mesmo princípio do kit: sem preenchimento, borda de 1px, cantos retos */
/*
 * Padding igual nos 4 lados em todas as variantes — antes o horizontal era
 * bem maior que o vertical (ex.: .95rem/2rem) e o botão ficava com cara de
 * faixa achatada. Cada variante usa o próprio valor vertical, replicado
 * também nas laterais.
 */
.lm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
	padding:.95rem;border-radius:0;font-family:var(--lm-font);font-weight:600;font-size:.82rem;
	letter-spacing:.04em;text-transform:uppercase;
	text-decoration:none;border:1px solid var(--lm-ink);background:transparent;color:var(--lm-ink);
	transition:background .18s ease,color .18s ease;cursor:pointer}
.lm-btn--primary{background:var(--lm-ink);color:#fff}
.lm-btn--primary:hover{background:transparent;color:var(--lm-ink)}
.lm-btn--ghost{background:transparent;color:var(--lm-ink);border-color:var(--lm-line)}
.lm-btn--ghost:hover{border-color:var(--lm-ink)}
.lm-btn--outline{background:transparent;color:var(--lm-ink);border-color:var(--lm-ink);padding:.75rem}
.lm-btn--outline:hover{background:var(--lm-ink);color:#fff}
.lm-btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);padding:.95rem}
.lm-btn--outline-light:hover{background:#fff;color:var(--lm-ink)}

/*
 * CTA "Solicitar Orçamento" (header + hero) — pulso discreto de repouso pra
 * chamar atenção sem irritar, e um efeito de vidro (blur + brilho
 * deslizante). .lm-btn--pulse soma o pulso de repouso; .lm-btn--shine é só
 * o vidro no hover, pros CTAs que não precisam do pulso (ex.: CTA final,
 * que já tem ênfase própria por estar sozinho num bloco de fundo escuro).
 */
.lm-btn--pulse,
.lm-btn--shine{position:relative;overflow:hidden;isolation:isolate}
.lm-btn--pulse::before,
.lm-btn--shine::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
	transform:translateX(-130%);
	transition:transform .7s ease;
}
.lm-btn--pulse:hover,
.lm-btn--shine:hover{
	background:rgba(0,0,0,.55);
	color:#fff;
	border-color:rgba(255,255,255,.4);
	backdrop-filter:blur(8px) saturate(160%);
	-webkit-backdrop-filter:blur(8px) saturate(160%);
}
.lm-btn--pulse:hover::before,
.lm-btn--shine:hover::before{transform:translateX(130%)}
.lm-btn--pulse{animation:lm-pulse-ring 2.4s ease-in-out infinite}
.lm-btn--pulse:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
	.lm-btn--pulse{animation:none}
	.lm-btn--pulse::before,
	.lm-btn--shine::before{display:none}
}
@keyframes lm-pulse-ring{
	0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.22)}
	50%{box-shadow:0 0 0 9px rgba(0,0,0,0)}
}

.lm-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;text-decoration:none;color:var(--lm-ink);border-bottom:1px solid var(--lm-ink);padding-bottom:2px}
.lm-link:hover{color:var(--lm-muted);border-color:var(--lm-muted)}

/*
 * .lm-card — quadro reutilizável pra manter consistência em todo bloco com
 * card/quadro (credibilidade, produtos, como funciona, por que escolher,
 * depoimentos, galeria): contorno simples e plano, sem sombra nem elevação.
 * Borda fina sólida, cantos retos, fundo claro, padding generoso.
 * Cards com foto (produto, galeria) zeram o padding pra a imagem sangrar
 * até a borda — o texto abaixo tem o próprio respiro (.lm-card__body).
 */
.lm-card{
	border:1px solid var(--lm-card-border);
	border-radius:var(--lm-radius);
	background:var(--lm-bg);
	box-shadow:none;
	padding:var(--lm-card-padding);
}
.lm-card--flush{padding:0}
.lm-card__body{padding:1.5rem var(--lm-card-padding) var(--lm-card-padding)}

/*
 * Header — fino, editorial: barra recuada das bordas (não ocupa 100% da
 * largura), flutuando sobre a imagem de fundo da hero com respiro visível
 * até a borda da janela — não é mais um filete grudado na borda.
 */
/*
 * position:fixed (não sticky): sticky ainda reserva o próprio espaço no
 * fluxo normal do documento, e era isso que deixava uma faixa sólida (o
 * fundo da página, não a foto) entre o topo real da janela e a barra do
 * menu. Fixed tira o header do fluxo — a .lm-hero, primeiro elemento
 * dentro de <main>, passa a começar em y=0 e a foto cobre até o topo.
 * Páginas sem hero recebem padding-top em <main> pra compensar (ver
 * `main:has(> .lm-hero)` logo abaixo).
 */
.lm-header{
	position:fixed;
	top:clamp(.75rem,2vw,1.5rem);
	left:0;
	right:0;
	z-index:60;
	width:calc(100% - 2 * var(--lm-gutter));
	max-width:var(--lm-shell);
	margin-inline:auto;
	background:var(--lm-bg);
	box-shadow:0 8px 30px rgba(0,0,0,.1);
}
.lm-header__inner{display:flex;align-items:center;gap:2.5rem;min-height:64px;padding-inline:clamp(1.25rem,3vw,2rem)}
#lm-main{display:block}
#lm-main:not(:has(> .lm-hero)){padding-top:6.5rem}
.lm-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.lm-brand img{height:32px;width:auto}
.custom-logo-link{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.custom-logo{height:34px;width:auto;display:block}
.lm-brand--word{font-family:var(--lm-font-display);font-size:1.4rem;font-weight:500;letter-spacing:.02em;color:var(--lm-ink)}
.lm-nav{margin-left:auto;display:flex}
.lm-nav ul{display:flex;gap:2.75rem;align-items:center}
.lm-nav li{position:relative}
/* Hover animado: sublinhado dourado desliza da esquerda pra direita, não é só troca de cor. */
.lm-nav a{position:relative;text-decoration:none;font-weight:500;font-size:.92rem;letter-spacing:.01em;color:var(--lm-ink);padding-bottom:2px}
.lm-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#DFB22B;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.lm-nav a:hover{color:var(--lm-ink)}
.lm-nav a:hover::after{transform:scaleX(1)}

/*
 * Mega-menu de "Serviços" — painel abre abaixo do item ao passar o mouse
 * (CSS :hover cobre o caso simples; o JS em main.js só adiciona um delay
 * pra não fechar quando o cursor atravessa o vão entre o link e o painel).
 */
.lm-nav__item--mega{position:static}
.lm-megamenu{
	position:absolute;
	top:100%;
	left:50%;
	transform:translate(-50%,8px);
	margin-top:.75rem;
	width:min(760px,92vw);
	background:#fff;
	border:1px solid var(--lm-line);
	box-shadow:0 18px 40px rgba(0,0,0,.12);
	padding:1.25rem;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .22s ease,transform .22s ease;
	z-index:70;
}
.lm-nav__item--mega:hover .lm-megamenu,
.lm-megamenu.is-open{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translate(-50%,0);
}
.lm-megamenu__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.35rem 1.5rem}
.lm-megamenu__item{display:flex;align-items:center;gap:.75rem;padding:.5rem;text-decoration:none;color:var(--lm-ink);font-size:.88rem;font-weight:500;transition:background .15s ease}
.lm-megamenu__item:hover{background:var(--lm-bg-alt)}
.lm-megamenu__item img{width:52px;height:52px;object-fit:cover;flex-shrink:0;border:1px solid var(--lm-card-border)}
/*
 * Tablet (861px-1024px, entre o menu mobile e o desktop cheio): o painel
 * ancorado em left:0 relativo ao próprio link "Serviços" ficava cortado na
 * borda direita da tela, dependendo de onde esse link cai no header (2ª
 * coluna inacessível). position:fixed + centralizado na VIEWPORT (não mais
 * relativo ao link) resolve — sempre cabe, não importa a largura do menu.
 */
@media (max-width:1024px){
	.lm-megamenu{
		position:fixed;
		top:calc(clamp(.75rem,2vw,1.5rem) + 64px + 14px);
		left:50%;
		transform:translate(-50%,8px);
		margin-top:0;
		width:min(640px,92vw);
		max-height:calc(100vh - 120px);
		overflow-y:auto;
	}
	.lm-megamenu__grid{grid-template-columns:1fr 1fr}
	.lm-nav__item--mega:hover .lm-megamenu,
	.lm-megamenu.is-open{transform:translate(-50%,0)}
}
.lm-header__cta{margin-left:.5rem;flex-shrink:0}
.lm-burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--lm-line);border-radius:0;background:#fff;position:relative}
.lm-burger span,.lm-burger span::before,.lm-burger span::after{content:"";position:absolute;left:11px;right:11px;height:1px;background:var(--lm-ink);transition:transform .2s}
.lm-burger span{top:20px}
.lm-burger span::before{top:-6px}
.lm-burger span::after{top:6px}
@media (max-width:860px){
	.lm-nav{position:fixed;inset:64px 0 0 0;background:#fff;flex-direction:column;padding:2rem var(--lm-gutter);transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:.2s}
	.lm-nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
	.lm-nav ul{flex-direction:column;align-items:flex-start;gap:1.5rem}
	.lm-burger{display:block}
	.lm-header__cta{display:none}
	/*
	 * No menu mobile (lista vertical em tela cheia) o mega-menu vira um
	 * bloco normal, sempre visível abaixo do link — sem hover em touch,
	 * fica melhor assim do que escondido atrás de um :hover que não existe.
	 */
	/* visibility/pointer-events só ligam com o menu aberto: fechado, o painel invisível ocupa a tela toda e roubava o toque das fotos e dos botões da página. */
	.lm-megamenu{position:static;opacity:1;visibility:hidden;pointer-events:none;transform:none;box-shadow:none;border:0;border-top:1px solid var(--lm-line);width:auto;margin:1rem 0 0}
	.lm-nav.is-open .lm-megamenu{visibility:visible;pointer-events:auto}
	.lm-megamenu__grid{grid-template-columns:1fr}
}

/* Hero — foto de fundo em largura e altura cheias, texto sobreposto */
.lm-hero{
	/*
	 * O flex centraliza o texto na altura do próprio container. Sem o
	 * padding-top, isso centralizava relativo aos 100vh inteiros — como o
	 * header é fixo e sobrepõe o topo, o centro "verdadeiro" da seção ficava
	 * mais alto que o centro visual da área realmente livre (abaixo do
	 * header), sobrando espaço vazio embaixo. Com box-sizing:border-box
	 * (global), esse padding entra dentro do min-height, e o texto passa a
	 * centralizar só na área entre o header e a base da seção.
	 */
	position:relative;
	isolation:isolate;
	overflow:hidden;
	min-height:100vh;
	padding-top:6.5rem;
	display:flex;
	align-items:center;
	background-color:var(--lm-ink);
}
/*
 * Slideshow de fundo: cada foto é uma div própria, todas empilhadas via
 * position:absolute, cross-fade por opacity (não display/visibility, que não
 * anima). z-index:auto e ordem no DOM antes do overlay/::after (que têm
 * z-index explícito) já bastam pra ficar por baixo, sem precisar de mais
 * um z-index aqui. JS troca a classe is-active a cada poucos segundos
 * (assets/js/main.js) — com 1 foto só (data-lm-hero-static) o JS nem entra
 * em ação, fica só a foto parada de sempre.
 */
.lm-hero__slides{position:absolute;inset:0}
.lm-hero__slide{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	opacity:0;
	transition:opacity 1.2s ease;
}
.lm-hero__slide.is-active{opacity:1}
/* Foto atual (box-hero) espelhada horizontalmente — pedido do Líder. Só o
   fundo, o overlay/::after e o texto por cima não são afetados (ficam em
   elementos irmãos, fora deste transform). */
.lm-hero__slide:first-child{transform:scaleX(-1)}
/*
 * Variante "compacta" (produto/Empresa) — só o h1, só nessas páginas.
 * Títulos de produto são mais longos que o da home e passavam de 3 linhas
 * no tamanho padrão; a home continua com o h1 de sempre (regra em h1{}
 * acima), esta aqui é seletor à parte, não sobrescreve nada global.
 */
.lm-hero--compacta .lm-hero__text h1{font-size:clamp(1.6rem,1.05rem + 2vw,2.5rem);max-width:29ch}
/*
 * Hero de produto usa o mesmo overlay da home (.lm-hero__overlay, abaixo) —
 * o gradiente padrão já cobre toda a faixa do texto com força suficiente.
 */
/*
 * text-shadow como reforço extra do overlay: garante leitura mesmo em
 * trechos claros da foto (ex.: espelho, vidro refletindo luz) onde o
 * degradê sozinho ainda deixava passar claridade demais por trás da letra.
 * Só na hero de produto — a home não precisa (fica sob o overlay padrão,
 * mais escuro numa faixa maior).
 */
.lm-hero--compacta .lm-hero__text h1,
.lm-hero--compacta .lm-hero__text .lm-lead,
.lm-hero--compacta .lm-hero__text .lm-breadcrumb{
	text-shadow:0 2px 12px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce){
	.lm-hero__slide{transition:none}
}
/*
 * Reflexo de vidro: faixa DIAGONAL fina (~18°), não vertical reta e não um
 * círculo. Pra inclinar sem deixar "buraco" nas pontas (topo/base) depois
 * da rotação, a faixa nasce mais alta que a seção (top/bottom negativos) e
 * gira em torno do próprio centro — precisa de overflow:hidden no .lm-hero
 * (ver acima) pra cortar a sobra fora dos limites da seção.
 * Acompanha só a coordenada X do mouse — --mx (em px, calculado pelo JS em
 * assets/js/main.js) desloca a faixa via translateX. Transition mais longa
 * (.5s ease-out) no transform pra suavizar o movimento — mais fluido, menos
 * "grudado" no cursor (não precisa de lerp em JS: a própria transition do
 * CSS resolve). Some com fade quando o mouse sai da seção.
 */
.lm-hero::after{
	content:"";
	position:absolute;
	top:-15%;
	bottom:-15%;
	left:0;
	width:150px;
	z-index:1;
	pointer-events:none;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.26) 45%,rgba(255,247,230,.22) 55%,transparent);
	transform:translateX(var(--mx,-999px)) rotate(18deg);
	transform-origin:center;
	opacity:0;
	transition:opacity .35s ease,transform .5s ease-out;
}
.lm-hero.is-spotlight::after{opacity:1}
@media (prefers-reduced-motion:reduce){
	.lm-hero::after{display:none}
}
.lm-hero__overlay{
	/*
	 * Home e produto (mesmo overlay). Escuro forte do lado do texto e
	 * mantido até ~62% da largura (cobre toda a área do título/lead/botões);
	 * só depois clareia, deixando a foto aparecer à direita.
	 */
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
	background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.72) 35%,rgba(0,0,0,.6) 62%,rgba(0,0,0,.25) 82%,rgba(0,0,0,.08) 100%);
}
/*
 * Mobile: o texto ocupa a largura toda, então o escurecimento fica
 * uniforme (leve variação vertical) em vez de lateral.
 */
@media (max-width:860px){
	.lm-hero__overlay{
		background:linear-gradient(180deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.72) 100%);
	}
}
/*
 * .lm-hero__text já carrega a classe .lm-shell (mesmo container padrão de
 * largura/margem usado em todas as outras seções) — sem sobrescrever
 * margin-inline aqui, ele centraliza igual ao resto do site, e o texto
 * fica alinhado à esquerda DENTRO desse container pelo text-align.
 */
.lm-hero__text{position:relative;z-index:2;padding-block:clamp(4rem,10vw,6rem);text-align:left}
.lm-hero__text .lm-breadcrumb{color:rgba(255,255,255,.65);margin-bottom:1.5rem}
.lm-hero__text .lm-breadcrumb a{color:rgba(255,255,255,.65)}
.lm-hero__text .lm-breadcrumb a:hover{color:#fff}
.lm-hero__text .lm-breadcrumb span[aria-current]{color:#fff}
.lm-hero__text .lm-eyebrow{color:#fff;opacity:.85}
/*
 * max-width em rem (não ch): ch escala junto com o font-size (que também
 * cresce por vw), então em telas bem largas as duas coisas cresciam juntas
 * e o bloco de texto esticava quase até a borda direita. Em rem fixo, o
 * título fica preso numa coluna à esquerda, igual a hero de produto,
 * ficando mais largo só até esse teto.
 */
.lm-hero__text h1{color:#fff;font-weight:300;max-width:46rem;font-size:clamp(2rem,1.3rem + 2.2vw,2.9rem)}
.lm-hero__text .lm-lead{color:rgba(255,255,255,.88);max-width:52ch}
.lm-hero__text .lm-hl{color:#E4C46B;font-weight:500}
.lm-hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem}
@media (max-width:640px){
	.lm-hero{min-height:88vh}
}

/*
 * Credibilidade — 4 cards (.lm-card). Ícone dourado em moldura circular fina
 * acima do título, hover sutil (a única "elevação" é a borda escurecendo —
 * sem sombra) e título em peso 600 pra ganhar hierarquia sobre a descrição.
 */
.lm-cred{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.lm-cred__item{transition:border-color .2s ease}
.lm-cred__item:hover{border-color:var(--lm-accent)}
.lm-cred__icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid var(--lm-card-border);border-radius:50%;margin-bottom:1.25rem;color:#DFB22B}
.lm-cred__icon .lm-icon{width:32px;height:32px}
.lm-cred__item h3{font-size:1.15rem;margin-bottom:.3em;font-weight:600}
.lm-cred__item p{margin:0;color:var(--lm-muted);font-size:.9rem}
@media (max-width:640px){
	.lm-cred{grid-template-columns:1fr}
}

/* Como funciona — numeral grande e leve, agora dentro de um .lm-card */
.lm-how{display:grid;gap:1.25rem;margin-top:3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
/* Mesma moldura circular fina dos ícones da credibilidade, com o número dourado dentro. */
.lm-how__num{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid var(--lm-card-border);border-radius:50%;margin-bottom:1.25rem;font-size:1.4rem;font-weight:400;color:#DFB22B;line-height:1}
.lm-how__step p{margin:0;color:var(--lm-muted);font-size:.92rem}
.lm-how__step{position:relative}
.lm-how__icon{position:absolute;top:1.25rem;right:1.25rem;color:#DFB22B;opacity:.9}
/*
 * Produtos — dentro de um .lm-card (foto sangra até a borda, sem padding;
 * o texto abaixo usa .lm-card__body pro respiro generoso do padrão).
 */
.lm-products{display:grid;gap:1.75rem;margin-top:3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.lm-product{display:flex;flex-direction:column}
.lm-product__photo{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--lm-bg-alt)}
.lm-product__photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.lm-product:hover .lm-product__photo img{transform:scale(1.03)}
/* Hover "vidro" na foto — mesmo brilho deslizante do botão .lm-btn--pulse. */
.lm-product__photo::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
	transform:translateX(-130%);
	transition:transform .7s ease;
	pointer-events:none;
}
.lm-product:hover .lm-product__photo::after{transform:translateX(130%)}
/*
 * Texto centralizado. Foto→título e descrição→CTA ficam próximos (bloco
 * coeso, sem borda pra marcar o conjunto); título→descrição mantém o
 * respiro maior de antes.
 */
.lm-product .lm-card__body{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding-top:1.25rem}
.lm-product h3{font-size:1.2rem;margin:0 0 .85rem;font-weight:400}
.lm-product p{margin:0 0 .4rem;color:var(--lm-muted);font-size:.9rem;flex:1}
.lm-product .lm-link{align-self:center}

/*
 * Por que — align-items:stretch faz as duas colunas terem a mesma altura
 * (a do lado maior, os 3 cards empilhados); a coluna de texto vira flex
 * column pra a foto (flex:1) esticar e preencher exatamente essa altura,
 * já ocupando 100% da largura da coluna (sem max-width fixo).
 */
/*
 * Por que — cards da direita ficam com altura natural (align-items volta a
 * flex-start, sem esticar nada). A foto da esquerda ocupa 100% da largura
 * da coluna; a ALTURA dela é calculada via JS (ver assets/js/main.js) pra
 * igualar a altura total da coluna de cards, sem forçar os cards a crescer.
 * O aspect-ratio abaixo é só o valor de tela inicial, antes do JS medir e
 * sobrescrever via style inline.
 */
/* Por que — sem foto (removida: sem material real, placeholder ficava feio). Título em cima, cards em linha embaixo. */
.lm-why__head{max-width:44rem;margin-bottom:2.5rem}
.lm-why__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.lm-why__card p{margin:0;color:var(--lm-muted);font-size:.92rem}

/*
 * Galeria — full-bleed (sai do container até a borda da viewport) e o
 * deslocamento horizontal das duas fileiras é dirigido pela rolagem
 * vertical da página (parallax por scroll via JS, ver assets/js/main.js),
 * não timer nem setas. Truque de largura cheia: 100vw + left:50% +
 * margin -50vw, clássico pra sair do .lm-shell sem tocar no <body>.
 */
.lm-gallery__dica{color:var(--lm-muted);font-size:.85rem;margin-top:.5rem}
.lm-gallery{
	width:100vw;
	position:relative;
	left:50%;
	right:50%;
	margin-left:-50vw;
	margin-right:-50vw;
	display:flex;
	flex-direction:column;
	gap:0;
	margin-top:3rem;
	margin-bottom:3rem;
}
.lm-gallery-row{overflow:hidden}
.lm-gallery-row__track{display:flex;gap:0;width:max-content;will-change:transform}
/* appearance:none + font:inherit porque os itens "reais" são <button> — sem isso, o navegador aplica o próprio contorno/borda padrão de botão por cima do que zeramos acima. */
.lm-gallery__item{position:relative;margin:0;flex:0 0 auto;width:220px;aspect-ratio:1/1;overflow:hidden;padding:0;border:0;outline:0;box-shadow:none;background:var(--lm-bg);cursor:pointer;appearance:none;-webkit-appearance:none;font:inherit}
.lm-gallery__item[aria-hidden="true"]{cursor:default}
.lm-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;pointer-events:none}
.lm-gallery__item:hover img{transform:scale(1.04)}
/* Hover "vidro" — mesmo brilho deslizante do botão e dos cards de produto. */
.lm-gallery__item::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
	transform:translateX(-130%);
	transition:transform .7s ease;
	pointer-events:none;
}
.lm-gallery__item:hover::after{transform:translateX(130%)}
.lm-gallery__cta{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem}
/*
 * Variante "alto" (.lm-gallery--alto) — fileira mais alta, proporcional a
 * fotos verticais (ex.: produto). object-fit:cover (herdado, não muda) já
 * garante que a foto preenche sem esticar/distorcer, só ajusta o recorte.
 */
.lm-gallery--alto .lm-gallery__item{aspect-ratio:3/4}
@media (max-width:640px){
	.lm-gallery__item{width:160px}
}

/* Lightbox — modal simples, JS puro (ver assets/js/main.js). */
.lm-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.lm-lightbox[hidden]{display:none}
.lm-lightbox__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.88)}
.lm-lightbox__figure{position:relative;z-index:1;max-width:min(90vw,1100px);max-height:85vh;margin:0}
.lm-lightbox__img{max-width:100%;max-height:85vh;display:block;object-fit:contain}
.lm-lightbox__close{position:absolute;top:1.25rem;right:1.25rem;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.lm-lightbox__close:hover{background:rgba(255,255,255,.12)}
.lm-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.lm-lightbox__nav:hover{background:rgba(255,255,255,.16)}
.lm-lightbox__nav--prev{left:1.25rem}
.lm-lightbox__nav--next{right:1.25rem}
@media (max-width:640px){
	.lm-lightbox__nav{width:42px;height:42px;font-size:1.4rem}
	.lm-lightbox__nav--prev{left:.5rem}
	.lm-lightbox__nav--next{right:.5rem}
}

/* CTA de "Solicitar Orçamento" adicionado ao fim de um bloco (como funciona, por que, área de atendimento). */
.lm-section__cta{margin-top:2.5rem;text-align:center}
.lm-section__cta--esquerda{text-align:left}

/*
 * Depoimentos — sem avatar (nenhuma foto real ainda; melhor sem círculo do
 * que placeholder feio). Masonry de verdade via CSS columns: cada card flui
 * pela altura que precisa, sem vão vazio embaixo do mais curto (o que
 * acontecia com grid + grid-row:span quando a coluna vizinha ficava mais
 * alta). break-inside:avoid impede um card cortado ao meio entre colunas.
 */
.lm-testimonials{column-count:2;column-gap:1.25rem;margin-top:3rem}
.lm-testimonial{display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1.25rem}
.lm-testimonial__nota{color:#DFB22B;letter-spacing:.15em;font-size:.95rem}
.lm-testimonial blockquote{margin:.6rem 0 0;color:var(--lm-muted);font-size:.96rem;font-style:italic}
.lm-testimonial figcaption{margin-top:.85rem}
.lm-testimonial cite{font-style:normal;font-weight:700;font-size:.9rem;display:block}
.lm-testimonial small{color:var(--lm-muted);font-size:.8rem}
.lm-testimonial__titulo{margin:.6rem 0 0;font-size:1.02rem;font-weight:600}
@media (max-width:700px){
	.lm-testimonials{column-count:1}
}

/* CTA final — seção escura de largura cheia, botão outline claro */
.lm-cta-section{background:var(--lm-ink);color:#fff;padding-block:clamp(3.5rem,7vw,6rem)}
.lm-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2.5rem;padding-inline:clamp(1rem,4vw,3rem)}
/* max-width em ch equilibra a quebra da headline em 2 linhas em vez de 3 desiguais. */
.lm-cta h2{color:#fff;margin:0 0 .5em;max-width:34ch}
.lm-cta p{color:#AEB6BF;margin:0;max-width:44ch}
.lm-cta__col{flex:1 1 20rem}
.lm-cta .lm-btn{flex-shrink:0}

/* Área de atendimento */
.lm-area{display:flex;flex-wrap:wrap;gap:clamp(2rem,4vw,3.5rem);align-items:stretch}
.lm-area__col{flex:1 1 20rem;min-width:0}
.lm-area__endereco{font-weight:600;margin-top:.75rem}
/* Esse bloco é o único onde o texto (eyebrow/título/parágrafo) é alinhado à esquerda — o CTA acompanha, não centraliza como nos outros blocos. */
.lm-area__col .lm-section__cta{text-align:left}
.lm-area__mapa{flex:1 1 24rem;min-width:0;min-height:320px}
.lm-area__mapa iframe{width:100%;max-width:100%;height:100%;min-height:320px;display:block;border:0;border-radius:0;filter:grayscale(.4) contrast(1.05)}

/* Footer — editorial, sem pílulas nem sombra */
.lm-footer{background:var(--lm-bg);border-top:1px solid var(--lm-line);padding-block:clamp(3rem,6vw,4.5rem)}
/*
 * Grid em vez de flex+space-between: 2 colunas (logo/endereço | fale com a
 * gente/redes) desde que a coluna "Menu" saiu — proporção mais generosa
 * pra cada lado, sem vão vazio no meio.
 */
/*
 * Só 2 colunas agora (a de "Menu" saiu): flex + space-between empurra cada
 * uma pra sua extremidade — logo/endereço na esquerda, "Fale com a gente"
 * alinhada à borda direita (mesmo alinhamento do botão do header), sem
 * esticar as colunas a ponto de sobrar vazio no meio de uma delas.
 */
.lm-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem}
.lm-footer__top .lm-footer__col:last-child{text-align:right}
.lm-footer__top .lm-footer__col:last-child .lm-footer__social{justify-content:flex-end}
@media (max-width:560px){
	.lm-footer__top .lm-footer__col:last-child{text-align:left}
	.lm-footer__top .lm-footer__col:last-child .lm-footer__social{justify-content:flex-start}
}
.lm-footer__brand{display:inline-block;font-family:var(--lm-font-display);font-size:1.3rem;font-weight:500;letter-spacing:.02em;text-decoration:none;color:var(--lm-ink)}
.lm-footer__brand--logo{display:inline-flex}
.lm-footer__logo-img{height:38px;width:auto;display:block}
.lm-footer__col p{margin:0 0 .5em;color:var(--lm-muted);font-size:.92rem}
.lm-footer__col h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--lm-muted);font-weight:600;margin-bottom:1em}
/* Menu horizontal — item ao lado do item, separado por "·", em vez de empilhado. */
.lm-footer__nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.lm-footer__nav li{display:flex;align-items:center}
.lm-footer__nav li:not(:last-child)::after{content:"·";margin:0 .7rem;color:var(--lm-line)}
.lm-footer__nav a{text-decoration:none;color:var(--lm-ink);font-size:.92rem}
.lm-footer__nav a:hover{color:var(--lm-muted)}
.lm-footer__social{display:flex;gap:1.25rem;margin-top:1rem}
.lm-footer__social a{color:var(--lm-ink)}
.lm-footer__social a:hover{color:var(--lm-muted)}
.lm-footer__whats{color:var(--lm-ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--lm-ink);padding-bottom:2px}
.lm-footer__whats:hover{color:var(--lm-muted);border-color:var(--lm-muted)}
.lm-footer__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--lm-line);display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;font-size:.8rem;color:var(--lm-muted)}
.lm-footer__bottom a{color:var(--lm-muted);text-decoration:underline}
.lm-footer__credit{margin:.75rem 0 0;font-size:.74rem;color:var(--lm-muted);opacity:.8;text-align:center}

/*
 * Banner de consentimento (LGPD) — é do plugin DKX System
 * (includes/class-dkx-consent.php), não do tema. A estrutura/JS/lógica de
 * consentimento continuam do jeito que o plugin já resolveu (inclusive a
 * simetria "Aceitar"/"Recusar" exigida pelo parecer jurídico) — aqui só
 * sobrescrevemos a aparência pra bater com a Lumini, sem editar o arquivo
 * do plugin (que precisa continuar genérico pros outros clientes que usam
 * o mesmo DKX System). !important porque não controlamos se o <style>
 * inline do plugin imprime antes ou depois do nosso.
 */
.dkx-consent{font-family:var(--lm-font-display)!important}
.dkx-consent__shell{background:#2C3F48!important;border-color:#3A4F59!important}
.dkx-consent__p a{color:#DFB22B!important}
.dkx-consent__btn{background:transparent!important;border-color:#8A97A0!important;color:#fff!important}
.dkx-consent__btn[data-dkx="aceitar"],
.dkx-consent__btn[data-dkx="salvar"]{background:#DFB22B!important;border-color:#DFB22B!important;color:#4B4A4B!important}
.dkx-consent__mais{font-family:var(--lm-font-display)!important}
.dkx-consent__cat input{accent-color:#DFB22B!important}

/*
 * Botão voltar ao topo — canto inferior esquerdo, anel de progresso da
 * rolagem. O botão flutuante de WhatsApp que existia aqui foi removido: o
 * track.js do Sistema DKX já injeta o próprio, e os dois duplicavam.
 */
.lm-back-top{
	position:fixed;left:1.5rem;bottom:1.5rem;z-index:80;
	width:52px;height:52px;border-radius:50%;
	background:#fff;border:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,.16);
	opacity:0;transform:translateY(8px);pointer-events:none;
	transition:opacity .3s ease,transform .3s ease;
}
.lm-back-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.lm-back-top__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lm-back-top__ring-bg{fill:none;stroke:var(--lm-line);stroke-width:2}
.lm-back-top__ring-fg{fill:none;stroke:#DFB22B;stroke-width:2;stroke-linecap:round;
	stroke-dasharray:125.6;stroke-dashoffset:125.6}
.lm-back-top__arrow{position:relative;width:18px;height:18px;color:#4B4A4B}
@media (max-width:640px){
	.lm-back-top{width:48px;height:48px}
}

/*
 * Página interna — componentes reutilizáveis (Empresa e futuras páginas de
 * Serviço): hero discreto, sem foto de fundo grande como a da home.
 */
.lm-page-hero{padding-block:clamp(3rem,7vw,4.5rem) clamp(1.5rem,4vw,2.5rem)}
.lm-page-hero h1{margin-bottom:.4em}
.lm-page-hero .lm-lead{max-width:56ch}
.lm-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--lm-muted);margin-bottom:1.25rem}
.lm-breadcrumb a{color:var(--lm-muted);text-decoration:none}
.lm-breadcrumb a:hover{color:var(--lm-ink);text-decoration:underline}
.lm-breadcrumb span[aria-current]{color:var(--lm-muted)}

/* Empresa — Nossa história */
.lm-historia{display:flex;flex-wrap:wrap;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.lm-historia__col{flex:1 1 22rem;min-width:0}
.lm-historia__foto{flex:1 1 22rem;min-width:0;margin:0}
.lm-historia__foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Empresa — Fundadores */
.lm-fundadores{display:grid;gap:2rem;margin-top:2.5rem;align-items:center}
@media(min-width:860px){.lm-fundadores{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem}}
.lm-fundadores__foto{margin:0}
.lm-fundadores__foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 40%;border-radius:12px;display:block}
.lm-fundadores__textos{display:grid;gap:2.5rem}
.lm-fundador h3{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:.25em;font-weight:600}
.lm-fundador__papel{margin:0;color:var(--lm-muted);font-size:1rem}
.lm-fundador__destaque{margin:1rem 0 0;padding-left:1rem;border-left:3px solid currentColor;font-size:1.2rem;line-height:1.5;font-style:italic}
.lm-fundador__bio{margin-top:1rem}
.lm-fundador__bio summary{cursor:pointer;font-weight:600;font-size:.9rem}
.lm-fundador__bio p{font-size:.95rem;line-height:1.6;margin:.8em 0 0}

/* Seção reservada (placeholder de conteúdo pendente) */
.lm-secao-reservada{border:1px dashed var(--lm-card-border);padding:2.5rem;text-align:center}
.lm-secao-reservada p:last-child{margin:0;color:var(--lm-muted)}

/*
 * Página de produto (single-dkx_produto.php) — genérica, usada pelos 9
 * produtos.
 */
/*
 * Hero de produto agora reaproveita o componente full-bleed da home
 * (.lm-hero, ver acima) — as classes .lm-produto-hero* saíram, não são
 * mais usadas por template nenhum.
 */

/* Descrição — tipografia básica de prosa pro the_content de cada produto. */
/* min() com % e ch: ~68% do container em telas largas, sem passar de uma medida de leitura confortável em telas estreitas. */
.lm-prose{max-width:min(68%,62ch)}
@media (max-width:640px){
	.lm-prose{max-width:none}
}
.lm-prose p{margin:0 0 1.2em;color:var(--lm-muted)}
.lm-prose h2,.lm-prose h3{margin-top:1.5em}
.lm-prose ul,.lm-prose ol{margin:0 0 1.2em;padding-left:1.4em;color:var(--lm-muted)}
.lm-prose li{margin-bottom:.4em}

/*
 * Bloco "Sobre o produto" — 2 colunas: esquerda "o que é" (eyebrow +
 * subtítulo + parágrafo) seguido de "vale a pena" empilhado logo abaixo
 * (preenche o vão que sobrava vazio nessa coluna); direita os 3 benefícios
 * empilhados verticalmente, cada um num .lm-card (borda fina, mesmo cartão
 * do resto do site).
 */
.lm-sobre__grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:3rem;
	margin-bottom:1rem;
	align-items:start;
}
.lm-sobre__coluna-oque .lm-prose{max-width:none;margin-bottom:1.75rem}
.lm-sobre__coluna-beneficios{display:flex;flex-direction:column;gap:1rem}
.lm-sobre__beneficio-card{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.lm-sobre__beneficio-card .lm-icon{width:26px;height:26px;color:#DFB22B;stroke-width:2}
.lm-sobre__beneficio-card p{margin:0;color:var(--lm-ink);font-size:.95rem;line-height:1.5}
@media (max-width:900px){
	.lm-sobre__grid{grid-template-columns:1fr}
}
.lm-sobre__vale{
	background:var(--lm-bg-alt);
	border-left:3px solid #DFB22B;
	padding:1.5rem 1.75rem;
	max-width:none;
}
.lm-sobre__vale .lm-eyebrow{margin-bottom:.5rem}
.lm-sobre__vale p:last-child{margin:0;color:var(--lm-ink);font-size:1.02rem;line-height:1.6}
@media (max-width:640px){
	.lm-sobre__vale{max-width:none}
}
/*
 * Variante "card" — pro bloco Missão da Empresa, que fica dentro de uma
 * seção já bege (.lm-section--alt): fundo branco em vez do bege padrão,
 * pra destacar de verdade contra o fundo da seção, com mais respiro interno.
 */
.lm-sobre__vale--card{background:#fff;padding:2.25rem 2.5rem}
/* Reduz só o espaço ACIMA desta seção — o espaço abaixo (antes de "Nossos valores" e do CTA final) continua no padrão do site. */
.lm-section--topo-reduzido{padding-top:clamp(1.25rem,3vw,2rem)}
.lm-prose a{color:var(--lm-ink);text-decoration:underline}
.lm-prose img{margin-block:1.5em}

/* FAQ do produto — mesmo <details>/<summary> nativo, numeração visual simples. */
.lm-produto-faq{max-width:52rem;margin-top:2rem;border-top:1px solid var(--lm-line)}
.lm-produto-faq__item{border-bottom:1px solid var(--lm-line);padding:1.1rem 0}
.lm-produto-faq__item summary{cursor:pointer;font-weight:600;list-style:none}
.lm-produto-faq__item summary::-webkit-details-marker{display:none}
.lm-produto-faq__item summary::after{content:"+";float:right;color:var(--lm-muted);font-weight:400}
.lm-produto-faq__item[open] summary::after{content:"−"}
.lm-produto-faq__item p{margin:.85rem 0 0;color:var(--lm-muted)}

/* Celular: alvos de toque de pelo menos 44px. O link ganha área invisível (o sublinhado não se afasta do texto); o <summary> ganha altura. */
@media (max-width:860px){
	.lm-link{position:relative}
	.lm-link::before{content:"";position:absolute;inset:-10px -8px}
	details>summary{min-height:44px;padding-block:.7rem;box-sizing:border-box}
}

/* Páginas genéricas (políticas): coluna de leitura confortável. */
.lm-page{max-width:46rem}
.lm-page__title{margin-bottom:.35em}
.lm-page__meta{color:var(--lm-muted);font-size:.9rem;margin:0 0 2rem}
.lm-page__content h2{font-size:1.3rem;margin:2.2rem 0 .6rem}
.lm-page__content p,.lm-page__content li{line-height:1.7}
.lm-page__content ul{padding-left:1.2rem}
.lm-page__content a{overflow-wrap:anywhere}

/* Cópias decorativas da galeria também abrem o lightbox. */
[data-lm-lightbox-copia]{cursor:pointer}