/*
 * Insumos/Reposição — catalog + standardized product page.
 * Reuses the Grupo Hídrica design tokens from the systems catalog.
 */

.gh-insumos,
.gh-insumo-single,
.gh-insumo-hero,
.gh-related,
.gh-insumos__drawer,
.gh-insumos__drawer-overlay,
.gh-insumos__floating {
	--gh-primary: #00b9f1;
	--gh-primary-dark: #0978be;
	--gh-green: #0c934b;
	--gh-green-light: #7eb93f;
	--gh-ink: #1f1f1f;
	--gh-text: #646b73;
	--gh-line: rgba(9, 120, 190, 0.14);
	--gh-surface: #ffffff;
	--gh-surface-soft: #effbff;
	--gh-shadow: 0 18px 50px rgba(10, 61, 93, 0.1);
	--gh-radius-lg: 32px;
	--gh-radius-md: 22px;
	--gh-header-offset: 138px;
	color: var(--gh-text);
	font-family: "Poppins", Arial, sans-serif;
}

.gh-insumos,
.gh-insumos *,
.gh-insumo-single,
.gh-insumo-single *,
.gh-insumo-hero,
.gh-insumo-hero *,
.gh-related,
.gh-related *,
.gh-insumos__drawer,
.gh-insumos__drawer * {
	box-sizing: border-box;
}

.gh-insumos a,
.gh-insumo-single a,
.gh-insumo-hero a,
.gh-related a {
	text-decoration: none;
}

.gh-insumos img,
.gh-insumos svg,
.gh-insumo-single img,
.gh-insumo-single svg,
.gh-insumo-hero svg,
.gh-related img,
.gh-related svg {
	display: block;
}

.gh-insumos__wrap,
.gh-insumo-single__wrap {
	margin: 0 auto;
	max-width: 1320px;
	padding: 0 24px;
	width: 100%;
}

/* ---------- Catalog: hero ------------------------------------------------ */

.gh-insumos {
	overflow: hidden;
	position: relative;
}

.gh-insumos__hero {
	background:
		radial-gradient(circle at 9% 16%, rgba(210, 222, 36, 0.24), transparent 26%),
		radial-gradient(circle at 88% 12%, rgba(0, 185, 241, 0.28), transparent 27%),
		linear-gradient(135deg, #0575ba 0%, #009bcf 52%, #0c934b 118%);
	color: #ffffff;
	margin-top: var(--gh-header-offset);
	padding: clamp(66px, 8vw, 112px) 0 clamp(60px, 7vw, 96px);
	position: relative;
}

.gh-insumos__eyebrow {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.12em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.gh-insumos__eyebrow::before {
	background: #d2de24;
	border-radius: 999px;
	content: "";
	height: 8px;
	width: 8px;
}

.gh-insumos__title {
	color: #ffffff;
	font-size: clamp(36px, 5.4vw, 66px);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.04;
	margin: 0;
	max-width: 900px;
}

.gh-insumos__lead {
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(16px, 1.7vw, 20px);
	line-height: 1.75;
	margin: 26px 0 0;
	max-width: 760px;
}

/* ---------- Catalog: hero summary ---------------------------------------- */

.gh-insumos__hero-grid {
	align-items: center;
	display: grid;
	gap: clamp(32px, 4.5vw, 64px);
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
}

.gh-insumos__summary {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--gh-radius-md);
	box-shadow: 0 20px 44px rgba(6, 46, 72, 0.18);
	display: flex;
	flex-direction: column;
	padding: 6px clamp(18px, 1.8vw, 26px);
}

.gh-insumos__summary-item {
	align-items: center;
	display: flex;
	gap: 16px;
	padding: 20px 0;
}

.gh-insumos__summary-item + .gh-insumos__summary-item {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.gh-insumos__summary-icon {
	align-items: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.gh-insumos__summary-icon svg {
	height: 22px;
	width: 22px;
}

.gh-insumos__summary-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gh-insumos__summary-copy strong {
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.gh-insumos__summary-copy span {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	line-height: 1.5;
}

/* ---------- Catalog: grid ------------------------------------------------ */

.gh-insumos__catalog {
	background: linear-gradient(180deg, var(--gh-surface-soft) 0%, #ffffff 30%);
	padding: clamp(64px, 7vw, 104px) 0;
}

.gh-insumos__intro {
	align-items: end;
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: 30px;
}

.gh-insumos__kicker {
	color: var(--gh-primary-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.gh-insumos__heading {
	color: var(--gh-ink);
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.12;
	margin: 0;
	max-width: 720px;
}

.gh-insumos__helper {
	font-size: 14px;
	line-height: 1.7;
	margin: 14px 0 0;
	max-width: 680px;
}

.gh-insumos__count {
	color: var(--gh-primary-dark);
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 4px;
	min-width: 150px;
	text-align: right;
}

.gh-insumos__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}

.gh-insumos__filter {
	appearance: none;
	background: #ffffff;
	border: 1px solid var(--gh-line);
	border-radius: 999px;
	color: var(--gh-ink);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 13px 18px;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.gh-insumos__filter:hover {
	border-color: rgba(9, 120, 190, 0.45);
	transform: translateY(-1px);
}

.gh-insumos__filter[aria-pressed="true"] {
	background: var(--gh-primary-dark);
	border-color: var(--gh-primary-dark);
	color: #ffffff;
}

.gh-insumos__filter:focus-visible,
.gh-insumo-card__link:focus-visible,
.gh-insumos__button:focus-visible,
.gh-insumo-single__cta:focus-visible,
.gh-insumo-gallery__thumb:focus-visible,
.gh-insumo-accordion__trigger:focus-visible,
.gh-insumos__drawer-close:focus-visible,
.gh-insumos__drawer-apply:focus-visible,
.gh-insumos__drawer-clear:focus-visible,
.gh-insumos__search-input:focus-visible {
	outline: 3px solid rgba(0, 185, 241, 0.42);
	outline-offset: 4px;
}

/* ---------- Toolbar: chips + "Filtros" trigger ------------------------- */

.gh-insumos__toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}

.gh-insumos__toolbar .gh-insumos__filters {
	flex: 1 1 auto;
	margin-bottom: 0;
}

.gh-insumos__filter--advanced {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	margin-left: auto;
	padding: 13px 18px;
	position: relative;
}

.gh-insumos__filter--advanced svg {
	height: 16px;
	width: 16px;
}

.gh-insumos__filter--advanced.has-active {
	background: var(--gh-primary-dark);
	border-color: var(--gh-primary-dark);
	color: #ffffff;
}

.gh-insumos__filter-badge {
	align-items: center;
	background: var(--gh-green);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	font-size: 11px;
	font-weight: 600;
	height: 18px;
	justify-content: center;
	line-height: 1;
	min-width: 18px;
	padding: 0 5px;
}

/* ---------- Filter drawer (off-canvas) --------------------------------- */

body.gh-insumos-drawer-open {
	overflow: hidden;
}

.gh-insumos__drawer-overlay {
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	background: rgba(10, 32, 48, 0.46);
	border: 0;
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity 300ms ease;
	z-index: 9998;
}

.gh-insumos__drawer-overlay.is-open {
	opacity: 1;
}

.gh-insumos__drawer {
	background: var(--gh-surface);
	bottom: 0;
	box-shadow: -24px 0 60px rgba(10, 61, 93, 0.18);
	display: flex;
	flex-direction: column;
	max-width: 92vw;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	width: 400px;
	z-index: 9999;
}

.gh-insumos__drawer.is-open {
	transform: translateX(0);
}

.gh-insumos__drawer-head {
	align-items: center;
	border-bottom: 1px solid var(--gh-line);
	display: flex;
	justify-content: space-between;
	padding: 22px 24px;
}

.gh-insumos__drawer-title {
	color: var(--gh-ink);
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

.gh-insumos__drawer-close {
	align-items: center;
	appearance: none;
	background: var(--gh-surface-soft);
	border: none;
	border-radius: 50%;
	color: var(--gh-primary-dark);
	cursor: pointer;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	transition: background-color 180ms ease, transform 220ms ease;
	width: 38px;
}

.gh-insumos__drawer-close:hover {
	background: #dff5fe;
	transform: rotate(90deg);
}

.gh-insumos__drawer-close svg {
	height: 18px;
	width: 18px;
}

.gh-insumos__drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 24px 8px;
}

.gh-insumos__search {
	margin-bottom: 22px;
	position: relative;
}

.gh-insumos__search-icon {
	color: var(--gh-primary-dark);
	left: 14px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.gh-insumos__search-icon svg {
	display: block;
	height: 17px;
	width: 17px;
}

.gh-insumos__search-input {
	appearance: none;
	background: var(--gh-surface-soft);
	border: 1px solid var(--gh-line);
	border-radius: 999px;
	color: var(--gh-ink);
	font: inherit;
	font-size: 14px;
	padding: 12px 16px 12px 40px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	width: 100%;
}

.gh-insumos__search-input:focus {
	border-color: var(--gh-primary);
	box-shadow: 0 0 0 3px rgba(0, 185, 241, 0.15);
	outline: none;
}

.gh-insumos__facet {
	border-top: 1px solid var(--gh-line);
	padding: 18px 0;
}

.gh-insumos__facet:first-of-type {
	border-top: none;
	padding-top: 0;
}

.gh-insumos__facet-title {
	color: var(--gh-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.gh-insumos__facet-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gh-insumos__option {
	align-items: center;
	background: var(--gh-surface-soft);
	border: 1px solid var(--gh-line);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	padding: 9px 14px 9px 11px;
	position: relative;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	user-select: none;
}

.gh-insumos__option:hover {
	border-color: rgba(9, 120, 190, 0.4);
}

/* Hidden when its characteristic is not available for the chosen category
 * (overrides the inline-flex display the UA [hidden] rule can't beat). */
.gh-insumos__option[hidden] {
	display: none;
}

.gh-insumos__option input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.gh-insumos__option-box {
	align-items: center;
	background: #ffffff;
	border: 1.5px solid rgba(9, 120, 190, 0.35);
	border-radius: 6px;
	display: inline-flex;
	flex: 0 0 auto;
	height: 18px;
	justify-content: center;
	transition: background-color 160ms ease, border-color 160ms ease;
	width: 18px;
}

.gh-insumos__option-box::after {
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	content: "";
	height: 9px;
	margin-top: -2px;
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
	transition: opacity 140ms ease, transform 140ms ease;
	width: 5px;
}

.gh-insumos__option input:checked ~ .gh-insumos__option-box {
	background: var(--gh-primary-dark);
	border-color: var(--gh-primary-dark);
}

.gh-insumos__option input:checked ~ .gh-insumos__option-box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.gh-insumos__option:has(input:checked) {
	background: #e3f6ff;
	border-color: var(--gh-primary);
	color: var(--gh-primary-dark);
}

.gh-insumos__option input:focus-visible ~ .gh-insumos__option-box {
	outline: 3px solid rgba(0, 185, 241, 0.42);
	outline-offset: 3px;
}

.gh-insumos__option-text {
	font-size: 13px;
	font-weight: 500;
}

.gh-insumos__drawer-empty {
	color: var(--gh-text);
	font-size: 14px;
	margin: 8px 0 16px;
	text-align: center;
}

.gh-insumos__drawer-foot {
	align-items: center;
	border-top: 1px solid var(--gh-line);
	display: flex;
	gap: 12px;
	padding: 16px 24px;
}

.gh-insumos__drawer-clear {
	appearance: none;
	background: none;
	border: none;
	color: var(--gh-text);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 8px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gh-insumos__drawer-clear:hover {
	color: var(--gh-primary-dark);
}

.gh-insumos__drawer-apply {
	appearance: none;
	background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-green) 130%);
	border: none;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	flex: 1 1 auto;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 14px 20px;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.gh-insumos__drawer-apply:hover {
	box-shadow: 0 10px 24px rgba(9, 120, 190, 0.28);
	transform: translateY(-1px);
}

/* ---------- Floating "Filtro de Produtos" pill ------------------------- */

.gh-insumos__floating,
.gh-insumos__floating * {
	box-sizing: border-box;
}

.gh-insumos__floating {
	align-items: center;
	appearance: none;
	background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-green) 130%);
	border: none;
	border-radius: 999px;
	bottom: 26px;
	box-shadow: 0 16px 36px rgba(9, 120, 190, 0.36);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-family: "Poppins", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	left: 50%;
	letter-spacing: 0.01em;
	line-height: 1;
	opacity: 0;
	padding: 15px 26px;
	pointer-events: none;
	position: fixed;
	transform: translateX(-50%) translateY(150%);
	transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease, box-shadow 220ms ease;
	white-space: nowrap;
	z-index: 9997;
}

.gh-insumos__floating.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.gh-insumos__floating.is-visible:hover {
	box-shadow: 0 20px 46px rgba(9, 120, 190, 0.46);
	transform: translateX(-50%) translateY(-3px);
}

.gh-insumos__floating.is-visible:active {
	transform: translateX(-50%) translateY(-1px);
}

.gh-insumos__floating:focus-visible {
	outline: 3px solid rgba(0, 185, 241, 0.5);
	outline-offset: 4px;
}

.gh-insumos__floating-icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.gh-insumos__floating-icon svg {
	display: block;
	height: 18px;
	width: 18px;
}

.gh-insumos__floating-badge {
	align-items: center;
	background: #ffffff;
	border-radius: 999px;
	color: var(--gh-primary-dark);
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	height: 20px;
	justify-content: center;
	line-height: 1;
	min-width: 20px;
	padding: 0 6px;
}

.gh-insumos__floating-badge[hidden] {
	display: none;
}

.gh-insumos__grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gh-insumos__empty {
	background: var(--gh-surface);
	border: 1px dashed var(--gh-line);
	border-radius: var(--gh-radius-md);
	color: var(--gh-text);
	font-size: 15px;
	padding: 42px 24px;
	text-align: center;
}

/* ---------- Catalog: card ------------------------------------------------ */

.gh-insumo-card {
	min-width: 0;
}

.gh-insumo-card[hidden] {
	display: none !important;
}

.gh-insumo-card__link {
	background: var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-md);
	box-shadow: 0 8px 28px rgba(10, 61, 93, 0.06);
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.gh-insumo-card__link::after {
	background: linear-gradient(90deg, var(--gh-primary), var(--gh-green-light));
	bottom: 0;
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 260ms ease;
	width: 100%;
}

.gh-insumo-card__link:hover {
	border-color: rgba(0, 185, 241, 0.36);
	box-shadow: var(--gh-shadow);
	color: inherit;
	transform: translateY(-7px);
}

.gh-insumo-card__link:hover::after {
	transform: scaleX(1);
}

.gh-insumo-card__media {
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at center, #ffffff 0%, #f5fafc 72%, #edf6f9 100%);
	overflow: hidden;
	position: relative;
}

.gh-insumo-card__media::after {
	background: linear-gradient(180deg, transparent 62%, rgba(2, 44, 70, 0.08));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.gh-insumo-card__image {
	display: block;
	height: 100%;
	object-fit: contain;
	object-position: center;
	width: 100%;
}

/* Small product badges shared by catalog cards, related cards and the gallery. */
.gh-insumo-badges {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 6px;
	left: 12px;
	max-width: calc(100% - 24px);
	pointer-events: none;
	position: absolute;
	top: 12px;
	z-index: 2;
}

.gh-insumo-badge {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.94);
	background: color-mix(in srgb, var(--gh-badge-accent) 8%, rgba(255, 255, 255, 0.94));
	border: 1px solid rgba(10, 61, 93, 0.12);
	border-color: color-mix(in srgb, var(--gh-badge-accent) 26%, white);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(10, 61, 93, 0.1);
	color: #25404b;
	display: inline-flex;
	font-size: 10px;
	font-weight: 600;
	gap: 5px;
	letter-spacing: 0.02em;
	line-height: 1.2;
	max-width: min(100%, 210px);
	min-height: 25px;
	padding: 4px 9px 4px 7px;
}

.gh-insumo-badge svg {
	color: var(--gh-badge-accent);
	flex: none;
	height: 13px;
	width: 13px;
}

.gh-insumo-badge__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gh-insumo-gallery__main .gh-insumo-badges {
	left: 18px;
	top: 18px;
}

.gh-insumo-gallery__main .gh-insumo-badge {
	font-size: 11px;
	max-width: min(100%, 240px);
	min-height: 28px;
}

.gh-insumo-card__tag {
	align-self: flex-start;
	background: var(--gh-surface-soft);
	border: 1px solid var(--gh-line);
	border-radius: 999px;
	color: var(--gh-primary-dark);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0 0 11px;
	max-width: 100%;
	overflow: hidden;
	padding: 5px 11px;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	width: fit-content;
}

.gh-insumo-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 22px 23px;
	background: #ffffff;
}

.gh-insumo-card__title {
	color: var(--gh-ink);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
}

.gh-insumo-card__description {
	color: var(--gh-text);
	font-size: 13px;
	line-height: 1.72;
	margin: 12px 0 0;
}

.gh-insumo-card__features {
	border-top: 1px solid rgba(9, 120, 190, 0.1);
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
}

.gh-insumo-card__features li {
	color: #4f5962;
	font-size: 11px;
	line-height: 1.55;
	padding-left: 17px;
	position: relative;
}

.gh-insumo-card__features li + li {
	margin-top: 7px;
}

.gh-insumo-card__features li::before {
	background: var(--gh-green-light);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 6px;
	width: 6px;
}

.gh-insumo-card__action {
	align-items: center;
	color: var(--gh-primary-dark);
	display: flex;
	font-size: 12px;
	font-weight: 600;
	gap: 9px;
	margin-top: auto;
	padding-top: 21px;
	text-transform: uppercase;
}

.gh-insumo-card__action svg {
	height: 16px;
	transition: transform 180ms ease;
	width: 16px;
}

.gh-insumo-card__link:hover .gh-insumo-card__action svg {
	transform: translateX(4px);
}

/* ---------- Catalog: guidance CTA ---------------------------------------- */

.gh-insumos__guidance {
	align-items: center;
	background:
		radial-gradient(circle at 86% 15%, rgba(0, 185, 241, 0.19), transparent 28%),
		linear-gradient(135deg, #172d3b 0%, #0e495e 100%);
	border-radius: var(--gh-radius-lg);
	color: #ffffff;
	display: grid;
	gap: 42px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: clamp(48px, 6vw, 80px);
	overflow: hidden;
	padding: clamp(34px, 5vw, 60px);
	position: relative;
}

.gh-insumos__guidance-title {
	color: #ffffff;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.14;
	margin: 0;
	max-width: 720px;
}

.gh-insumos__guidance-text {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.75;
	margin: 16px 0 0;
	max-width: 710px;
}

.gh-insumos__button {
	align-items: center;
	background: var(--gh-primary);
	border: 1px solid var(--gh-primary);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 10px;
	justify-content: center;
	letter-spacing: 0.045em;
	min-height: 52px;
	padding: 0 24px;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
	white-space: nowrap;
}

.gh-insumos__button:hover {
	background: var(--gh-green);
	border-color: var(--gh-green);
	color: #ffffff;
	transform: translateY(-2px);
}

.gh-insumos__button svg {
	height: 17px;
	width: 17px;
}

/* ---------- Reveal animation --------------------------------------------- */

.gh-insumos.is-enhanced .gh-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gh-insumos.is-enhanced .gh-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Single: modern hero ------------------------------------------ */

.gh-insumo-hero {
	background:
		radial-gradient(circle at 9% 16%, rgba(210, 222, 36, 0.24), transparent 26%),
		radial-gradient(circle at 88% 12%, rgba(0, 185, 241, 0.28), transparent 27%),
		linear-gradient(135deg, #0575ba 0%, #009bcf 52%, #0c934b 118%);
	color: #ffffff;
	font-family: "Poppins", Arial, sans-serif;
	isolation: isolate;
	margin-top: var(--gh-header-offset);
	overflow: hidden;
	padding: clamp(52px, 6vw, 92px) 0 clamp(46px, 5vw, 80px);
	position: relative;
}

.gh-insumo-hero::before,
.gh-insumo-hero::after {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.gh-insumo-hero::before {
	height: 420px;
	right: -170px;
	top: -210px;
	width: 420px;
}

.gh-insumo-hero::after {
	bottom: -220px;
	height: 340px;
	left: -120px;
	width: 340px;
}

.gh-insumo-hero__wrap {
	margin: 0 auto;
	max-width: 1320px;
	padding: 0 24px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.gh-insumo-hero__breadcrumb {
	align-items: center;
	color: rgba(255, 255, 255, 0.72);
	display: flex;
	flex-wrap: wrap;
	font-size: 12.5px;
	gap: 9px;
	margin-bottom: 20px;
}

.gh-insumo-hero__breadcrumb a {
	color: rgba(255, 255, 255, 0.86);
	transition: color 160ms ease;
}

.gh-insumo-hero__breadcrumb a:hover {
	color: #ffffff;
}

.gh-insumo-hero__crumb-current {
	color: #ffffff;
}

.gh-insumo-hero__badge {
	align-items: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 600;
	gap: 9px;
	letter-spacing: 0.1em;
	margin-bottom: 18px;
	padding: 7px 15px;
	text-transform: uppercase;
}

.gh-insumo-hero__badge::before {
	background: #d2de24;
	border-radius: 999px;
	content: "";
	height: 7px;
	width: 7px;
}

.gh-insumo-hero__title {
	color: #ffffff;
	font-size: clamp(32px, 4.6vw, 58px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0;
	max-width: 900px;
}

.gh-insumo-hero__lead {
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.7;
	margin: 22px 0 0;
	max-width: 680px;
}

.gh-insumo-hero__cta {
	align-items: center;
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 999px;
	color: var(--gh-primary-dark);
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.05em;
	margin-top: 30px;
	min-height: 52px;
	padding: 0 26px;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.gh-insumo-hero__cta svg {
	height: 16px;
	transition: transform 180ms ease;
	width: 16px;
}

.gh-insumo-hero__cta:hover {
	background: var(--gh-green);
	border-color: var(--gh-green);
	color: #ffffff;
	transform: translateY(-2px);
}

.gh-insumo-hero__cta:hover svg {
	transform: translateX(4px);
}

.gh-insumo-anchor {
	display: block;
	height: 0;
	scroll-margin-top: var(--gh-header-offset);
}

@keyframes ghInsumoHeroIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.gh-insumo-hero__wrap {
	animation: ghInsumoHeroIn 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- Single: reveal animation ------------------------------------- */

.gh-insumo-single-wrap.is-enhanced .gh-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gh-insumo-single-wrap.is-enhanced .gh-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Single product page ------------------------------------------ */

.gh-insumo-single {
	padding: clamp(48px, 6vw, 92px) 0 clamp(40px, 5vw, 72px);
}

.gh-insumo-single__grid {
	align-items: start;
	display: grid;
	gap: clamp(32px, 5vw, 64px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/*
 * Keep the media column (gallery) following the scroll (sticky) on the
 * two-column layout. The details column is always the taller one, so pinning
 * the shorter media column lets it slide along with the page and avoids blank
 * space beside the details while they scroll. Only active at >=901px, where
 * the grid still has two columns (align-items: start above is the prerequisite
 * for sticky to have room to travel).
 */
@media (min-width: 901px) {
	.gh-insumo-single__col--media {
		position: sticky;
		top: calc(var(--gh-header-offset) - 24px);
	}
}

.gh-insumo-gallery__main {
	background: radial-gradient(circle at center, #ffffff 0%, #f6fafc 72%, #eef6f9 100%);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-md);
	margin: 0;
	overflow: hidden;
	position: relative;
	touch-action: pan-y;
}

/* ---------- Gallery: desktop navigation arrows ------------------------ */

.gh-insumo-gallery__nav {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(10, 61, 93, 0.08);
	border-radius: 50%;
	box-shadow: 0 10px 28px rgba(10, 61, 93, 0.16);
	color: var(--gh-primary);
	cursor: pointer;
	display: flex;
	height: 46px;
	justify-content: center;
	opacity: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(0.9);
	transition: opacity 240ms ease, transform 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
	width: 46px;
	z-index: 2;
}

.gh-insumo-gallery__nav svg {
	display: block;
	pointer-events: none;
}

.gh-insumo-gallery__nav--prev {
	left: 16px;
}

.gh-insumo-gallery__nav--next {
	right: 16px;
}

.gh-insumo-gallery__nav--next svg {
	transform: scaleX(-1);
}

/* Fluid reveal: arrows surface when the gallery is hovered/focused. */
.gh-insumo-gallery:hover .gh-insumo-gallery__nav,
.gh-insumo-gallery:focus-within .gh-insumo-gallery__nav {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.gh-insumo-gallery__nav:hover {
	background: #ffffff;
	box-shadow: 0 14px 34px rgba(10, 61, 93, 0.22);
	transform: translateY(-50%) scale(1.06);
}

.gh-insumo-gallery__nav:active {
	transform: translateY(-50%) scale(0.96);
}

.gh-insumo-gallery__nav:focus-visible {
	opacity: 1;
	outline: 3px solid rgba(0, 185, 241, 0.42);
	outline-offset: 2px;
}

.gh-insumo-gallery__image {
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 0 auto;
	max-height: 560px;
	object-fit: cover;
	width: 100%;
}

.gh-insumo-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.gh-insumo-gallery__thumb {
	background: #ffffff;
	border: 1px solid var(--gh-line);
	border-radius: 14px;
	cursor: pointer;
	overflow: hidden;
	padding: 6px;
	transition: border-color 180ms ease, transform 180ms ease;
	width: 76px;
}

.gh-insumo-gallery__thumb img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	width: 100%;
}

.gh-insumo-gallery__thumb:hover {
	transform: translateY(-2px);
}

.gh-insumo-gallery__thumb.is-active {
	border-color: var(--gh-primary);
}

.gh-insumo-ideal {
	background:
		linear-gradient(150deg, rgba(0, 185, 241, 0.06) 0%, rgba(12, 147, 75, 0.05) 100%),
		var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-md);
	box-shadow: 0 14px 40px rgba(10, 61, 93, 0.07);
	margin-top: 28px;
	overflow: hidden;
	padding: 26px 26px 24px;
	position: relative;
	transition: box-shadow 320ms ease, transform 320ms ease, border-color 320ms ease;
}

.gh-insumo-ideal:hover {
	border-color: rgba(0, 185, 241, 0.3);
	box-shadow: 0 22px 54px rgba(10, 61, 93, 0.12);
	transform: translateY(-3px);
}

/* Soft decorative light, drifting gently in the corner. */
.gh-insumo-ideal__glow,
.gh-insumo-contact__glow {
	background: radial-gradient(closest-side, rgba(0, 185, 241, 0.28), rgba(0, 185, 241, 0));
	border-radius: 50%;
	content: "";
	height: 200px;
	pointer-events: none;
	position: absolute;
	right: -60px;
	top: -70px;
	width: 200px;
	z-index: 0;
	animation: ghIdealGlow 9s ease-in-out infinite alternate;
}

.gh-insumo-ideal__head,
.gh-insumo-ideal__chips,
.gh-insumo-ideal__text,
.gh-insumo-contact__head,
.gh-insumo-contact__text,
.gh-insumo-contact__cta {
	position: relative;
	z-index: 1;
}

.gh-insumo-ideal__head,
.gh-insumo-contact__head {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
}

.gh-insumo-ideal__icon,
.gh-insumo-contact__icon {
	align-items: center;
	background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-green) 115%);
	border-radius: 14px;
	box-shadow: 0 10px 22px rgba(0, 150, 199, 0.28);
	color: #ffffff;
	display: inline-flex;
	flex: none;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.gh-insumo-ideal__icon svg,
.gh-insumo-contact__icon svg {
	height: 24px;
	width: 24px;
}

.gh-insumo-ideal__label,
.gh-insumo-contact__label {
	color: var(--gh-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.gh-insumo-ideal__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gh-insumo-ideal__chip {
	align-items: center;
	background: var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: 999px;
	color: var(--gh-ink);
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.3;
	padding: 9px 16px 9px 12px;
	transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
}

.gh-insumo-ideal__chip svg {
	color: var(--gh-green);
	flex: none;
	height: 15px;
	transition: color 240ms ease, transform 240ms ease;
	width: 15px;
}

.gh-insumo-ideal__chip:hover {
	background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-green) 130%);
	border-color: transparent;
	color: #ffffff;
	transform: translateY(-2px);
}

.gh-insumo-ideal__chip:hover svg {
	color: #ffffff;
	transform: scale(1.12);
}

.gh-insumo-ideal__text {
	color: var(--gh-text);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0;
}

@keyframes ghIdealGlow {
	from {
		opacity: 0.75;
		transform: translate(0, 0) scale(1);
	}
	to {
		opacity: 1;
		transform: translate(-16px, 14px) scale(1.12);
	}
}

/* ---------- Aside: "Ideal para" + quote card, full-width row below ------ */

/*
 * Static full-width container placed below the product grid: the two cards
 * split the row 50/50 and do not scroll/stick (plain flow).
 */
.gh-insumo-aside {
	display: grid;
	gap: clamp(20px, 3vw, 32px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(32px, 5vw, 56px);
}

/* Inside the aside the gap handles the spacing from the gallery above. */
.gh-insumo-aside .gh-insumo-ideal {
	margin-top: 0;
}

/*
 * Quote card — mirrors the "Ideal para" card (same head/icon/label/glow),
 * with a slightly stronger accent to draw the eye to the primary action.
 */
.gh-insumo-contact {
	background:
		linear-gradient(150deg, rgba(0, 185, 241, 0.13) 0%, rgba(12, 147, 75, 0.1) 100%),
		var(--gh-surface);
	border: 1px solid rgba(0, 185, 241, 0.28);
	border-radius: var(--gh-radius-md);
	box-shadow: 0 18px 46px rgba(0, 150, 199, 0.14);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 26px 26px 24px;
	position: relative;
	transition: box-shadow 320ms ease, transform 320ms ease, border-color 320ms ease;
}

.gh-insumo-contact:hover {
	border-color: rgba(0, 185, 241, 0.5);
	box-shadow: 0 26px 60px rgba(0, 150, 199, 0.2);
	transform: translateY(-3px);
}

.gh-insumo-contact__text {
	color: var(--gh-text);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0 0 22px;
}

.gh-insumo-contact__cta {
	align-items: center;
	background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-green) 130%);
	border-radius: 999px;
	box-shadow: 0 14px 30px rgba(0, 150, 199, 0.3);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 10px;
	justify-content: center;
	letter-spacing: 0.05em;
	margin-top: auto;
	min-height: 52px;
	padding: 0 24px;
	text-align: center;
	text-transform: uppercase;
	transition: box-shadow 220ms ease, transform 220ms ease, filter 220ms ease;
}

.gh-insumo-contact__cta svg {
	flex: none;
	height: 16px;
	transition: transform 220ms ease;
	width: 16px;
}

.gh-insumo-contact__cta:hover {
	box-shadow: 0 20px 42px rgba(0, 150, 199, 0.4);
	filter: brightness(1.03);
	transform: translateY(-2px);
}

.gh-insumo-contact__cta:hover svg {
	transform: translateX(3px);
}

.gh-insumo-contact__cta:focus-visible {
	outline: 3px solid rgba(0, 185, 241, 0.42);
	outline-offset: 3px;
}

.gh-insumo-single__cta {
	align-items: center;
	border: 1px solid var(--gh-line);
	border-radius: 999px;
	color: var(--gh-primary-dark);
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.05em;
	margin-top: 26px;
	min-height: 52px;
	padding: 0 26px;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.gh-insumo-single__cta svg {
	height: 16px;
	width: 16px;
}

.gh-insumo-single__cta:hover {
	background: var(--gh-primary-dark);
	border-color: var(--gh-primary-dark);
	color: #ffffff;
	transform: translateY(-2px);
}

.gh-insumo-single__subtitle {
	color: var(--gh-ink);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
	position: relative;
}

.gh-insumo-single__subtitle::after {
	background: linear-gradient(90deg, var(--gh-green-light), var(--gh-primary));
	border-radius: 999px;
	bottom: -8px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 52px;
}

/* ---------- Single: accordion -------------------------------------------- */

.gh-insumo-accordion {
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-md);
	overflow: hidden;
}

.gh-insumo-accordion__item + .gh-insumo-accordion__item {
	border-top: 1px solid var(--gh-line);
}

.gh-insumo-accordion .gh-insumo-accordion__head {
	margin: 0;
}

.gh-insumo-accordion__trigger {
	align-items: center;
	appearance: none;
	background: #ffffff;
	border: 0;
	color: var(--gh-ink);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	gap: 16px;
	justify-content: space-between;
	padding: 10px 22px;
	text-align: left;
	transition: background-color 180ms ease, color 180ms ease;
	width: 100%;
}

.gh-insumo-accordion__item.is-open .gh-insumo-accordion__trigger,
.gh-insumo-accordion__trigger:hover {
	color: var(--gh-primary-dark);
}

.gh-insumo-accordion__icon {
	flex: 0 0 auto;
	height: 16px;
	position: relative;
	width: 16px;
}

.gh-insumo-accordion__icon::before,
.gh-insumo-accordion__icon::after {
	background: currentColor;
	border-radius: 999px;
	content: "";
	position: absolute;
	transition: transform 220ms ease, opacity 220ms ease;
}

.gh-insumo-accordion__icon::before {
	height: 2px;
	left: 2px;
	right: 2px;
	top: 7px;
}

.gh-insumo-accordion__icon::after {
	bottom: 2px;
	left: 7px;
	top: 2px;
	width: 2px;
}

.gh-insumo-accordion__item.is-open .gh-insumo-accordion__icon::after {
	opacity: 0;
	transform: scaleY(0);
}

.gh-insumo-accordion__panel {
	padding: 0 22px 15px;
}

.gh-insumo-accordion__panel[hidden] {
	display: none;
}

.gh-insumo-accordion__content {
	color: var(--gh-text);
	font-size: 13.5px;
	line-height: 1.75;
}

.gh-insumo-accordion__content p {
	margin: 0 0 10px;
}

.gh-insumo-accordion__content p:last-child {
	margin-bottom: 0;
}

/* ---------- Single: ficha técnica (spec table) --------------------------- */

.gh-insumo-spec {
	margin-top: clamp(28px, 4vw, 44px);
}

.gh-insumo-spec__title {
	margin-bottom: 18px;
}

/* Rounded, bordered shell; scrolls horizontally only if a value is very wide. */
.gh-insumo-spec__scroll {
	border: 1px solid var(--gh-line);
	border-radius: var(--gh-radius-md);
	box-shadow: 0 14px 40px rgba(10, 61, 93, 0.06);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gh-insumo-spec__table {
	border-collapse: collapse;
	font-size: 14.5px;
	width: 100%;
}

.gh-insumo-spec__row {
	transition: background-color 240ms ease;
}

/* Zebra striping like a clean spec sheet. */
.gh-insumo-spec__row:nth-child(odd) {
	background: rgba(10, 61, 93, 0.035);
}

/* Light, fluid highlight on hover. */
.gh-insumo-spec__row:hover {
	background: linear-gradient(90deg, rgba(0, 185, 241, 0.09) 0%, rgba(12, 147, 75, 0.06) 100%);
}

.gh-insumo-spec__label,
.gh-insumo-spec__value {
	padding: 14px 22px;
	text-align: left;
	vertical-align: top;
}

.gh-insumo-spec__label {
	color: var(--gh-ink);
	font-weight: 600;
	white-space: nowrap;
	width: 36%;
}

.gh-insumo-spec__value {
	color: var(--gh-text);
	line-height: 1.5;
}

/* ---------- Single: related products carousel --------------------------- */

/*
 * Tinted, full-bleed band that separates the related products from the white
 * product body above. The soft radial accents keep it on-brand (primary/green)
 * without competing with the cards.
 */
/*
 * Full-bleed band: the parent .single-portfolio-main-section has no side
 * padding, so the section already spans edge to edge. A soft layered gradient
 * plus two slow-drifting blurred orbs give a clean, modern separation from the
 * white blocks above/below without feeling heavy.
 */
.gh-related {
	background:
		radial-gradient(135% 110% at 100% 0, rgba(0, 185, 241, 0.16), transparent 55%),
		radial-gradient(120% 95% at 0 100%, rgba(12, 147, 75, 0.11), transparent 52%),
		linear-gradient(180deg, #f1faff 0%, var(--gh-surface-soft) 46%, #e7f6ff 100%);
	border-top: 1px solid var(--gh-line);
	border-bottom: 1px solid var(--gh-line);
	background-color: rgb(172 181 185 / 7%);
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 6vw, 96px) 0;
	position: relative;
}

/* Light, fluid depth: two soft orbs drifting behind the content. */
.gh-related::before,
.gh-related::after {
	border-radius: 50%;
	content: "";
	filter: blur(70px);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.gh-related::before {
	animation: gh-related-drift-a 18s ease-in-out infinite;
	background: radial-gradient(circle, rgba(0, 185, 241, 0.28), transparent 70%);
	height: 440px;
	right: -90px;
	top: -150px;
	width: 440px;
}

.gh-related::after {
	animation: gh-related-drift-b 22s ease-in-out infinite;
	background: radial-gradient(circle, rgba(12, 147, 75, 0.2), transparent 70%);
	bottom: -130px;
	height: 380px;
	left: -70px;
	width: 380px;
}

@keyframes gh-related-drift-a {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(-34px, 30px, 0);
	}
}

@keyframes gh-related-drift-b {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(30px, -26px, 0);
	}
}

.gh-related__wrap {
	margin: 0 auto;
	max-width: 1320px;
	padding: 0 24px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.gh-related__head {
	margin-bottom: clamp(26px, 3vw, 40px);
	max-width: 760px;
}

.gh-related__kicker {
	color: var(--gh-primary-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.gh-related__title {
	color: var(--gh-ink);
	display: inline-block;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	position: relative;
}

/* Same accent underline used by the single-page subtitles. */
.gh-related__title::after {
	background: linear-gradient(90deg, var(--gh-green-light), var(--gh-primary));
	border-radius: 999px;
	bottom: -8px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 52px;
}

.gh-related__carousel {
	position: relative;
}

/*
 * Horizontal scroll-snap rail. Vertical padding leaves room for the card hover
 * lift and shadow, since overflow-x: auto also clips the vertical axis.
 */
.gh-related__track {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 16px 4px 26px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.gh-related__track::-webkit-scrollbar {
	display: none;
}

.gh-related__item {
	flex: 0 0 clamp(262px, 25%, 300px);
	min-width: 0;
	scroll-snap-align: start;
}

/* Cards fill the item so the flex row stays visually aligned. */
.gh-related__item .gh-insumo-card,
.gh-related__item .gh-insumo-card__link {
	height: 100%;
}

/* Slightly gentler lift than the catalog grid, to stay inside the rail padding. */
.gh-related__item .gh-insumo-card__link:hover {
	transform: translateY(-5px);
}

/* Desktop nav arrows; hidden on touch-first viewports (see responsive block). */
.gh-related__nav {
	align-items: center;
	background: var(--gh-surface);
	border: 1px solid var(--gh-line);
	border-radius: 50%;
	box-shadow: 0 10px 30px rgba(10, 61, 93, 0.14);
	color: var(--gh-primary-dark);
	cursor: pointer;
	display: flex;
	height: 48px;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
	width: 48px;
	z-index: 2;
}

.gh-related__nav svg {
	height: 22px;
	width: 22px;
}

.gh-related__nav--prev {
	left: -12px;
}

.gh-related__nav--next {
	right: -12px;
}

.gh-related__nav:hover {
	background: var(--gh-primary-dark);
	border-color: var(--gh-primary-dark);
	color: #ffffff;
}

.gh-related__nav:focus-visible {
	outline: 2px solid var(--gh-primary);
	outline-offset: 3px;
}

.gh-related__nav:disabled {
	cursor: default;
	opacity: 0;
	pointer-events: none;
}

/* Row fits without scrolling: no arrows needed. */
.gh-related--static .gh-related__nav {
	display: none;
}

.gh-related__footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(26px, 3.2vw, 42px);
}

.gh-related .gh-related__all {
	align-items: center;
	background: linear-gradient(135deg, #00b9f1 0%, #0c934b 130%);
	border-radius: 999px;
	box-shadow: 0 14px 30px rgba(0, 150, 199, 0.3);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 10px;
	justify-content: center;
	letter-spacing: 0.05em;
	min-height: 52px;
	padding: 0 24px;
	text-align: center;
	text-transform: uppercase;
	transition: box-shadow 220ms ease, transform 220ms ease, filter 220ms ease;
}

.gh-related__all svg {
	flex: none;
	height: 16px;
	transition: transform 220ms ease;
	width: 16px;
}

.gh-related .gh-related__all:hover {
	background: linear-gradient(135deg, #00b9f1 0%, #0c934b 130%);
	box-shadow: 0 20px 42px rgba(0, 150, 199, 0.4);
	color: #ffffff;
	filter: brightness(1.03);
	transform: translateY(-2px);
}

.gh-related__all:hover svg {
	transform: translateX(3px);
}

.gh-related__all:focus-visible {
	outline: 3px solid rgba(0, 185, 241, 0.42);
	outline-offset: 3px;
}

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

@media (max-width: 1180px) {
	.gh-insumos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.gh-insumos,
	.gh-insumo-hero {
		--gh-header-offset: 130px;
	}
}

@media (max-width: 900px) {
	.gh-insumos__hero-grid {
		gap: 36px;
		grid-template-columns: 1fr;
	}

	.gh-insumos__summary {
		max-width: 520px;
	}

	.gh-insumos__guidance {
		align-items: start;
		grid-template-columns: 1fr;
	}

	.gh-insumos__button {
		justify-self: start;
	}

	.gh-insumo-single__grid {
		grid-template-columns: 1fr;
	}

	/* Touch-first: swipe/scroll replaces the arrows on the related carousel. */
	.gh-related__nav {
		display: none;
	}
}

@media (max-width: 680px) {
	.gh-insumo-badges,
	.gh-insumo-gallery__main .gh-insumo-badges {
		gap: 5px;
		left: 10px;
		top: 10px;
	}

	.gh-insumo-badge,
	.gh-insumo-gallery__main .gh-insumo-badge {
		font-size: 10px;
		max-width: min(100%, 170px);
		min-height: 24px;
		padding: 4px 8px 4px 7px;
	}

	.gh-insumos__hero,
	.gh-insumo-hero {
		margin-top: 0;
	}

	.gh-insumos__wrap,
	.gh-insumo-single__wrap,
	.gh-related__wrap {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Related carousel: edge-to-edge strip with a peek of the next card. */
	.gh-related__track {
		margin-left: -18px;
		margin-right: -18px;
		padding-left: 18px;
		padding-right: 18px;
		scroll-padding-left: 18px;
	}

	.gh-related__item {
		flex-basis: 78%;
	}

	.gh-related__all {
		justify-content: center;
		width: 100%;
	}

	.gh-insumos__intro {
		align-items: start;
		grid-template-columns: 1fr;
	}

	.gh-insumos__count {
		min-width: 0;
		text-align: left;
	}

	.gh-insumos__filters {
		flex-wrap: nowrap;
		margin-left: -18px;
		margin-right: -18px;
		overflow-x: auto;
		padding: 2px 18px 10px;
		scrollbar-width: none;
	}

	.gh-insumos__filters::-webkit-scrollbar {
		display: none;
	}

	.gh-insumos__filter {
		flex: 0 0 auto;
	}

	.gh-insumos__grid {
		grid-template-columns: 1fr;
	}

	.gh-insumos__guidance {
		border-radius: 24px;
		gap: 28px;
		padding: 32px 24px;
	}

	.gh-insumos__button {
		width: 100%;
	}

	.gh-insumo-single__cta,
	.gh-insumo-contact__cta {
		width: 100%;
	}

	/* Cards stack on phones. */
	.gh-insumo-aside {
		grid-template-columns: 1fr;
	}

	/* Tighter spec table on phones. */
	.gh-insumo-spec__label,
	.gh-insumo-spec__value {
		padding: 12px 16px;
	}

	.gh-insumo-spec__label {
		width: 42%;
	}

	/* Mobile gallery: arrows give way to touch gestures. */
	.gh-insumo-gallery__nav {
		display: none;
	}

	/* Thumbs become a touch-draggable horizontal strip. */
	.gh-insumo-gallery__thumbs {
		flex-wrap: nowrap;
		margin-left: -18px;
		margin-right: -18px;
		overflow-x: auto;
		padding: 2px 18px 8px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.gh-insumo-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.gh-insumo-gallery__thumb {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.gh-insumo-hero__wrap {
		padding-left: 18px;
		padding-right: 18px;
	}

	.gh-insumo-hero__cta {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-insumos *,
	.gh-insumos *::before,
	.gh-insumos *::after,
	.gh-insumo-single *,
	.gh-insumo-single *::before,
	.gh-insumo-single *::after,
	.gh-insumo-hero *,
	.gh-insumo-hero *::before,
	.gh-insumo-hero *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.gh-insumos__drawer,
	.gh-insumos__drawer *,
	.gh-insumos__drawer-overlay {
		transition-duration: 0.01ms !important;
	}

	.gh-insumos.is-enhanced .gh-reveal,
	.gh-insumo-single-wrap.is-enhanced .gh-reveal {
		opacity: 1;
		transform: none;
	}

	.gh-insumo-hero__wrap {
		animation: none;
	}

	.gh-insumo-ideal__glow {
		animation: none;
	}

	.gh-related::before,
	.gh-related::after {
		animation: none;
	}
}

/* ---------- Drawer: mobile bottom sheet -------------------------------- */

@media (max-width: 680px) {
	.gh-insumos__toolbar {
		gap: 12px;
	}

	.gh-insumos__filter--advanced {
		flex: 1 0 100%;
		justify-content: center;
		margin-left: 0;
	}

	.gh-insumos__drawer {
		border-radius: var(--gh-radius-lg) var(--gh-radius-lg) 0 0;
		bottom: 0;
		box-shadow: 0 -20px 50px rgba(10, 61, 93, 0.22);
		left: 0;
		max-height: 88vh;
		max-width: 100%;
		right: 0;
		top: auto;
		transform: translateY(100%);
		width: 100%;
	}

	.gh-insumos__drawer.is-open {
		transform: translateY(0);
	}

	.gh-insumos__drawer-head {
		padding-top: 26px;
		position: relative;
	}

	.gh-insumos__drawer-head::before {
		background: rgba(9, 120, 190, 0.25);
		border-radius: 999px;
		content: "";
		height: 4px;
		left: 50%;
		position: absolute;
		top: 9px;
		transform: translateX(-50%);
		width: 44px;
	}

	.gh-insumos__floating {
		bottom: 16px;
		font-size: 13.5px;
		padding: 13px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-insumos__floating {
		transition-duration: 0.01ms !important;
	}
}