/**
 * Hero home: posición manual en px (botones + dots).
 * Cargado después de hero-home-mobile.css.
 * Editá solo los valores en px indicados abajo.
 */

/* --- Marca: CTA primario hero (rojo neón premium, logo Auto Club Detailing) --- */
:root {
	/* Rojos: profundidad → neón (editá aquí la paleta) */
	--acr-hero-btn-red-void: #1f0508;
	--acr-hero-btn-red-deep: #420c10;
	--acr-hero-btn-red-mid: #751018;
	--acr-hero-btn-red-intense: #c41f2b;
	--acr-hero-btn-red-hot: #ff5c6a;

	/* Texto + borde interno */
	--acr-hero-btn-text: #fafafa;
	--acr-hero-btn-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	--acr-hero-btn-border: rgba(255, 145, 155, 0.34);
	--acr-hero-btn-inset-light: rgba(255, 175, 180, 0.36);
	--acr-hero-btn-inset-dark: rgba(0, 0, 0, 0.4);

	/*
	 * Glow rojo (control principal del “neón”): dos capas suaves.
	 * Subí/bajá el último número de cada rgba (opacidad) o el blur (18px / 34px).
	 */
	--acr-hero-btn-shadow-glow: 0 0 18px rgba(232, 52, 66, 0.34), 0 0 36px rgba(175, 32, 48, 0.13);
	--acr-hero-btn-shadow-glow-hover: 0 0 22px rgba(238, 58, 70, 0.42), 0 0 42px rgba(185, 38, 52, 0.17);

	/* --- Shimmer / reflejo (.has-shimmer en .hero-btn-primary) --- */
	--acr-hero-shimmer-skew: -16deg; /* inclinación de la franja (más negativo = más diagonal) */
	--acr-hero-shimmer-opacity-peak: 0.38; /* brillo máximo al pasar (0–1; sutil ≈ 0.3–0.45) */
	--acr-hero-shimmer-duration-init: 1.05s; /* velocidad barrido al cargar */
	--acr-hero-shimmer-delay-init: 0.4s; /* espera tras pintar la página */
	--acr-hero-shimmer-duration-hover: 0.82s; /* velocidad barrido en hover (= barrido automático) */
	/* Número puro en ms: frecuencia del barrido automático (leído por main.js) */
	--acr-hero-shimmer-interval-ms: 4000;
	--acr-hero-shimmer-angle: 108deg; /* gradiente de la franja */
	--acr-hero-shimmer-band-width: 48%; /* ancho relativo de la banda */
	--acr-hero-shimmer-gradient-mid: 0.22; /* opacidad del centro del gradiente (brillo) */

	/* CONTROLES BOTON "Ver servicios" */
	--hero-services-mobile-height: 50px;
	--hero-services-mobile-padding: 7px 24px;
	--hero-services-mobile-gap: 10px;
	--hero-services-mobile-radius: 13px;
	--hero-services-mobile-icon-size: 27px;
	--hero-services-mobile-gear-size: 10px;
	--hero-services-mobile-font-size: 16px;
	--hero-services-mobile-font-weight: 600;

	--hero-services-desktop-height: 64px;
	--hero-services-desktop-padding: 10px 36px;
	--hero-services-desktop-gap: 16px;
	--hero-services-desktop-radius: 16px;
	--hero-services-desktop-icon-size: 28px;
	--hero-services-desktop-gear-size: 14px;
	--hero-services-desktop-font-size: 20px;
	--hero-services-desktop-font-weight: 600;
}

.Projects-Button {
	position: relative;
	width: fit-content;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 12px;
	gap: 6px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 8px;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.22);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition:
		transform 0.12s ease,
		background-color 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		color 0.3s ease;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.18);
}

.Projects-Button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 0, 51, 0.14), transparent 42%),
		linear-gradient(135deg, rgba(217, 4, 22, 0.12), rgba(0, 0, 0, 0.04) 48%, rgba(217, 4, 22, 0.08));
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 0;
}

.Projects-Button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 45%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.42), rgba(255, 0, 51, 0.34), transparent);
	transform: translateX(0) skewX(-20deg);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

.Projects-Button:hover::before,
.Projects-Button.btn-auto-hover::before,
.Projects-Button.is-clicked::before {
	opacity: 1;
}

.Projects-Button:hover::after,
.Projects-Button.btn-auto-hover::after,
.Projects-Button.is-clicked::after {
	animation: acr-services-shine 0.8s ease forwards;
}

@keyframes acr-services-shine {
	0% {
		opacity: 0;
		transform: translateX(0) skewX(-20deg);
	}
	15% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateX(320%) skewX(-20deg);
	}
}

.IconContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	position: relative;
	z-index: 1;
}
.svgBG {
	width: 18px;
	height: auto;
	transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}
.svgFG {
	width: 6px;
	height: auto;
	z-index: 2;
	position: absolute;
	transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}
.text {
	color: rgb(240, 240, 240);
	font-weight: 500;
	font-size: 13px;
	position: relative;
	z-index: 1;
	transition: color 0.3s ease;
}
.Projects-Button:hover .svgFG,
.Projects-Button.is-clicked .svgFG {
	animation: clockwise 2s linear infinite;
}

.Projects-Button.btn-auto-hover .svgFG {
	animation: clockwise 1.2s linear infinite;
}

.Projects-Button:hover .svgBG,
.Projects-Button.is-clicked .svgBG {
	animation: anti-clockwise 2s linear infinite;
}

.Projects-Button.btn-auto-hover .svgBG {
	animation: anti-clockwise 1.2s linear infinite;
}
@keyframes clockwise {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes anti-clockwise {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
.Projects-Button:hover,
.Projects-Button.is-clicked {
	color: oklch(78.9% 0.154 211.53);
	background-color: rgba(120, 0, 20, 0.18);
	border-color: rgba(255, 0, 51, 0.58);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.18),
		inset 0 0 18px rgba(217, 4, 22, 0.16),
		0px 10px 10px rgba(0, 0, 0, 0.18),
		0 0 20px rgba(217, 4, 22, 0.22);
}

.Projects-Button:active,
.Projects-Button.is-pressed {
	transform: scale(0.97) translateY(2px);
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, 0.28),
		inset 0 0 16px rgba(217, 4, 22, 0.2),
		0 6px 16px rgba(0, 0, 0, 0.24),
		0 0 16px rgba(217, 4, 22, 0.24);
}

.Projects-Button:hover .text,
.Projects-Button:hover svg,
.Projects-Button:hover i,
.Projects-Button.is-clicked .text,
.Projects-Button.is-clicked svg,
.Projects-Button.is-clicked i {
	color: oklch(78.9% 0.154 211.53);
}

.Projects-Button:hover .svgBG [fill],
.Projects-Button:hover .svgFG path,
.Projects-Button:hover i,
.Projects-Button.is-clicked .svgBG [fill],
.Projects-Button.is-clicked .svgFG path,
.Projects-Button.is-clicked i {
	fill: oklch(78.9% 0.154 211.53);
}

.Projects-Button:hover .svgBG [stroke],
.Projects-Button:hover .svgBG line,
.Projects-Button:hover .svgFG circle,
.Projects-Button:hover i,
.Projects-Button.is-clicked .svgBG [stroke],
.Projects-Button.is-clicked .svgBG line,
.Projects-Button.is-clicked .svgFG circle,
.Projects-Button.is-clicked i {
	stroke: oklch(78.9% 0.154 211.53);
}

.Projects-Button:hover .svgFG circle,
.Projects-Button.is-clicked .svgFG circle {
	fill: none;
}

.Projects-Button.btn-auto-hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
}

.hero-work-btn-wrapper.btn-wrapper {
	position: relative;
	display: inline-block;
}

.hero-work-btn-wrapper .btn {
	--border-radius: 24px;
	--padding: 4px;
	--transition: 0.4s;
	--button-color: #101010;
	--highlight-color-hue: 186deg;

	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 0.5em 0.5em 1.1em;
	font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
	font-size: 1em;
	font-weight: 400;
	background-color: var(--button-color);
	box-shadow:
		inset 0px 1px 1px rgba(255, 255, 255, 0.2),
		inset 0px 2px 2px rgba(255, 255, 255, 0.15),
		inset 0px 4px 4px rgba(255, 255, 255, 0.1),
		inset 0px 8px 8px rgba(255, 255, 255, 0.05),
		inset 0px 16px 16px rgba(255, 255, 255, 0.05),
		0px -1px 1px rgba(0, 0, 0, 0.02),
		0px -2px 2px rgba(0, 0, 0, 0.03),
		0px -4px 4px rgba(0, 0, 0, 0.05),
		0px -8px 8px rgba(0, 0, 0, 0.06),
		0px -16px 16px rgba(0, 0, 0, 0.08);
	border: solid 1px #fff2;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition:
		box-shadow var(--transition),
		border var(--transition),
		background-color var(--transition);
}

.hero-work-btn-wrapper .btn::before {
	content: "";
	position: absolute;
	top: calc(0px - var(--padding));
	left: calc(0px - var(--padding));
	width: calc(100% + var(--padding) * 2);
	height: calc(100% + var(--padding) * 2);
	border-radius: calc(var(--border-radius) + var(--padding));
	pointer-events: none;
	background-image: linear-gradient(0deg, #0004, #000a);
	z-index: -1;
	transition:
		box-shadow var(--transition),
		filter var(--transition);
	box-shadow:
		0 -8px 8px -6px #0000 inset,
		0 -16px 16px -8px #00000000 inset,
		1px 1px 1px #fff2,
		2px 2px 2px #fff1,
		-1px -1px 1px #0002,
		-2px -2px 2px #0001;
}

.hero-work-btn-wrapper .btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	pointer-events: none;
	background-image: linear-gradient(
		0deg,
		#fff,
		hsl(var(--highlight-color-hue), 100%, 70%),
		hsla(var(--highlight-color-hue), 100%, 70%, 50%),
		8%,
		transparent
	);
	background-position: 0 0;
	opacity: 0;
	transition:
		opacity var(--transition),
		filter var(--transition);
}

.hero-work-btn-wrapper .btn-letter {
	position: relative;
	display: inline-block;
	color: #fff5;
	animation: letter-anim 2s ease-in-out infinite;
	transition:
		color var(--transition),
		text-shadow var(--transition),
		opacity var(--transition);
}

@keyframes letter-anim {
	50% {
		text-shadow: 0 0 3px #fff8;
		color: #fff;
	}
}

.hero-work-btn-wrapper .btn-svg {
	flex-grow: 1;
	height: 24px;
	margin-right: 0.5rem;
	fill: #e8e8e8;
	animation: flicker 2s linear infinite;
	animation-delay: 0.5s;
	filter: drop-shadow(0 0 2px #fff9);
	transition:
		fill var(--transition),
		filter var(--transition),
		opacity var(--transition);
}

@keyframes flicker {
	50% {
		opacity: 0.3;
	}
}

.hero-work-btn-wrapper .txt-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 7.2em;
	white-space: nowrap;
}

.hero-work-btn-wrapper .txt-1,
.hero-work-btn-wrapper .txt-2 {
	position: absolute;
	left: 0;
	word-spacing: normal;
	white-space: nowrap;
	color: #fff;
	line-height: 1;
	text-align: left;
}

.hero-work-btn-wrapper .txt-1 {
	animation: appear-anim 1s ease-in-out forwards;
}

.hero-work-btn-wrapper .txt-2 {
	opacity: 0;
}

@keyframes appear-anim {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.hero-work-btn-wrapper .btn:focus .txt-1,
.hero-work-btn-wrapper .btn.btn-auto-hover .txt-1,
.hero-work-btn-wrapper .btn.is-clicked .txt-1 {
	animation: opacity-anim 0.3s ease-in-out forwards;
	animation-delay: 1s;
}

.hero-work-btn-wrapper .btn:focus .txt-2,
.hero-work-btn-wrapper .btn.btn-auto-hover .txt-2,
.hero-work-btn-wrapper .btn.is-clicked .txt-2 {
	animation: opacity-anim 0.3s ease-in-out reverse forwards;
	animation-delay: 1s;
}

@keyframes opacity-anim {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

.hero-work-btn-wrapper .btn:focus .btn-letter,
.hero-work-btn-wrapper .btn.btn-auto-hover .btn-letter,
.hero-work-btn-wrapper .btn.is-clicked .btn-letter {
	animation:
		focused-letter-anim 1s ease-in-out forwards,
		letter-anim 1.2s ease-in-out infinite;
	animation-delay: 0s, 1s;
}

@keyframes focused-letter-anim {
	0%, 100% {
		filter: blur(0px);
	}
	50% {
		transform: scale(2);
		filter: blur(10px) brightness(150%)
			drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%));
	}
}

.hero-work-btn-wrapper .btn:focus .btn-svg,
.hero-work-btn-wrapper .btn.btn-auto-hover .btn-svg,
.hero-work-btn-wrapper .btn.is-clicked .btn-svg {
	animation-duration: 1.2s;
	animation-delay: 0.2s;
}

.hero-work-btn-wrapper .btn:focus::before,
.hero-work-btn-wrapper .btn.btn-auto-hover::before,
.hero-work-btn-wrapper .btn.is-clicked::before {
	box-shadow:
		0 -8px 12px -6px #fff3 inset,
		0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset,
		1px 1px 1px #fff3,
		2px 2px 2px #fff1,
		-1px -1px 1px #0002,
		-2px -2px 2px #0001;
}

.hero-work-btn-wrapper .btn:focus::after,
.hero-work-btn-wrapper .btn.btn-auto-hover::after,
.hero-work-btn-wrapper .btn.is-clicked::after {
	opacity: 0.6;
	mask-image: linear-gradient(0deg, #fff, transparent);
	filter: brightness(100%);
}

.hero-work-btn-wrapper .btn-letter:nth-child(1),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; }

.hero-work-btn-wrapper .btn-letter:nth-child(2),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; }

.hero-work-btn-wrapper .btn-letter:nth-child(3),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; }

.hero-work-btn-wrapper .btn-letter:nth-child(4),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; }

.hero-work-btn-wrapper .btn-letter:nth-child(5),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; }

.hero-work-btn-wrapper .btn-letter:nth-child(6),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; }

.hero-work-btn-wrapper .btn-letter:nth-child(7),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; }

.hero-work-btn-wrapper .btn-letter:nth-child(8),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; }

.hero-work-btn-wrapper .btn-letter:nth-child(9),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; }

.hero-work-btn-wrapper .btn-letter:nth-child(10),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; }

.hero-work-btn-wrapper .btn-letter:nth-child(11),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; }

.hero-work-btn-wrapper .btn-letter:nth-child(12),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; }

.hero-work-btn-wrapper .btn-letter:nth-child(13),
.hero-work-btn-wrapper .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; }

.hero-work-btn-wrapper .btn:active {
	border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);
	background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}

.hero-work-btn-wrapper .btn:active::before {
	box-shadow:
		0 -8px 12px -6px #fffa inset,
		0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset,
		1px 1px 1px #fff4,
		2px 2px 2px #fff2,
		-1px -1px 1px #0002,
		-2px -2px 2px #0001;
}

.hero-work-btn-wrapper .btn:active::after {
	opacity: 1;
	mask-image: linear-gradient(0deg, #fff, transparent);
	filter: brightness(200%);
}

.hero-work-btn-wrapper .btn:active .btn-letter {
	text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%);
	animation: none;
}

.hero-work-btn-wrapper .btn:hover,
.hero-work-btn-wrapper .btn.btn-auto-hover {
	border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%);
}

.hero-work-btn-wrapper .btn:hover::before,
.hero-work-btn-wrapper .btn.btn-auto-hover::before {
	box-shadow:
		0 -8px 8px -6px #fffa inset,
		0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
		1px 1px 1px #fff2,
		2px 2px 2px #fff1,
		-1px -1px 1px #0002,
		-2px -2px 2px #0001;
}

.hero-work-btn-wrapper .btn:hover::after,
.hero-work-btn-wrapper .btn.btn-auto-hover::after {
	opacity: 1;
	mask-image: linear-gradient(0deg, #fff, transparent);
}

.hero-work-btn-wrapper .btn:hover .btn-svg,
.hero-work-btn-wrapper .btn.btn-auto-hover .btn-svg {
	fill: #fff;
	filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
		drop-shadow(0 -4px 6px #0009);
	animation: none;
}

/* Reflejo que cruza el CTA (una pasada; no infinito) */
@keyframes acrHeroBtnShimmerSweep {
	0% {
		transform: translate3d(-118%, 0, 0) skewX(var(--acr-hero-shimmer-skew, -16deg));
		opacity: 0;
	}
	12% {
		opacity: var(--acr-hero-shimmer-opacity-peak, 0.38);
	}
	100% {
		transform: translate3d(238%, 0, 0) skewX(var(--acr-hero-shimmer-skew, -16deg));
		opacity: 0;
	}
}

.home-hero-header .hero-btn-primary.has-shimmer {
	position: relative;
	overflow: hidden;
}

.home-hero-header .hero-btn-primary.has-shimmer::before {
	content: "";
	position: absolute;
	top: -25%;
	left: 0;
	width: var(--acr-hero-shimmer-band-width, 48%);
	height: 150%;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(
		var(--acr-hero-shimmer-angle, 108deg),
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 38%,
		rgba(255, 245, 245, var(--acr-hero-shimmer-gradient-mid, 0.22)) 50%,
		rgba(255, 255, 255, 0) 62%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translate3d(-120%, 0, 0) skewX(var(--acr-hero-shimmer-skew, -16deg));
	opacity: 0;
}

.home-hero-header .hero-btn-primary.has-shimmer.play-shimmer-on-load::before {
	animation: acrHeroBtnShimmerSweep var(--acr-hero-shimmer-duration-init, 1.05s)
		var(--acr-hero-shimmer-delay-init, 0.4s) ease-out forwards;
}

/* Barrido automático periódico (misma animación / duración que hover) */
.home-hero-header .hero-btn-primary.has-shimmer.acr-shimmer-interval-tick::before {
	animation: acrHeroBtnShimmerSweep var(--acr-hero-shimmer-duration-hover, 0.82s) ease-out forwards;
}

@media (hover: hover) and (pointer: fine) {
	.home-hero-header .hero-btn-primary.has-shimmer:hover::before,
	.home-hero-header .hero-btn-primary.has-shimmer:focus-visible::before {
		animation: acrHeroBtnShimmerSweep var(--acr-hero-shimmer-duration-hover, 0.82s) ease-out;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero-header .hero-btn-primary.has-shimmer::before {
		animation: none !important;
		opacity: 0 !important;
		transform: none !important;
	}
}

.home-hero-header .hero-btn-primary.has-shimmer .hero-btn-primary__inner {
	position: relative;
	z-index: 2;
}

/* ---------- Móvil (≤768px): control total en px ---------- */
@media screen and (max-width: 768px) {
	/*
	 * CTA primario rojo neón (móvil): layout en px + colores en :root (--acr-hero-btn-*).
	 * .hero-btn-primary = caja del pill | .hero-btn-primary__inner = texto + flecha
	 */
	.home-hero-header {
		/* Padding del pill (equilibrá arriba/abajo si el contenido “se pega” a un borde) */
		--hero-primary-pad-top: 7px;
		--hero-primary-pad-bottom: 7px;
		--hero-primary-pad-x: 14px;
		--hero-primary-min-height: 0;

		--hero-primary-icon-size: 18px;
		--hero-primary-line-height: 1.2; /* solo en .hero-btn-primary__inner */
		--hero-primary-gap: 6px;

		/*
		 * Desplazo fino del CONTENIDO (texto + flecha juntos), sin redibujar el botón:
		 * positivo en Y = bajar; negativo = subir. Unidades: px.
		 * Si en el emulador se ve “muy arriba”, probá --hero-primary-content-nudge-y: 2px a 5px.
		 */
		--hero-primary-content-nudge-x: 0px;
		--hero-primary-content-nudge-y: 8px;

		/* Solo la flecha (relativo al texto; útil si el ícono queda desalineado) */
		--hero-primary-icon-nudge-x: 0px;
		--hero-primary-icon-nudge-y: 0px;
		/* Cuánto se corre la flecha a la derecha al hover (suma a icon-nudge-x) */
		--hero-primary-arrow-hover-shift-x: 4px;
	}

	.home-hero-header .hero-buttons-container {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		/* Suben/bajan con la altura útil del viewport (muchos emuladores / ratios) */
		bottom: clamp(3.75rem, 10.5vh, 5.35rem);
		z-index: 25;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(0.625rem, 2.2vw, 0.875rem);
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: clamp(0.5rem, 3.5vw, 1rem);
		padding-right: clamp(0.5rem, 3.5vw, 1rem);
		margin: 0;
		pointer-events: none;
	}

	.home-hero-header .hero-buttons-container > * {
		pointer-events: auto;
		margin: 0;
	}

	.home-hero-header .hero-btn-primary {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: min(15rem, calc(100vw - clamp(1.25rem, 7vw, 2.25rem)));
		max-width: 100%;
		padding: var(--hero-primary-pad-top) var(--hero-primary-pad-x)
			var(--hero-primary-pad-bottom);
		box-sizing: border-box;
		border-radius: 9999px;
		font-weight: 500;
		font-size: clamp(0.78rem, 2.4vw + 0.52rem, 0.875rem);
		/* 1 = sin “strut” de línea en el <a>; evita que el bloque quede arriba en flex */
		line-height: 1;
		min-height: var(--hero-primary-min-height);
		max-height: none;
		color: var(--acr-hero-btn-text);
		text-decoration: none;
		border: 1px solid var(--acr-hero-btn-border);
		cursor: pointer;
		background-image: linear-gradient(
			118deg,
			var(--acr-hero-btn-red-void) 0%,
			var(--acr-hero-btn-red-deep) 20%,
			var(--acr-hero-btn-red-mid) 46%,
			var(--acr-hero-btn-red-intense) 56%,
			var(--acr-hero-btn-red-hot) 63%,
			var(--acr-hero-btn-red-mid) 72%,
			var(--acr-hero-btn-red-deep) 88%,
			var(--acr-hero-btn-red-void) 100%
		);
		box-shadow:
			var(--acr-hero-btn-shadow-glow),
			0 6px 22px rgba(0, 0, 0, 0.42),
			inset 0 1px 0 var(--acr-hero-btn-inset-light),
			inset 0 -1px 0 var(--acr-hero-btn-inset-dark);
		text-shadow: var(--acr-hero-btn-text-shadow);
		transition: transform 300ms ease, box-shadow 300ms ease;
	}

	.home-hero-header .hero-btn-primary:hover {
		transform: scale(1.04);
		box-shadow:
			var(--acr-hero-btn-shadow-glow-hover),
			0 8px 26px rgba(0, 0, 0, 0.46),
			inset 0 1px 0 var(--acr-hero-btn-inset-light),
			inset 0 -1px 0 var(--acr-hero-btn-inset-dark);
	}

	.home-hero-header .hero-btn-primary__inner {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		align-content: center;
		gap: var(--hero-primary-gap);
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		line-height: var(--hero-primary-line-height);
		min-height: 0;
		text-align: center;
		white-space: normal;
		overflow-wrap: break-word;
		transform: translate(
			var(--hero-primary-content-nudge-x),
			var(--hero-primary-content-nudge-y)
		);
	}

	.home-hero-header .hero-btn-primary__inner svg {
		flex-shrink: 0;
		display: block;
		width: var(--hero-primary-icon-size);
		height: var(--hero-primary-icon-size);
		align-self: center;
		transform: translate(
			var(--hero-primary-icon-nudge-x),
			var(--hero-primary-icon-nudge-y)
		);
	}

	.home-hero-header .hero-btn-primary.group:hover .hero-btn-primary__inner svg {
		transform: translate(
			calc(var(--hero-primary-icon-nudge-x) + var(--hero-primary-arrow-hover-shift-x)),
			var(--hero-primary-icon-nudge-y)
		);
		transition: transform 300ms ease;
	}

	.home-hero-header .hero-btn-secondary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: min(15rem, calc(100vw - clamp(1.25rem, 7vw, 2.25rem)));
		max-width: 100%;
		padding: clamp(8px, 2vw, 10px) clamp(12px, 3.5vw, 16px);
		box-sizing: border-box;
		border-radius: 9999px;
		font-size: clamp(0.78rem, 2.4vw + 0.52rem, 0.875rem);
		line-height: 1.25;
		font-weight: 500;
		color: #fff;
		text-decoration: none;
		border: 1px solid rgba(255, 255, 255, 0.4);
		background-color: rgba(255, 255, 255, 0.04);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		cursor: pointer;
		transition: background-color 300ms ease, border-color 300ms ease;
		margin: 0;
	}

	.home-hero-header .hero-btn-secondary:hover {
		background-color: rgba(255, 255, 255, 0.14);
		border-color: rgba(255, 255, 255, 0.6);
	}

	.home-hero-header .slider-dots {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: clamp(1.1rem, 4.2vh, 2.15rem);
		z-index: 25;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;
		margin: 0;
		padding: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		pointer-events: none;
	}

	.home-hero-header .slider-dots .slider-dot {
		pointer-events: auto;
		margin: 0;
	}
}

@media screen and (max-width: 768px) and (max-height: 520px) {
	.home-hero-header .hero-buttons-container {
		bottom: clamp(2.55rem, 7.5vh, 3.85rem);
	}
}

/* ---------- Desktop (≥769px): también en px (editá si querés) ---------- */
@media screen and (min-width: 769px) {
	.home-hero-header {
		--hero-primary-pad-top: 10px;
		--hero-primary-pad-bottom: 10px;
		--hero-primary-pad-x: 16px;
		--hero-primary-min-height: 0;
		--hero-primary-line-height: 1.3;
		--hero-primary-gap: 8px;
		--hero-primary-content-nudge-x: 0px;
		--hero-primary-content-nudge-y: 0px;
		--hero-primary-icon-nudge-x: 0px;
		--hero-primary-icon-nudge-y: 0px;
		--hero-primary-arrow-hover-shift-x: 4px;
	}

	.home-hero-header .hero-buttons-container {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 140px;
		z-index: 25;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 0 12px;
		margin: 0;
		pointer-events: none;
	}

	.home-hero-header .hero-buttons-container > * {
		pointer-events: auto;
		margin: 0;
	}

	.home-hero-header .Projects-Button {
		height: var(--hero-services-desktop-height);
		padding: var(--hero-services-desktop-padding);
		gap: var(--hero-services-desktop-gap);
		border-radius: var(--hero-services-desktop-radius);
		box-sizing: border-box;
	}

	.home-hero-header .Projects-Button .IconContainer,
	.home-hero-header .Projects-Button .svgBG {
		width: var(--hero-services-desktop-icon-size);
	}

	.home-hero-header .Projects-Button .IconContainer {
		height: var(--hero-services-desktop-icon-size);
	}

	.home-hero-header .Projects-Button .svgFG {
		width: var(--hero-services-desktop-gear-size);
	}

	.home-hero-header .Projects-Button .text {
		font-size: var(--hero-services-desktop-font-size);
		font-weight: var(--hero-services-desktop-font-weight);
	}

	.home-hero-header .hero-work-btn-wrapper .btn {
		padding: 0.72em 0.82em 0.72em 1.35em;
		font-size: 1.18em;
	}

	.home-hero-header .hero-work-btn-wrapper .btn-svg {
		height: 30px;
		margin-right: 0.65rem;
	}

	.home-hero-header .hero-work-btn-wrapper .txt-wrapper {
		min-width: 7.45em;
	}

	.home-hero-header .hero-btn-primary {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 240px;
		padding: var(--hero-primary-pad-top) var(--hero-primary-pad-x)
			var(--hero-primary-pad-bottom);
		box-sizing: border-box;
		border-radius: 9999px;
		font-weight: 500;
		font-size: 1rem;
		line-height: 1;
		min-height: var(--hero-primary-min-height);
		color: var(--acr-hero-btn-text);
		text-decoration: none;
		border: 1px solid var(--acr-hero-btn-border);
		cursor: pointer;
		background-image: linear-gradient(
			118deg,
			var(--acr-hero-btn-red-void) 0%,
			var(--acr-hero-btn-red-deep) 20%,
			var(--acr-hero-btn-red-mid) 46%,
			var(--acr-hero-btn-red-intense) 56%,
			var(--acr-hero-btn-red-hot) 63%,
			var(--acr-hero-btn-red-mid) 72%,
			var(--acr-hero-btn-red-deep) 88%,
			var(--acr-hero-btn-red-void) 100%
		);
		box-shadow:
			var(--acr-hero-btn-shadow-glow),
			0 6px 22px rgba(0, 0, 0, 0.42),
			inset 0 1px 0 var(--acr-hero-btn-inset-light),
			inset 0 -1px 0 var(--acr-hero-btn-inset-dark);
		text-shadow: var(--acr-hero-btn-text-shadow);
		transition: transform 300ms ease, box-shadow 300ms ease;
	}

	.home-hero-header .hero-btn-primary:hover {
		transform: scale(1.04);
		box-shadow:
			var(--acr-hero-btn-shadow-glow-hover),
			0 8px 26px rgba(0, 0, 0, 0.46),
			inset 0 1px 0 var(--acr-hero-btn-inset-light),
			inset 0 -1px 0 var(--acr-hero-btn-inset-dark);
	}

	.home-hero-header .hero-btn-primary__inner {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		align-content: center;
		gap: var(--hero-primary-gap);
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		line-height: var(--hero-primary-line-height);
		min-height: 0;
		text-align: center;
		white-space: nowrap;
		transform: translate(
			var(--hero-primary-content-nudge-x),
			var(--hero-primary-content-nudge-y)
		);
	}

	.home-hero-header .hero-btn-primary__inner svg {
		flex-shrink: 0;
		display: block;
		align-self: center;
		transform: translate(
			var(--hero-primary-icon-nudge-x),
			var(--hero-primary-icon-nudge-y)
		);
	}

	.home-hero-header .hero-btn-primary.group:hover .hero-btn-primary__inner svg {
		transform: translate(
			calc(var(--hero-primary-icon-nudge-x) + var(--hero-primary-arrow-hover-shift-x)),
			var(--hero-primary-icon-nudge-y)
		);
		transition: transform 300ms ease;
	}

	.home-hero-header .hero-btn-secondary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 240px;
		padding: 10px 16px;
		box-sizing: border-box;
		border-radius: 9999px;
		font-size: 1rem;
		line-height: 1.5;
		font-weight: 500;
		color: #fff;
		text-decoration: none;
		border: 1px solid rgba(255, 255, 255, 0.4);
		background-color: rgba(255, 255, 255, 0.04);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		cursor: pointer;
		margin: 0;
	}

	.home-hero-header .slider-dots {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 56px;
		z-index: 25;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;
		margin: 0;
		padding: 0;
		pointer-events: none;
	}

	.home-hero-header .slider-dots .slider-dot {
		pointer-events: auto;
		margin: 0;
	}
}

/* Notebooks 13" / MacBook Air: menos aire vertical para que CTAs y dots no se hundan. */
@media screen and (min-width: 1024px) and (max-width: 1399px) and (max-height: 900px) {
	.home-hero-header .swiper-slide-caption.section-lg {
		padding-top: clamp(5rem, 11vh, 7rem) !important;
		padding-bottom: clamp(8rem, 15vh, 10rem) !important;
	}

	.home-hero-header .swiper-slide-caption h1 {
		font-size: clamp(30px, 4.2vw, 56px);
		line-height: 1.08;
		margin-bottom: 14px;
	}

	.home-hero-header .swiper-slide-caption p.autoclub-hero-subtitle {
		font-size: clamp(16px, 1.25vw, 20px) !important;
		line-height: 1.42;
	}

	.home-hero-header .hero-buttons-container {
		bottom: clamp(92px, 11vh, 120px);
		gap: 12px;
	}

	.home-hero-header .slider-dots {
		bottom: clamp(34px, 4vh, 48px);
		gap: 18px;
	}
}

/* Desktop grande (>= 1400px): balance visual del hero en 2560x1440 */
@media screen and (min-width: 1400px) {
	.home-hero-header .swiper-slide {
		position: relative;
	}

	.home-hero-header .swiper-slide::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.44) 0%,
			rgba(0, 0, 0, 0.32) 42%,
			rgba(0, 0, 0, 0.50) 100%
		);
		z-index: 1;
		pointer-events: none;
	}

	.home-hero-header .swiper-slide-caption.section-lg {
		position: relative;
		z-index: 2;
		padding-top: clamp(6.25rem, 14vh, 10rem) !important;
		padding-bottom: clamp(10.5rem, 17vh, 14rem) !important;
	}

	.home-hero-header .swiper-slide-caption .container {
		max-width: 1260px;
		padding-left: 24px;
		padding-right: 24px;
		margin-left: auto;
		margin-right: auto;
	}

	.home-hero-header .swiper-slide-caption .col-12 {
		max-width: 980px;
		margin-left: auto;
		margin-right: auto;
	}

	.home-hero-header .swiper-slide-caption h1 {
		font-size: clamp(32px, 3.7vw, 72px);
		line-height: 1.08;
		letter-spacing: -0.018em;
		margin-bottom: 18px;
	}

	.home-hero-header .swiper-slide-caption p.autoclub-hero-subtitle {
		font-size: clamp(18px, 1.08vw, 23px) !important;
		line-height: 1.45;
		max-width: 760px;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.home-hero-header .swiper-slide-caption h1 .hero-title-accent {
		display: inline-block;
		margin-top: 0.12em;
	}

	.home-hero-header .hero-buttons-container {
		bottom: clamp(110px, 12vh, 170px);
		gap: 14px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.home-hero-header .hero-btn-primary,
	.home-hero-header .hero-btn-secondary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 0;
		min-height: 48px;
		padding: 12px 24px;
		font-size: 15px;
		line-height: 1;
		white-space: nowrap;
	}

	.home-hero-header .hero-btn-primary {
		align-items: center;
		justify-content: center;
	}

	.home-hero-header .hero-btn-primary__inner {
		width: auto;
		gap: 8px;
		line-height: 1;
		transform: translateY(10px);
	}

	.home-hero-header .hero-btn-primary__inner svg {
		width: 18px;
		height: 18px;
	}

	.home-hero-header .hero-btn-secondary {
		position: relative;
		top: 1px;
	}

	.home-hero-header .swiper-button-prev,
	.home-hero-header .swiper-button-next {
		top: 54% !important;
		transform: translateY(-50%) !important;
	}

	.home-hero-header .slider-dots {
		bottom: clamp(38px, 4.4vh, 56px);
		gap: 20px;
		width: fit-content;
	}
}

@media screen and (min-width: 1920px) {
	.home-hero-header .hero-buttons-container {
		bottom: clamp(125px, 13vh, 190px);
		gap: 28px;
		align-items: center;
		justify-content: center;
		margin-top: 42px;
	}

	.home-hero-header .hero-work-btn-wrapper .btn {
		--button-color: rgba(0, 0, 0, 0.34);
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 14px 28px;
		border: 1px solid rgba(255, 255, 255, 0.28);
		background-color: rgba(0, 0, 0, 0.28);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow:
			inset 0 1px 1px rgba(255, 255, 255, 0.16),
			0 12px 28px rgba(0, 0, 0, 0.22);
	}

	.home-hero-header .hero-work-btn-wrapper .btn:hover,
	.home-hero-header .hero-work-btn-wrapper .btn.btn-auto-hover {
		background-color: rgba(0, 0, 0, 0.42);
		border-color: rgba(0, 230, 255, 0.58);
		box-shadow:
			inset 0 1px 1px rgba(255, 255, 255, 0.16),
			0 0 22px rgba(0, 230, 255, 0.18),
			0 14px 32px rgba(0, 0, 0, 0.28);
	}

	.home-hero-header .Projects-Button {
		height: 52px;
		padding: 14px 28px;
		gap: 12px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 14px;
		background: rgba(0, 0, 0, 0.28);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow:
			inset 0 1px 1px rgba(255, 255, 255, 0.16),
			0 12px 28px rgba(0, 0, 0, 0.24);
	}

	.home-hero-header .Projects-Button:hover,
	.home-hero-header .Projects-Button.btn-auto-hover {
		background-color: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.42);
		box-shadow:
			inset 0 1px 1px rgba(255, 255, 255, 0.18),
			0 14px 32px rgba(0, 0, 0, 0.28),
			0 0 22px rgba(255, 255, 255, 0.14);
	}

	.home-hero-header .Projects-Button .text {
		color: #ffffff;
		font-size: 18px;
		line-height: 1;
	}

	.home-hero-header .Projects-Button .IconContainer,
	.home-hero-header .Projects-Button .svgBG {
		width: 26px;
	}

	.home-hero-header .Projects-Button .IconContainer {
		height: 26px;
	}

	.home-hero-header .Projects-Button .svgFG {
		width: 12px;
	}
}

/* Hero bottom notch: straight white edge with a central scroll cue */
.home-hero-header .swiper-container.swiper-slider {
	position: relative;
}

.home-hero-header .acr-hero-bottom-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 24;
	height: clamp(54px, 4.25vw, 70px);
	pointer-events: none;
	overflow: hidden;
}

.home-hero-header .acr-hero-bottom-wave__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.home-hero-header .acr-hero-bottom-wave__path {
	fill: #fff;
}

.home-hero-header .acr-hero-bottom-wave__path--mobile {
	display: none;
}

.home-hero-header .acr-hero-bottom-wave__path--desktop-lg {
	display: none;
}

.home-hero-header .acr-hero-bottom-wave__button {
	position: absolute;
	left: 50%;
	top: clamp(10px, 1.05vw, 15px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(24px, 2vw, 30px);
	height: clamp(24px, 2vw, 30px);
	padding: 0;
	border: 2px solid rgba(29, 29, 31, 0.72);
	border-radius: 999px;
	background: transparent;
	color: #1d1d1f;
	box-shadow: none;
	transform: translateX(-50%);
	cursor: pointer;
	pointer-events: auto;
	z-index: 2;
	transition:
		transform 0.28s ease,
		color 0.28s ease,
		border-color 0.28s ease,
		box-shadow 0.28s ease;
	animation: acr-hero-wave-cue 2.9s ease-in-out infinite;
}

.home-hero-header .acr-hero-bottom-wave__button svg {
	width: 15px;
	height: 15px;
}

.home-hero-header .acr-hero-bottom-wave__button path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-hero-header .acr-hero-bottom-wave__button:hover,
.home-hero-header .acr-hero-bottom-wave__button:focus-visible {
	color: var(--acr-hero-btn-red-intense, #c41f2b);
	border-color: rgba(196, 31, 43, 0.64);
	box-shadow: 0 4px 14px rgba(196, 31, 43, 0.12);
	transform: translateX(-50%) translateY(-2px);
	animation-play-state: paused;
	outline: none;
}

@keyframes acr-hero-wave-cue {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(4px);
	}
}

@media screen and (min-width: 769px) {
	.home-hero-header .slider-dots {
		bottom: clamp(88px, 9.2vh, 110px);
		z-index: 26;
	}
}

/* PC / notebook ancho: notch central estrecho; tablet 769–1199 conserva el path --desktop */
@media screen and (min-width: 1200px) {
	.home-hero-header .acr-hero-bottom-wave__path--desktop {
		display: none;
	}

	.home-hero-header .acr-hero-bottom-wave__path--desktop-lg {
		display: block;
	}

	.home-hero-header .slider-dots {
		bottom: clamp(84px, 8.4vh, 102px);
	}

	.home-hero-header .acr-hero-bottom-wave__button {
		top: clamp(10px, 1vw, 16px);
	}
}

/* Notebook / desktop medio: separar CTAs, dots y notch inferior sin tocar mobile ni 1920+. */
@media screen and (min-width: 1200px) and (max-width: 1399px) and (max-height: 900px) {
	.home-hero-header .hero-buttons-container {
		bottom: clamp(138px, 16vh, 158px);
	}

	.home-hero-header .slider-dots {
		bottom: clamp(74px, 8vh, 90px);
	}
}

@media screen and (min-width: 1400px) and (max-width: 1600px) and (max-height: 950px) {
	.home-hero-header .hero-buttons-container {
		bottom: clamp(150px, 15.5vh, 172px);
	}

	.home-hero-header .slider-dots {
		bottom: clamp(78px, 8vh, 96px);
	}
}

@media screen and (min-width: 1601px) and (max-width: 1919px) and (max-height: 1000px) {
	.home-hero-header .hero-buttons-container {
		bottom: clamp(154px, 14.5vh, 180px);
	}

	.home-hero-header .slider-dots {
		bottom: clamp(82px, 7.6vh, 98px);
	}
}

@media screen and (max-width: 768px) {
	.home-hero-header .acr-hero-bottom-wave {
		height: clamp(52px, 12vw, 62px);
	}

	.home-hero-header .acr-hero-bottom-wave__path--desktop {
		display: none;
	}

	.home-hero-header .acr-hero-bottom-wave__path--desktop-lg {
		display: none;
	}

	.home-hero-header .acr-hero-bottom-wave__path--mobile {
		display: block;
	}

	.home-hero-header .acr-hero-bottom-wave__button {
		top: clamp(10px, 2.7vw, 14px);
		width: 26px;
		height: 26px;
	}

	.home-hero-header .acr-hero-bottom-wave__button svg {
		width: 14px;
		height: 14px;
	}

	.home-hero-header .slider-dots {
		bottom: clamp(3.05rem, 7vh, 4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero-header .acr-hero-bottom-wave__button {
		animation: none;
	}
}

@media screen and (max-width: 768px), (hover: none) and (pointer: coarse) {
	.home-hero-header .Projects-Button {
		height: var(--hero-services-mobile-height);
		padding: var(--hero-services-mobile-padding);
		gap: var(--hero-services-mobile-gap);
		border-radius: var(--hero-services-mobile-radius);
		box-sizing: border-box;
	}

	.home-hero-header .Projects-Button .IconContainer,
	.home-hero-header .Projects-Button .svgBG {
		width: var(--hero-services-mobile-icon-size);
	}

	.home-hero-header .Projects-Button .IconContainer {
		height: var(--hero-services-mobile-icon-size);
	}

	.home-hero-header .Projects-Button .svgFG {
		width: var(--hero-services-mobile-gear-size);
	}

	.home-hero-header .Projects-Button .text {
		font-size: var(--hero-services-mobile-font-size);
		font-weight: var(--hero-services-mobile-font-weight);
	}
}

.home-hero-header .Projects-Button:hover,
.home-hero-header .Projects-Button.btn-auto-hover,
.home-hero-header .Projects-Button.is-clicked {
	color: oklch(78.9% 0.154 211.53);
	background-color: rgba(120, 0, 20, 0.18);
	border-color: rgba(255, 0, 51, 0.58);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.18),
		inset 0 0 18px rgba(217, 4, 22, 0.16),
		0 14px 32px rgba(0, 0, 0, 0.28),
		0 0 22px rgba(217, 4, 22, 0.22);
}

.home-hero-header .Projects-Button:hover .text,
.home-hero-header .Projects-Button:hover svg,
.home-hero-header .Projects-Button:hover i,
.home-hero-header .Projects-Button.btn-auto-hover .text,
.home-hero-header .Projects-Button.btn-auto-hover svg,
.home-hero-header .Projects-Button.btn-auto-hover i,
.home-hero-header .Projects-Button.is-clicked .text,
.home-hero-header .Projects-Button.is-clicked svg,
.home-hero-header .Projects-Button.is-clicked i {
	color: oklch(78.9% 0.154 211.53);
}

.home-hero-header .Projects-Button:hover .svgBG [fill],
.home-hero-header .Projects-Button:hover .svgFG path,
.home-hero-header .Projects-Button:hover i,
.home-hero-header .Projects-Button.btn-auto-hover .svgBG [fill],
.home-hero-header .Projects-Button.btn-auto-hover .svgFG path,
.home-hero-header .Projects-Button.btn-auto-hover i,
.home-hero-header .Projects-Button.is-clicked .svgBG [fill],
.home-hero-header .Projects-Button.is-clicked .svgFG path,
.home-hero-header .Projects-Button.is-clicked i {
	fill: oklch(78.9% 0.154 211.53);
}

.home-hero-header .Projects-Button:hover .svgBG [stroke],
.home-hero-header .Projects-Button:hover .svgBG line,
.home-hero-header .Projects-Button:hover .svgFG circle,
.home-hero-header .Projects-Button:hover i,
.home-hero-header .Projects-Button.btn-auto-hover .svgBG [stroke],
.home-hero-header .Projects-Button.btn-auto-hover .svgBG line,
.home-hero-header .Projects-Button.btn-auto-hover .svgFG circle,
.home-hero-header .Projects-Button.btn-auto-hover i,
.home-hero-header .Projects-Button.is-clicked .svgBG [stroke],
.home-hero-header .Projects-Button.is-clicked .svgBG line,
.home-hero-header .Projects-Button.is-clicked .svgFG circle,
.home-hero-header .Projects-Button.is-clicked i {
	stroke: oklch(78.9% 0.154 211.53);
}

.home-hero-header .Projects-Button:hover .svgFG circle,
.home-hero-header .Projects-Button.btn-auto-hover .svgFG circle,
.home-hero-header .Projects-Button.is-clicked .svgFG circle {
	fill: none;
}