/**
 * TecnoPack featured products.
 *
 * Self-contained: the catalogue stylesheet only loads on catalogue views, so
 * this component cannot rely on it. Tokens are declared on .mktv-destaques
 * instead of :root so the two sheets never compete where both are present.
 */

.mktv-destaques {
	--mktv-tpd-green-deep: #0a6b3d;
	--mktv-tpd-ink: #17211d;
	--mktv-tpd-muted: #66736c;
	--mktv-tpd-white: #fff;
	--mktv-tpd-media: #e7eee8;
	--mktv-tpd-action: #64728d;
	--mktv-tpd-action-hover: #f5f8f6;
	--mktv-tpd-focus: #319a5e;
	--mktv-tpd-shell: 1400px;
	--mktv-tpd-colunas: 4;
	--mktv-tpd-action-altura: 4.1rem;
	--mktv-tpd-font: var(--font-gotham, "Gotham", Arial, Helvetica, sans-serif);

	/*
	 * Elementor containers are flex, and a flex item can be squashed below its
	 * content: the section then reads as having no height and the section
	 * below paints over the last cards. flex-shrink and min-height hold it at
	 * its real size, and the bottom margin keeps it clear of what follows.
	 */
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: -moz-fit-content;
	min-height: fit-content;
	margin: 0 0 50px;
	flex-grow: 0;
	flex-shrink: 0;
	clear: both;
	color: var(--mktv-tpd-ink);
	font-family: var(--mktv-tpd-font);
	font-size: 1rem;
	line-height: 1.65;
}

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

/*
 * Same contract as .mktv-shell in the child theme: 1400px total with the
 * shared 50px inner spacing, so the section lines up with the mastheads and
 * the catalogue.
 *
 * The spacing is applied unconditionally. The Elementor container holding the
 * shortcode was verified not to provide its own horizontal padding, so zeroing
 * this inside Elementor left the cards flush against the screen edges.
 */
.mktv-destaques__inner {
	width: min(100%, var(--mktv-tpd-shell));
	margin-inline: auto;
	padding-inline: var(--mktv-container-padding, 50px);
}

/* Optional heading row ---------------------------------------------------- */

.mktv-destaques__cabecalho {
	display: flex;
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 2rem);
	flex-wrap: wrap;
}

.mktv-destaques__titulo {
	max-width: 24ch;
	margin: 0;
	color: var(--mktv-tpd-ink);
	font-family: var(--mktv-tpd-font);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

/* Grid -------------------------------------------------------------------- */

.mktv-destaques__grelha {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(var(--mktv-tpd-colunas), minmax(0, 1fr));
	align-items: stretch;
	column-gap: clamp(1.15rem, 1.9vw, 1.85rem);
	row-gap: clamp(2.5rem, 4vw, 4rem);
}

/*
 * post_class() marks each card as blog content. Astra's article styling is
 * more specific than the component classes and would otherwise float, pad and
 * frame every card on the homepage.
 */
.mktv-destaques .mktv-product-bay {
	display: flex;
	float: none;
	clear: none;
	min-width: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	flex-direction: column;
}

/* Media ------------------------------------------------------------------- */

.mktv-destaques .mktv-product-bay__media {
	position: relative;
	display: grid;
	overflow: hidden;
	width: 100%;
	border: 0;
	background: var(--mktv-tpd-media);
	aspect-ratio: 1 / 1;
	place-items: center;
}

.mktv-destaques .mktv-product-bay__media > img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: clamp(1rem, 2vw, 1.9rem) !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.mktv-destaques .mktv-product-bay__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
}

.mktv-destaques .mktv-product-bay__placeholder svg {
	width: 34%;
	fill: none;
	stroke: #b4c2ba;
	stroke-linecap: square;
	stroke-width: 1.25;
}

/* Body -------------------------------------------------------------------- */

.mktv-destaques .mktv-product-bay__body {
	display: flex;
	padding: 1.2rem 0 0;
	flex: 1;
	flex-direction: column;
}

.mktv-destaques .mktv-product-bay__labels {
	display: flex;
	margin: 0 0 0.7rem;
	align-items: center;
	gap: 0.5rem;
	color: var(--mktv-tpd-green-deep);
	font-family: var(--mktv-tpd-font);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.35;
	text-transform: uppercase;
}

.mktv-destaques .mktv-product-bay__labels a,
.mktv-destaques .mktv-product-bay__labels a:visited {
	color: var(--mktv-tpd-green-deep) !important;
	text-decoration: none;
}

.mktv-destaques .mktv-product-bay__labels a:hover,
.mktv-destaques .mktv-product-bay__labels a:focus,
.mktv-destaques .mktv-product-bay__labels a:focus-visible,
.mktv-destaques .mktv-product-bay__labels a:active {
	color: var(--mktv-tpd-green-deep) !important;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* The reference composition carries the category alone above the name. */
.mktv-destaques .mktv-product-bay__brand {
	display: none;
}

.mktv-destaques .mktv-product-bay__title {
	margin: 0;
	color: var(--mktv-tpd-ink);
	font-family: var(--mktv-tpd-font);
	font-size: clamp(1.2rem, 1.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.mktv-destaques .mktv-product-bay__title a,
.mktv-destaques .mktv-product-bay__title a:visited {
	color: var(--mktv-tpd-ink) !important;
	text-decoration: none;
}

.mktv-destaques .mktv-product-bay__title a:hover,
.mktv-destaques .mktv-product-bay__title a:focus,
.mktv-destaques .mktv-product-bay__title a:focus-visible,
.mktv-destaques .mktv-product-bay__title a:active {
	color: var(--mktv-tpd-green-deep) !important;
	text-decoration: none;
}

.mktv-destaques .mktv-product-bay__summary {
	display: -webkit-box;
	overflow: hidden;
	max-width: 32ch;
	margin: 0.6rem 0 1.35rem;
	color: var(--mktv-tpd-muted);
	font-family: var(--mktv-tpd-font);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Actions ----------------------------------------------------------------- */

/*
 * Reproduces the "Ver mais" reference control used across the catalogue:
 * white ground, blue-grey outline, Gotham regular, no arrows.
 *
 * Every link state is declared because themes routinely recolour :visited and
 * :active. !important is confined to the colour, the one property that needs
 * protecting from Astra's link rules.
 */
.mktv-destaques .mktv-product-bay__action,
.mktv-destaques .mktv-product-bay__action:visited,
.mktv-destaques .mktv-destaques__cta,
.mktv-destaques .mktv-destaques__cta:visited,
.mktv-destaques .mktv-destaques__mais,
.mktv-destaques .mktv-destaques__mais:visited {
	display: inline-flex;
	min-height: var(--mktv-tpd-action-altura);
	margin-top: auto;
	padding: 0.85rem 1.5rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mktv-tpd-action);
	border-radius: 2px;
	background: var(--mktv-tpd-white);
	color: var(--mktv-tpd-action) !important;
	font-family: var(--mktv-tpd-font);
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.mktv-destaques .mktv-product-bay__action:hover,
.mktv-destaques .mktv-product-bay__action:focus,
.mktv-destaques .mktv-product-bay__action:focus-visible,
.mktv-destaques .mktv-product-bay__action:active,
.mktv-destaques .mktv-destaques__cta:hover,
.mktv-destaques .mktv-destaques__cta:focus,
.mktv-destaques .mktv-destaques__cta:focus-visible,
.mktv-destaques .mktv-destaques__cta:active,
.mktv-destaques .mktv-destaques__mais:hover,
.mktv-destaques .mktv-destaques__mais:focus,
.mktv-destaques .mktv-destaques__mais:focus-visible,
.mktv-destaques .mktv-destaques__mais:active {
	border-color: var(--mktv-tpd-green-deep);
	background: var(--mktv-tpd-action-hover);
	color: var(--mktv-tpd-green-deep) !important;
	text-decoration: none;
}

.mktv-destaques .mktv-destaques__cta {
	width: auto;
	margin-top: 0;
	flex: 0 0 auto;
}

/* Section-level action, centred under the grid. */
.mktv-destaques__rodape {
	display: flex;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	justify-content: center;
}

.mktv-destaques .mktv-destaques__mais {
	width: auto;
	min-width: 16rem;
	margin-top: 0;
}

.mktv-destaques a:focus-visible {
	outline: 2px solid var(--mktv-tpd-focus);
	outline-offset: 3px;
}

.mktv-destaques .screen-reader-text {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* Admin-only configuration notice ----------------------------------------- */

.mktv-destaques-aviso {
	box-sizing: border-box;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem 1.15rem;
	border: 1px solid rgba(49, 154, 94, 0.3);
	border-left: 4px solid #319a5e;
	background: #fff;
	color: #17211d;
	font-family: var(--font-gotham, "Gotham", Arial, Helvetica, sans-serif);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1024px) {
	.mktv-destaques__grelha {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mktv-destaques__grelha {
		grid-template-columns: minmax(0, 1fr);
	}

	.mktv-destaques__cabecalho {
		align-items: flex-start;
		flex-direction: column;
	}

	.mktv-destaques .mktv-destaques__cta,
	.mktv-destaques .mktv-destaques__mais {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mktv-destaques .mktv-product-bay__action,
	.mktv-destaques .mktv-destaques__cta,
	.mktv-destaques .mktv-destaques__mais {
		transition-duration: 0.01ms;
	}
}

/* Area solution panels ---------------------------------------------------- */

/*
 * The Elementor template owns the page shell and spacing. This component
 * deliberately fills only the accordion/container where its shortcode is
 * placed, avoiding a second nested 1400px shell and duplicated side padding.
 */
.mktv-solucoes {
	--mktv-solution-green: #087b45;
	--mktv-solution-ink: #17211d;
	--mktv-solution-muted: #65716b;
	--mktv-solution-surface: #f2f3f2;
	--mktv-solution-media: #fff;
	--mktv-solution-border: #64728d;
	--mktv-solution-focus: #319a5e;
	--mktv-solution-font: var(--font-gotham, "Gotham", Arial, Helvetica, sans-serif);

	position: relative;
	z-index: 1;
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: -moz-fit-content;
	min-height: fit-content;
	margin: 0 0 clamp(2rem, 4vw, 3.25rem);
	background: #fff;
	flex-grow: 0;
	flex-shrink: 0;
	clear: both;
	color: var(--mktv-solution-ink);
	font-family: var(--mktv-solution-font);
	line-height: 1.5;
}

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

.mktv-solucoes__grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.75rem);
}

.mktv-solucao-card {
	display: flex;
	float: none;
	clear: none;
	overflow: hidden;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--mktv-solution-surface);
	box-shadow: 0 8px 24px rgba(23, 33, 29, 0.08);
	flex-direction: column;
}

.mktv-solucao-card__media {
	position: relative;
	display: grid;
	overflow: hidden;
	width: 100%;
	border: 0;
	background: var(--mktv-solution-media);
	aspect-ratio: 6 / 5;
	place-items: center;
}

.mktv-solucao-card__media > img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: clamp(0.25rem, 0.65vw, 0.65rem) !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: none !important;
}

.mktv-solucao-card__placeholder {
	display: block;
	width: 28%;
	border: 1px solid #c8d2cc;
	aspect-ratio: 4 / 3;
}

.mktv-solucao-card__body {
	display: flex;
	min-height: 17rem;
	padding: clamp(1rem, 1.7vw, 1.4rem);
	flex: 1;
	flex-direction: column;
}

.mktv-solucao-card__labels {
	display: flex;
	margin: 0 0 0.55rem;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
}

.mktv-solucao-card__category {
	margin: 0;
	color: var(--mktv-solution-green);
	font-family: var(--mktv-solution-font);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1.35;
	text-transform: uppercase;
}

.mktv-solucoes .mktv-product-bay__brand {
	display: inline-flex;
	margin: 0;
	align-items: center;
	gap: 0.55rem;
	color: var(--mktv-solution-muted);
	font-family: var(--mktv-solution-font);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1.35;
	text-align: left;
	text-transform: uppercase;
}

.mktv-solucoes .mktv-product-bay__brand::before {
	color: #a7b1ab;
	content: "\00b7";
}

.mktv-solucao-card__title {
	margin: 0;
	color: var(--mktv-solution-ink);
	font-family: var(--mktv-solution-font);
	font-size: clamp(1.25rem, 1.45vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.mktv-solucao-card__title a,
.mktv-solucao-card__title a:visited {
	color: var(--mktv-solution-ink) !important;
	text-decoration: none;
}

.mktv-solucao-card__title a:hover,
.mktv-solucao-card__title a:focus,
.mktv-solucao-card__title a:focus-visible,
.mktv-solucao-card__title a:active {
	color: var(--mktv-solution-green) !important;
	text-decoration: none;
}

.mktv-solucoes .mktv-product-bay__summary {
	display: -webkit-box;
	overflow: hidden;
	max-width: 34ch;
	margin: 0.7rem 0 1.35rem;
	color: var(--mktv-solution-muted);
	font-family: var(--mktv-solution-font);
	font-size: clamp(0.9rem, 0.95vw, 1rem);
	font-weight: 400;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mktv-solucao-card__action,
.mktv-solucao-card__action:visited,
.mktv-solucoes__more,
.mktv-solucoes__more:visited {
	display: inline-flex;
	min-height: 3.25rem;
	margin-top: auto;
	padding: 0.75rem 1.25rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mktv-solution-border);
	border-radius: 2px;
	background: #fff;
	color: var(--mktv-solution-border) !important;
	font-family: var(--mktv-solution-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.mktv-solucao-card__action:hover,
.mktv-solucao-card__action:focus,
.mktv-solucao-card__action:focus-visible,
.mktv-solucao-card__action:active,
.mktv-solucoes__more:hover,
.mktv-solucoes__more:focus,
.mktv-solucoes__more:focus-visible,
.mktv-solucoes__more:active {
	border-color: var(--mktv-solution-green);
	background: #f5f8f6;
	color: var(--mktv-solution-green) !important;
	text-decoration: none;
}

.mktv-solucoes__footer {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 3.6rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	background: #fff;
	flex: 0 0 auto;
	justify-content: center;
}

.mktv-solucoes__more,
.mktv-solucoes__more:visited {
	width: auto;
	min-width: min(100%, 20rem);
	margin-top: 0;
	border-color: var(--mktv-solution-green);
	background: #fff;
	color: var(--mktv-solution-green) !important;
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
	font-weight: 500;
	letter-spacing: 0.015em;
	text-transform: uppercase;
}

/*
 * Native Elementor accordion panels are flex/grid containers. On mobile the
 * shortcode widget can otherwise be measured before its lazy images settle,
 * allowing the following section to paint over the final action. Reserving
 * intrinsic height on every wrapper keeps the button in normal document flow.
 */
.elementor-widget-shortcode:has(.mktv-solucoes),
.elementor-widget-shortcode:has(.mktv-solucoes) > .elementor-widget-container {
	min-height: -moz-fit-content;
	min-height: fit-content;
	flex-grow: 0;
	flex-shrink: 0;
}

.elementor-widget-shortcode:has(.mktv-solucoes) > .elementor-widget-container,
.elementor-widget-shortcode:has(.mktv-solucoes) .elementor-shortcode {
	display: flow-root;
	width: 100%;
}

.mktv-solucoes a:focus-visible {
	outline: 2px solid var(--mktv-solution-focus);
	outline-offset: 3px;
}

.mktv-solucoes .screen-reader-text {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.mktv-solucoes-vazio,
.mktv-solucoes-aviso {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.9rem 1rem;
	border-left: 3px solid #319a5e;
	background: #f4f7f5;
	color: var(--mktv-solution-ink, #17211d);
	font-family: var(--font-gotham, "Gotham", Arial, Helvetica, sans-serif);
	font-size: 0.9rem;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.mktv-solucoes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mktv-solucoes {
		margin-bottom: 2.5rem;
	}

	.mktv-solucoes__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mktv-solucao-card__action,
	.mktv-solucoes__more {
		width: 100%;
		min-width: 0;
	}

	.mktv-solucoes__footer {
		min-height: 3.75rem;
		margin-bottom: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mktv-solucao-card__action,
	.mktv-solucoes__more {
		transition-duration: 0.01ms;
	}
}