/* -------------------------------------------------------------------------
   Hero acción — Home (video proceso) · iteración 3 + ajustes finos
   Insertado al inicio de page-home.php. No toca el resto de la home.
   Capas: fondo → Ilus5 → secundarias → video → etiqueta → controles
   ------------------------------------------------------------------------- */

.estampame-hero-action {
	--ha-green: var(--estampame-green, #79bb1c);
	--ha-green-dark: var(--estampame-green-dark, #5f9616);
	--ha-violet: #6b2d8b;
	--ha-violet-soft: rgba(107, 45, 139, 0.12);
	--ha-celeste: #8fd3f4;
	--ha-celeste-soft: rgba(143, 211, 244, 0.28);
	--ha-ink: var(--estampame-black, #111111);
	--ha-muted: var(--estampame-gray, #4a4a4a);
	--ha-radius: 18px;
	--ha-video-max: 540px;
	--ha-shadow:
		0 1px 2px rgba(17, 17, 17, 0.04),
		0 10px 28px rgba(17, 17, 17, 0.08),
		0 28px 48px rgba(17, 17, 17, 0.06);
	/* Sombra suave de contacto (elipse bajo el borde inferior del video) */
	--ha-desk-shadow:
		0 14px 12px -8px rgba(17, 17, 17, 0.28),
		0 4px 8px -2px rgba(17, 17, 17, 0.14);

	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(42rem 28rem at 12% 18%, rgba(121, 187, 28, 0.1), transparent 68%),
		radial-gradient(34rem 24rem at 88% 12%, var(--ha-celeste-soft), transparent 70%),
		radial-gradient(28rem 22rem at 78% 88%, var(--ha-violet-soft), transparent 72%),
		linear-gradient(180deg, #f7faf2 0%, #ffffff 55%, #ffffff 100%);
	padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.75rem, 4vw, 2.75rem);
}

.estampame-hero-action::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.035;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
		radial-gradient(circle at 18% 42%, rgba(121, 187, 28, 0.35) 0 1px, transparent 1.5px),
		radial-gradient(circle at 72% 28%, rgba(107, 45, 139, 0.3) 0 1px, transparent 1.5px),
		radial-gradient(circle at 58% 78%, rgba(42, 168, 216, 0.28) 0 1px, transparent 1.5px);
	background-size: 160px 160px, 48px 48px, 56px 56px, 40px 40px;
	mix-blend-mode: multiply;
}

.estampame-hero-action__blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(2px);
}

.estampame-hero-action__blob--a {
	width: min(42vw, 28rem);
	height: min(42vw, 28rem);
	top: -12%;
	left: -8%;
	background: radial-gradient(circle, rgba(121, 187, 28, 0.16), transparent 70%);
}

.estampame-hero-action__blob--b {
	width: min(36vw, 22rem);
	height: min(36vw, 22rem);
	right: -6%;
	top: 8%;
	background: radial-gradient(circle, rgba(143, 211, 244, 0.22), transparent 70%);
}

.estampame-hero-action__blob--c {
	width: min(30vw, 18rem);
	height: min(30vw, 18rem);
	right: 18%;
	bottom: -10%;
	background: radial-gradient(circle, rgba(107, 45, 139, 0.1), transparent 70%);
}

.estampame-hero-action__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 960px) {
	.estampame-hero-action__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(2rem, 5vw, 4rem);
	}
}

/* ---------------------------------------------------------------- copy */

.estampame-hero-action__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}

.estampame-hero-action__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.9rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ha-green-dark);
}

.estampame-hero-action__eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	background: linear-gradient(90deg, var(--ha-green), var(--ha-celeste));
	border-radius: 2px;
}

.estampame-hero-action__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 4.8vw, 3.35rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--ha-ink);
	max-width: 13ch;
}

.estampame-hero-action__text {
	margin: 0 0 1.5rem;
	max-width: 36rem;
	font-size: clamp(1rem, 1.7vw, 1.125rem);
	line-height: 1.55;
	color: var(--ha-muted);
}

.estampame-hero-action__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.estampame-hero-action__cta-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.estampame-hero-action__indicators {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 42rem;
}

.estampame-hero-action__indicators li {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem 0.35rem 0.55rem;
	border-radius: 999px;
	border: 1px solid rgba(17, 17, 17, 0.08);
	background: transparent;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ha-ink);
}

.estampame-hero-action__indicators li::before {
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--ha-green);
	flex-shrink: 0;
}

.estampame-hero-action__indicators li:nth-child(2)::before {
	background: var(--ha-violet);
}

.estampame-hero-action__indicators li:nth-child(3)::before {
	background: #2aa8d8;
}

.estampame-hero-action__indicators li:nth-child(4)::before {
	background: var(--ha-green-dark);
}

/* -------------------------------------------------------------- media */

.estampame-hero-action__media {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
	/* Espacio para Ilus5 parcial debajo (video apoyado) + secundarias al costado */
	padding: 1.5rem 1.25rem 2rem;
	overflow: hidden;
	max-width: 100%;
}

.estampame-hero-action__glow {
	position: absolute;
	z-index: 0;
	width: min(78%, 18rem);
	aspect-ratio: 9 / 16;
	max-height: calc(var(--ha-video-max) * 0.92);
	border-radius: 28px;
	background:
		radial-gradient(ellipse at 50% 42%, rgba(121, 187, 28, 0.22), transparent 68%),
		radial-gradient(ellipse at 60% 70%, rgba(143, 211, 244, 0.18), transparent 70%);
	filter: blur(18px);
	pointer-events: none;
}

/* Ilustraciones base */
.estampame-hero-action__ilus {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	max-width: none;
}

/* Ilus5 — mesa: parcial DETRÁS/DEBAJO; video apoyado sobre superficie */
.estampame-hero-action__ilus--mesa {
	z-index: 1;
	width: min(134%, 30rem); /* +~15% vs 26rem */
	height: auto;
	max-height: 14.25rem; /* no mostrar completa */
	left: 50%;
	/* Superficie de madera ≈ borde inferior del video; +20px arriba */
	bottom: calc(0.2rem + 20px);
	transform: translateX(-50%);
	object-fit: cover;
	object-position: 48% 4%; /* equipos arriba, madera cerca del borde video */
	opacity: 0.95;
	/* Soft crop mask: fade edges so no hard cut */
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 10%,
		#000 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 10%,
		#000 90%,
		transparent 100%
	);
	/* Sombra muy suave debajo (no dura) */
	filter: drop-shadow(0 24px 18px rgba(17, 17, 17, 0.09))
		drop-shadow(0 6px 10px rgba(17, 17, 17, 0.04));
	animation: haMesaDrift 9s ease-in-out infinite;
}

/* Ilus1 — remera: arriba-izq del video; motion ≤4px, rot ≤2° */
.estampame-hero-action__ilus--remera {
	z-index: 2;
	width: clamp(4.25rem, 14vw, 6.25rem);
	height: auto;
	left: 0.15rem;
	top: 17%;
	transform: rotate(-2deg);
	filter: drop-shadow(0 8px 14px rgba(17, 17, 17, 0.12));
	animation: haRemeraFloat 7s ease-in-out infinite;
}

/* Ilus4 — lámina DTF al costado; ~8° hacia el video (ajuste fino) */
.estampame-hero-action__ilus--dtf {
	z-index: 2;
	width: clamp(5rem, 16vw, 7.5rem);
	height: auto;
	right: 2.65rem;
	top: 33%;
	transform: rotate(-8deg);
	filter: drop-shadow(0 10px 16px rgba(17, 17, 17, 0.14));
	animation: haDtfFloat 8s ease-in-out infinite 0.5s;
}

.estampame-hero-action__frame {
	position: relative;
	z-index: 3;
	width: min(100%, 18.2rem);
	max-width: 100%;
	aspect-ratio: 9 / 16;
	max-height: var(--ha-video-max);
	border-radius: var(--ha-radius);
	overflow: hidden;
	background: #eef3e8;
	box-shadow: var(--ha-shadow), var(--ha-desk-shadow);
	border: 2px solid #ffffff;
}

@media (min-width: 960px) {
	.estampame-hero-action__frame {
		width: min(100%, calc(var(--ha-video-max) * 9 / 16));
	}

	.estampame-hero-action__ilus--mesa {
		width: min(130%, 32.5rem); /* +~16% vs 28rem */
		bottom: calc(0.25rem + 20px);
		max-height: 15rem;
		object-position: 48% 4%;
	}
}

.estampame-hero-action__label {
	position: absolute;
	z-index: 5;
	top: 0.85rem;
	left: 0.85rem;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ha-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(17, 17, 17, 0.1);
	backdrop-filter: blur(6px);
	pointer-events: none;
}

.estampame-hero-action__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: #e8efe0;
	aspect-ratio: 9 / 16;
}

.estampame-hero-action__video::-webkit-media-controls {
	display: none !important;
}

.estampame-hero-action__video-fade {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	height: 22%;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(232, 239, 224, 0) 0%,
		rgba(232, 239, 224, 0.55) 45%,
		rgba(232, 239, 224, 0.92) 100%
	);
}

.estampame-hero-action__video-sheen {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	top: 0;
	height: 28%;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.08) 42%,
		rgba(255, 255, 255, 0) 100%
	);
	mix-blend-mode: soft-light;
}

/* Controles: play/pause izq · sonido der · z encima de fade */
.estampame-hero-action__playback,
.estampame-hero-action__sound {
	position: absolute;
	z-index: 6;
	bottom: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 0;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.72);
	color: #fff;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background 0.2s, transform 0.15s;
}

.estampame-hero-action__playback {
	left: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
}

.estampame-hero-action__sound {
	right: 0.75rem;
	padding: 0.55rem 0.8rem;
}

.estampame-hero-action__playback:hover,
.estampame-hero-action__sound:hover {
	background: rgba(17, 17, 17, 0.88);
	transform: translateY(-1px);
}

.estampame-hero-action__playback:focus-visible,
.estampame-hero-action__sound:focus-visible {
	outline: 2px solid var(--ha-green);
	outline-offset: 3px;
}

.estampame-hero-action__playback-icon,
.estampame-hero-action__sound-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.estampame-hero-action.is-paused .estampame-hero-action__playback-icon--pause,
.estampame-hero-action:not(.is-paused) .estampame-hero-action__playback-icon--play {
	display: none;
}

.estampame-hero-action.is-paused .estampame-hero-action__playback-icon--play,
.estampame-hero-action:not(.is-paused) .estampame-hero-action__playback-icon--pause {
	display: inline-flex;
}

/* ------------------------------------------------------- animations */

@keyframes haMesaDrift {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(2px);
	}
}

@keyframes haRemeraFloat {
	0%,
	100% {
		transform: rotate(-2deg) translateY(0);
	}
	50% {
		transform: rotate(-1deg) translateY(-3px);
	}
}

@keyframes haDtfFloat {
	0%,
	100% {
		transform: rotate(-8deg) translateY(0);
	}
	50% {
		transform: rotate(-7deg) translateY(-3px);
	}
}

.estampame-hero-action__copy > .estampame-hero-action__eyebrow,
.estampame-hero-action__copy > .estampame-hero-action__title,
.estampame-hero-action__copy > .estampame-hero-action__text,
.estampame-hero-action__copy > .estampame-hero-action__actions,
.estampame-hero-action__copy > .estampame-hero-action__indicators,
.estampame-hero-action__media {
	opacity: 0;
	animation: haFadeUp 0.7s ease-out forwards;
}

.estampame-hero-action__copy > .estampame-hero-action__eyebrow {
	animation-delay: 0.05s;
}

.estampame-hero-action__copy > .estampame-hero-action__title {
	animation-delay: 0.14s;
}

.estampame-hero-action__copy > .estampame-hero-action__text {
	animation-delay: 0.24s;
}

.estampame-hero-action__media {
	animation-delay: 0.2s;
}

.estampame-hero-action__copy > .estampame-hero-action__actions {
	animation-delay: 0.34s;
}

.estampame-hero-action__copy > .estampame-hero-action__indicators {
	animation-delay: 0.44s;
}

@keyframes haFadeUp {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -------------------------------------------------------- responsive */

/* Tablet: Ilus5 + solo Ilus1 */
@media (max-width: 959px) {
	.estampame-hero-action__inner {
		display: flex;
		flex-direction: column;
	}

	.estampame-hero-action__title {
		max-width: 14ch;
	}

	.estampame-hero-action__media {
		order: 3;
		width: 100%;
		padding: 1.1rem 0.75rem 2.1rem;
	}

	.estampame-hero-action__actions {
		order: 4;
		margin-bottom: 1.25rem;
		width: 100%;
	}

	.estampame-hero-action__indicators {
		order: 5;
	}

	.estampame-hero-action__copy {
		display: contents;
	}

	.estampame-hero-action__eyebrow {
		order: 1;
	}

	.estampame-hero-action__title {
		order: 2;
	}

	.estampame-hero-action__text {
		order: 2;
		margin-bottom: 1.25rem;
	}

	.estampame-hero-action__frame {
		width: min(100%, 21rem);
	}

	.estampame-hero-action__ilus--dtf {
		display: none;
	}

	.estampame-hero-action__ilus--remera {
		width: clamp(3.75rem, 12vw, 5.25rem);
		left: 0.35rem;
		top: 16%;
		animation: none;
		transform: rotate(-2deg);
	}

	.estampame-hero-action__ilus--mesa {
		width: min(122%, 27.5rem);
		animation: none;
		transform: translateX(-50%);
		bottom: calc(0.15rem + 20px);
		max-height: 12.75rem;
		object-position: 48% 6%;
	}
}

/* Móvil: limpio — video + porción Ilus5; ocultar Ilus1 e Ilus4 */
@media (max-width: 559px) {
	.estampame-hero-action__frame {
		width: 100%;
		max-height: min(58vh, 480px);
	}

	.estampame-hero-action__media {
		padding: 0.35rem 0 2.75rem;
	}

	.estampame-hero-action__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.estampame-hero-action__actions .estampame-btn {
		width: 100%;
	}

	.estampame-hero-action__ilus--remera,
	.estampame-hero-action__ilus--dtf,
	.estampame-hero-action__glow {
		display: none;
	}

	.estampame-hero-action__ilus--mesa {
		width: min(112%, 24.5rem);
		bottom: 0.15rem;
		max-height: 11.5rem;
		opacity: 0.92;
		object-position: 50% 10%;
		-webkit-mask-image: linear-gradient(
			180deg,
			transparent 0%,
			#000 18%,
			#000 88%,
			transparent 100%
		);
		mask-image: linear-gradient(
			180deg,
			transparent 0%,
			#000 18%,
			#000 88%,
			transparent 100%
		);
	}

	.estampame-hero-action__sound span[data-hero-sound-text] {
		/* Compactar etiqueta en pantallas chicas si hace falta espacio */
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.estampame-hero-action__sound {
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
	}

	.estampame-hero-action__indicators {
		gap: 0.4rem 0.45rem;
	}
}

/* --------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.estampame-hero-action__ilus--mesa,
	.estampame-hero-action__ilus--remera,
	.estampame-hero-action__ilus--dtf,
	.estampame-hero-action__copy > .estampame-hero-action__eyebrow,
	.estampame-hero-action__copy > .estampame-hero-action__title,
	.estampame-hero-action__copy > .estampame-hero-action__text,
	.estampame-hero-action__copy > .estampame-hero-action__actions,
	.estampame-hero-action__copy > .estampame-hero-action__indicators,
	.estampame-hero-action__media {
		animation: none !important;
		opacity: 1 !important;
	}

	.estampame-hero-action__ilus--mesa {
		transform: translateX(-50%);
	}

	.estampame-hero-action__ilus--remera {
		transform: rotate(-2deg);
	}

	.estampame-hero-action__ilus--dtf {
		transform: rotate(-8deg);
	}
}

#trabajos-reales {
	scroll-margin-top: 6rem;
}