/**
 * Eletricx — página inicial.
 * Medidas transcritas de design/HOME.pdf (canvas 1650px, miolo de conteúdo de
 * 1216px — aqui 1213px, a mesma largura da listagem e da página do produto).
 *
 * Escopado por body.elx-home-page. Os tokens de cor, as fontes e o card de
 * produto vêm de catalog.css, que é dependência desta folha — por isso a home
 * também recebe a classe .elx-catalog-page.
 */

.elx-home-page {
	--elx-home-inner: 1213px;
	--elx-home-gap: 33px;
	--elx-tint-15: rgba(84, 160, 123, 0.15);
	--elx-hairline: #e8e8e8;
	--elx-divider: #c9c9c9;
}

/* ---------------------------------------------------------------- banner -- */

/* A altura acompanha a proporção real da arte (1950×450 no desktop, 800×600 no
   celular), então a foto nunca é cortada em nenhuma largura de tela. */
.elx-home-page #elx-home-hero .elementor-slides .swiper-slide-inner {
	min-height: 23.1vw;
}

.elx-home-page #elx-home-hero-mobile .elementor-slides .swiper-slide-inner {
	min-height: 75vw;
}

.elx-home-page #elx-home-hero .swiper-slide-bg,
.elx-home-page #elx-home-hero-mobile .swiper-slide-bg {
	background-position: center;
	background-size: cover;
}

.elx-home-page .elementor-slides .elementor-slide-heading {
	font-family: var(--elx-display);
	font-weight: 800;
	line-height: 1.1;
}

.elx-home-page .elementor-slides .elementor-slide-description {
	font-family: var(--elx-sans);
	line-height: 1.35;
}

.elx-home-page .elementor-slides .elementor-slide-button {
	font-family: var(--elx-sans);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--elx-radius-field);
}

.elx-home-page .elementor-slides .elementor-swiper-button {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ----------------------------------------------------------- benefícios -- */

.elx-home-page #elx-home-benefits {
	border-top: 1.5px solid var(--elx-hairline);
	border-bottom: 1.5px solid var(--elx-hairline);
}

/* Colunas iguais, como na referência. */
.elx-home-page #elx-home-benefits .elementor-widget-image-box {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* O filete vertical entre um benefício e o seguinte. */
.elx-home-page #elx-home-benefits .elementor-widget-image-box + .elementor-widget-image-box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 150px;
	background: var(--elx-divider);
}

.elx-home-page #elx-home-benefits .elementor-image-box-wrapper {
	display: flex;
	align-items: center;
	gap: 17px;
	text-align: left;
}

.elx-home-page #elx-home-benefits .elementor-image-box-img {
	flex: 0 0 71px;
	width: 71px;
	margin: 0;
}

.elx-home-page #elx-home-benefits .elementor-image-box-img img {
	width: 71px;
	height: auto;
	border-radius: 10px;
}

.elx-home-page #elx-home-benefits .elementor-image-box-content {
	min-width: 0;
}

.elx-home-page #elx-home-benefits .elementor-image-box-title {
	margin: 0;
	font-family: var(--elx-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
	color: var(--elx-text);
}

.elx-home-page #elx-home-benefits .elementor-image-box-description {
	margin: 0;
	font-family: var(--elx-sans);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--elx-text);
}

/* ----------------------------------------------- seleção especial (abas) -- */

.elx-home-page #elx-home-featured {
	border-bottom-left-radius: 75px;
	border-bottom-right-radius: 75px;
}

.elx-home-page #elx-home-featured-title .elementor-heading-title {
	font-family: var(--elx-display);
	font-weight: 700;
	font-size: 42px;
	line-height: 1.2;
	color: var(--elx-green);
	text-align: center;
	margin: 0;
}

.elx-home-page #elx-home-featured-sub {
	font-family: var(--elx-sans);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: var(--elx-text);
	text-align: center;
}

.elx-home-page #elx-home-featured-sub p {
	margin: 0;
}

/* As abas são o widget nativo "Abas"; aqui elas ganham a forma de pílula do
   layout. */
.elx-home-page #elx-home-tabs .e-n-tabs-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 35px;
}

.elx-home-page #elx-home-tabs .e-n-tab-title {
	/* Na referência as cinco pílulas dividem a largura do conteúdo. */
	flex: 1 1 0;
	min-width: 0;
	min-height: 50px;
	/* O widget de abas dá `margin-bottom: 10px` à aba ativa e `margin-top: 10px`
	   às demais (é assim que ele "cola" a ativa no conteúdo). Como aqui as abas
	   são pílulas soltas, essa margem desalinhava a ativa em 10px — mais visível
	   na faixa rolável do celular. */
	margin-block: 0;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--elx-green);
	border-radius: var(--elx-radius-field);
	background: transparent;
	color: var(--elx-green);
	font-family: var(--elx-sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.elx-home-page #elx-home-tabs .e-n-tab-title[aria-selected="true"] {
	background: var(--elx-green);
	color: #fff;
}

.elx-home-page #elx-home-tabs .e-n-tab-title:hover:not([aria-selected="true"]) {
	background: var(--elx-tint-15);
}

.elx-home-page #elx-home-tabs .e-n-tab-title:focus-visible {
	outline: 2px solid var(--elx-green-dark);
	outline-offset: 2px;
}

.elx-home-page #elx-home-tabs .e-n-tabs-content > .e-con {
	padding: 0;
}

/* Nesta seção o fundo já é cinza, então o card do produto vira branco. */
.elx-home-page #elx-home-featured .elx-card-product {
	background: #fff;
}

/* ----------------------------------------------------------- categorias -- */

/* A coluna da esquerda mantém a largura definida no painel; os cards ficam com
   o resto. */
.elx-home-page #elx-home-cats-side {
	flex: 0 0 auto;
}

.elx-home-page #elx-home-cats-grid {
	flex: 1 1 auto;
	min-width: 0;
}

.elx-home-page .elx-catlist {
	background: #fff;
	border: 1px solid var(--elx-card-line);
	border-radius: var(--elx-radius-card);
	box-shadow: 0 0 50px rgba(226, 226, 226, 0.5);
	padding: 20px;
}

.elx-home-page .elx-catlist__title {
	margin: 12px 0 18px;
	font-family: var(--elx-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--elx-ink);
}

.elx-home-page .elx-catlist__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elx-home-page .elx-catlist__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elx-home-page .elx-catlist__item + .elx-catlist__item {
	border-top: 1px solid var(--elx-card-line);
}

.elx-home-page .elx-catlist__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 17px;
	font-family: var(--elx-sans);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
	color: var(--elx-muted);
	text-decoration: none;
	transition: color 0.16s ease;
}

.elx-home-page .elx-catlist__link:hover,
.elx-home-page .elx-catlist__link:focus-visible {
	color: var(--elx-green);
}

.elx-home-page .elx-catlist__chev {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.16s ease;
}

.elx-home-page .elx-catlist__link:hover .elx-catlist__chev {
	transform: rotate(45deg) translate(2px, -2px);
}

/* Cards de categoria */
.elx-home-page .elx-catcards {
	--elx-catcards-cols: 3;
	--elx-catcard-icon: 71px;
	display: grid;
	grid-template-columns: repeat(var(--elx-catcards-cols), minmax(0, 1fr));
	gap: 26px;
}

.elx-home-page .elx-catcard {
	display: block;
	padding: 26px;
	border-radius: var(--elx-radius-card);
	background: var(--elx-soft);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.elx-home-page .elx-catcard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--elx-catcard-icon);
	height: calc(var(--elx-catcard-icon) * 0.957);
	margin-bottom: 10px;
	border-radius: 10px;
	color: var(--elx-green);
	overflow: hidden;
}

.elx-home-page .elx-catcard__icon--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 10px;
}

.elx-home-page .elx-catcard__icon--font {
	background: var(--elx-tint-15);
	font-size: calc(var(--elx-catcard-icon) * 0.45);
}

.elx-home-page .elx-catcard__title {
	display: block;
	margin-bottom: 10px;
	font-family: var(--elx-sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: var(--elx-text);
}

.elx-home-page .elx-catcard__desc {
	display: block;
	font-family: var(--elx-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
	color: var(--elx-text);
}

@media (hover: hover) {
	.elx-home-page .elx-catcard:hover {
		background: var(--elx-tint-soft);
		transform: translateY(-3px);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
	}
}

/* ------------------------------------------------- banners intermediários -- */

.elx-home-page .elx-home-banner {
	position: relative;
	overflow: hidden;
	border-radius: 35px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.elx-home-page .elx-home-banner > .e-con-inner {
	max-width: none;
}

.elx-home-page .elx-home-banner .elementor-heading-title {
	font-family: var(--elx-display);
	font-weight: 800;
	font-size: 42px;
	line-height: 1;
	color: #fff;
	margin: 0;
}

.elx-home-page .elx-home-banner .elementor-widget-text-editor {
	font-family: var(--elx-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	color: #fff;
}

.elx-home-page .elx-home-banner .elementor-widget-text-editor p {
	margin: 0;
}

.elx-home-page .elx-home-banner .elementor-button {
	min-width: 286px;
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	border-radius: var(--elx-radius-field);
	background: #fff;
	color: var(--elx-green);
	font-family: var(--elx-sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.elx-home-page .elx-home-banner .elementor-button:hover,
.elx-home-page .elx-home-banner .elementor-button:focus-visible {
	background: var(--elx-tint);
	color: var(--elx-green-dark);
}

/* ---------------------------------------------------------------- marcas -- */

/* A faixa cinza começa acima dos banners, como na referência: por isso a
   margem negativa, compensada pelo espaçamento interno. */
.elx-home-page #elx-home-brands {
	position: relative;
	z-index: 0;
}

.elx-home-page #elx-home-banners {
	position: relative;
	z-index: 1;
}

.elx-home-page #elx-home-brands-title .elementor-heading-title {
	font-family: var(--elx-display);
	font-weight: 700;
	font-size: 42px;
	line-height: 1.2;
	color: var(--elx-green);
	text-align: center;
	margin: 0;
}

.elx-home-page #elx-home-brands-sub {
	font-family: var(--elx-sans);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: var(--elx-text);
	text-align: center;
}

.elx-home-page #elx-home-brands-sub p {
	margin: 0;
}

.elx-home-page #elx-home-brands-grid .elementor-widget-image {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.elx-home-page #elx-home-brands-grid .elementor-widget-image a,
.elx-home-page #elx-home-brands-grid .elementor-widget-image figure,
.elx-home-page #elx-home-brands-grid .elementor-widget-image .elementor-widget-container {
	display: block;
	margin: 0;
	height: 100%;
}

/* O logo aparece inteiro, sem corte nem deformação. */
.elx-home-page #elx-home-brands-grid .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100px;
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
	transition: transform 0.18s ease;
}

@media (hover: hover) {
	.elx-home-page #elx-home-brands-grid .elementor-widget-image a:hover img {
		transform: scale(1.05);
	}
}

/* --------------------------------------------- atendimento para empresas -- */

/* O bloco vem do modelo global #14250, que também é usado na listagem — lá o
   fundo continua sendo o cinza `#F7F7F7` do modelo. Só na home ele fica branco.
   O `body` no início é o que vence a regra que o Elementor gera para o modelo
   (mesma quantidade de classes, um elemento a mais). */
body.elx-home-page .elementor-14250 .elementor-element.elementor-element-elxsup01,
body.elx-home-page .elementor-14250 .elementor-element.elementor-element-elxsup01 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #ffffff;
}

/* ---------------------------------------------------------------- tablet -- */

@media (max-width: 1280px) {
	.elx-home-page #elx-home-featured-title .elementor-heading-title,
	.elx-home-page #elx-home-brands-title .elementor-heading-title {
		font-size: 34px;
	}

	.elx-home-page .elx-home-banner .elementor-heading-title {
		font-size: 34px;
	}
}

@media (max-width: 1024px) {
	/* Três benefícios (o do Pix saiu em 22/09) cabem numa linha até o celular;
	   o ícone encolhe para sobrar espaço ao texto. */
	.elx-home-page #elx-home-benefits .elementor-image-box-wrapper {
		gap: 12px;
	}

	.elx-home-page #elx-home-benefits .elementor-image-box-img,
	.elx-home-page #elx-home-benefits .elementor-image-box-img img {
		flex-basis: 52px;
		width: 52px;
	}

	.elx-home-page #elx-home-featured {
		border-bottom-left-radius: 48px;
		border-bottom-right-radius: 48px;
	}

	.elx-home-page .elx-home-banner .elementor-button {
		min-width: 0;
		width: 100%;
	}
}

/* --------------------------------------------------------------- celular -- */

@media (max-width: 767px) {
	.elx-home-page #elx-home-featured-title .elementor-heading-title,
	.elx-home-page #elx-home-brands-title .elementor-heading-title {
		font-size: 26px;
	}

	.elx-home-page #elx-home-featured-sub,
	.elx-home-page #elx-home-brands-sub {
		font-size: 15px;
	}

	.elx-home-page #elx-home-featured {
		border-bottom-left-radius: 28px;
		border-bottom-right-radius: 28px;
	}

	/* A fila de abas vira uma faixa rolável, com as pílulas inteiras. */
	.elx-home-page #elx-home-tabs .e-n-tabs-heading {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		gap: 10px;
		margin-inline: -16px;
		padding-inline: 16px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.elx-home-page #elx-home-tabs .e-n-tabs-heading::-webkit-scrollbar {
		display: none;
	}

	.elx-home-page #elx-home-tabs .e-n-tab-title {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 16px;
		font-size: 14px;
		white-space: nowrap;
	}

	.elx-home-page .elx-catlist {
		padding: 16px;
	}

	.elx-home-page .elx-catcards {
		gap: 14px;
	}

	.elx-home-page .elx-catcard {
		padding: 18px;
	}

	.elx-home-page .elx-home-banner .elementor-heading-title {
		font-size: 26px;
	}

	/* Um benefício por linha. */
	.elx-home-page #elx-home-benefits {
		flex-wrap: wrap;
		row-gap: 22px;
	}

	.elx-home-page #elx-home-benefits .elementor-widget-image-box + .elementor-widget-image-box::before {
		display: none;
	}

	.elx-home-page #elx-home-benefits .elementor-widget-image-box {
		flex: 1 1 100%;
	}

	.elx-home-page #elx-home-brands-grid .elementor-widget-image img {
		height: 74px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elx-home-page .elx-catcard,
	.elx-home-page #elx-home-brands-grid .elementor-widget-image img,
	.elx-home-page .elx-catlist__chev {
		transition: none;
	}
	.elx-home-page .elx-catcard:hover,
	.elx-home-page #elx-home-brands-grid .elementor-widget-image a:hover img {
		transform: none;
	}
}