/* -------------------------------------------------------------------------
   Hero IA — Home
   Composición: idea (Imagen2) → propuestas (Imagen3) → remera (Imagen1).
   Flechas, cursor, badge y destellos son SVG/HTML/CSS nativos.

   PARÁMETROS EDITABLES — todo vive en las variables de .estampame-hero-ai:

   · Posiciones de cada pieza:  --ai-pos-*  (left / top / width en % de la escena)
   · Velocidades de flotación:  --ai-float-duration-*
   · Flechas:                   --ai-arrow-speed, --ai-arrow-opacity
   · Destellos:                 --ai-spark-opacity (+ por elemento: --sx --sy --sd --sdl)
   · Cursor:                    --ai-cursor-cycle
   · Parallax:                  --ai-parallax (0 = apagado; lo lee hero-ai.js)
   · Entrada escalonada:        --ai-in-*
   ------------------------------------------------------------------------- */

.estampame-hero-ai {
	/* — Color y sombra base — */
	--ai-hero-green: var(--estampame-green);
	--ai-hero-green-dark: var(--estampame-green-dark);
	--ai-hero-shadow: 0 20px 50px rgba(17, 17, 17, 0.12);
	--ai-hero-shadow-soft: 0 8px 20px rgba(17, 17, 17, 0.08);

	/* — Velocidades — */
	--ai-float-duration-shirt: 8s;
	--ai-float-duration-prompt: 7s;
	--ai-float-duration-results: 8s;
	--ai-arrow-speed: 7s;
	--ai-cursor-cycle: 7s;

	/* — Intensidades — */
	--ai-arrow-opacity: 0.55;
	--ai-spark-opacity: 0.5;
	--ai-float-dist: 13px;
	--ai-lift-dist: 6px;
	--ai-tilt-deg: 1.1deg;
	--ai-parallax: 0.06;

	/* — Secuencia "diseño aplicado" (Imagen8 / shirt-print.png) —
	   La activa hero-ai.js agregando .ai-hero--design-applied a la escena.
	   Línea de tiempo: cursor 0ms → propuesta 150ms → flecha 300ms →
	   zoom remera 450ms → crossfade 550ms → fin ~1300ms. */
	--ai-shirt-hover-scale: 1.03;     /* zoom de la remera durante la secuencia */
	--ai-shirt-fade-duration: 400ms;  /* duración del crossfade blanca ↔ estampada */
	--ai-shirt-fade-delay: 550ms;     /* cuándo empieza el crossfade dentro de la secuencia */
	--ai-flow-duration: 1.6s;         /* velocidad del dash de la flecha iluminada */
	--ai-choice-border-color: rgba(121, 187, 28, 0.85);
	--ai-choice-glow: rgba(121, 187, 28, 0.3);
	--ai-cursor-travel-x: -12px;      /* desplazamiento del cursor hacia la propuesta */
	--ai-cursor-travel-y: -14px;

	/* Posición del resalte .ai-choice, en % de la tarjeta de propuestas
	   (miniatura inferior derecha, la más cercana a la remera). */
	--ai-choice-left: 52%;
	--ai-choice-top: 44%;
	--ai-choice-w: 41%;
	--ai-choice-h: 35%;

	/* — Entrada escalonada — */
	--ai-in-title: 0.05s;
	--ai-in-text: 0.18s;
	--ai-in-actions: 0.3s;
	--ai-in-benefits: 0.42s;
	--ai-in-prompt: 0.5s;
	--ai-in-results: 0.65s;
	--ai-in-shirt: 0.8s;
	--ai-in-extras: 1.05s;

	/* — Posiciones (en % de la escena) —
	   Jerarquía: remera (mayor) > propuestas > pedido (menor). */
	--ai-pos-prompt-left: 0%;     --ai-pos-prompt-top: 3%;     --ai-pos-prompt-w: 40%;
	--ai-pos-results-left: 1%;    --ai-pos-results-top: 33%;   --ai-pos-results-w: 46%;
	--ai-pos-shirt-left: 46%;     --ai-pos-shirt-top: 9%;      --ai-pos-shirt-w: 54%;
	--ai-pos-arrow1-left: 32%;    --ai-pos-arrow1-top: 21%;    --ai-pos-arrow1-w: 12%;
	--ai-pos-arrow2-left: 44%;    --ai-pos-arrow2-top: 48%;    --ai-pos-arrow2-w: 14%;
	--ai-pos-cursor-left: 34%;    --ai-pos-cursor-top: 62%;

	background: var(--estampame-white);
	position: relative;
	overflow: hidden;
	padding-block: 3.5rem 1rem;
}

/* Luz difusa, extremadamente suave, detrás de la composición. */
.estampame-hero-ai::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(42rem 30rem at 78% 38%, rgba(121, 187, 28, 0.06), transparent 65%),
		radial-gradient(30rem 22rem at 18% 12%, rgba(121, 187, 28, 0.04), transparent 70%);
	pointer-events: none;
}

.estampame-hero-ai__inner {
	position: relative;
	display: grid;
	gap: 3rem;
	align-items: center;
}

/* ---------------------------------------------------------------- texto */

.estampame-hero-ai__content > * {
	opacity: 0;
	animation: aiFadeUp 0.7s ease-out forwards;
}

.estampame-hero-ai__title {
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--estampame-black);
	margin: 0 0 1.25rem;
	animation-delay: var(--ai-in-title);
}

.estampame-hero-ai__title em {
	font-style: normal;
	color: var(--ai-hero-green-dark);
}

.estampame-hero-ai__subtitle {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--estampame-gray);
	max-width: 30rem;
	margin: 0 0 2rem;
	animation-delay: var(--ai-in-text);
}

.estampame-hero-ai__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 2.25rem;
	animation-delay: var(--ai-in-actions);
}

.estampame-hero-ai__actions .estampame-btn {
	text-decoration: none;
}

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

.estampame-hero-ai__cta-icon svg {
	transition: transform 0.3s ease-in-out;
}

.estampame-hero-ai__cta:hover .estampame-hero-ai__cta-icon svg,
.estampame-hero-ai__cta:focus-visible .estampame-hero-ai__cta-icon svg {
	transform: rotate(12deg) scale(1.12);
}

/* Beneficios: livianos, sin cajas. */
.estampame-hero-ai__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
	animation-delay: var(--ai-in-benefits);
}

.estampame-hero-ai__benefits li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.9875rem;
	color: var(--estampame-gray);
}

.estampame-hero-ai__check {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--estampame-green-light);
	color: var(--ai-hero-green-dark);
}

/* --------------------------------------------------------------- escena */

.estampame-hero-ai__scene {
	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 640 / 600;
	margin-inline: auto;
	will-change: transform;
}

.estampame-hero-ai__item {
	position: absolute;
	opacity: 0;
	animation: aiFadeIn 0.9s ease-out forwards;
}

.estampame-hero-ai__item img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	transition: transform 0.45s ease-in-out;
}

/* — Imagen2: la idea (punto de inicio) — */
.estampame-hero-ai__item--prompt {
	left: var(--ai-pos-prompt-left);
	top: var(--ai-pos-prompt-top);
	width: var(--ai-pos-prompt-w);
	z-index: 4;
	animation-delay: var(--ai-in-prompt);
	filter: drop-shadow(0 8px 20px rgba(17, 17, 17, 0.08));
}

.estampame-hero-ai__item--prompt img {
	animation: aiTilt var(--ai-float-duration-prompt) ease-in-out infinite;
}

/* — Imagen3: las propuestas (segundo protagonista) — */
.estampame-hero-ai__item--proposals {
	left: var(--ai-pos-results-left);
	top: var(--ai-pos-results-top);
	width: var(--ai-pos-results-w);
	z-index: 5;
	animation-delay: var(--ai-in-results);
	filter: drop-shadow(0 14px 34px rgba(17, 17, 17, 0.1));
}

.estampame-hero-ai__item--proposals img {
	animation: aiLift var(--ai-float-duration-results) ease-in-out infinite;
}

/* — Imagen1: la remera (protagonista final, por delante del resto) — */
.estampame-hero-ai__item--shirt {
	left: var(--ai-pos-shirt-left);
	top: var(--ai-pos-shirt-top);
	width: var(--ai-pos-shirt-w);
	z-index: 6;
	animation-delay: var(--ai-in-shirt);
	filter: drop-shadow(0 24px 45px rgba(17, 17, 17, 0.18));
}

/* Iluminación radial muy suave detrás de la remera. */
.estampame-hero-ai__item--shirt::before {
	content: "";
	position: absolute;
	inset: -12%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(121, 187, 28, 0.09), transparent 72%);
	pointer-events: none;
}

.estampame-hero-ai__item--shirt img {
	animation: aiFloat var(--ai-float-duration-shirt) ease-in-out infinite;
}

/* — Imagen8 (shirt-print.png): remera estampada superpuesta —
   El markup la agrega solo si el archivo existe (clase .has-print).
   hero-ai.js suma .is-print-ready cuando terminó de cargar; hasta
   entonces la secuencia no se activa y solo se ve la remera blanca. */
.estampame-hero-ai__item--shirt .ai-shirt-base,
.estampame-hero-ai__item--shirt .ai-shirt-print {
	transition: opacity var(--ai-shirt-fade-duration) ease-in-out;
}

.estampame-hero-ai__item--shirt .ai-shirt-print {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	opacity: 0;
	animation: aiFloat var(--ai-float-duration-shirt) ease-in-out infinite;
}

/* ------------------------------------------ secuencia "diseño aplicado" */

/* 1) Cursor viaja hacia la propuesta elegida (0 ms) y simula clic. */
.ai-hero--design-applied .ai-cursor {
	animation: aiFadeIn 0.9s ease-out forwards;
	animation-delay: var(--ai-in-extras);
	transform: translate(var(--ai-cursor-travel-x), var(--ai-cursor-travel-y)) scale(0.94);
	transition: transform 0.35s ease-in-out;
}

.ai-hero--design-applied .ai-cursor__ring {
	animation: aiCursorPulse 0.6s ease-out 0.35s;
}

/* 2) La propuesta elegida se destaca (150 ms). */
.ai-choice {
	position: absolute;
	left: var(--ai-choice-left);
	top: var(--ai-choice-top);
	width: var(--ai-choice-w);
	height: var(--ai-choice-h);
	border: 2px solid var(--ai-choice-border-color);
	border-radius: 12px;
	opacity: 0;
	transform: scale(1);
	pointer-events: none;
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.ai-hero--design-applied .ai-choice {
	opacity: 1;
	transform: scale(1.025);
	box-shadow: 0 4px 16px var(--ai-choice-glow);
	transition-delay: 150ms;
}

/* 3) La flecha final se ilumina y el dash "viaja" a la remera (300 ms). */
.ai-hero--design-applied .ai-flow-arrow--to-shirt .ai-arrow__path {
	stroke: #8fd131;
	stroke-width: 3;
	opacity: 0.95;
	animation-duration: var(--ai-flow-duration);
	transition: stroke 0.3s ease-in-out, stroke-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transition-delay: 300ms;
}

.ai-hero--design-applied .ai-flow-arrow--to-shirt .ai-arrow__tip {
	stroke: #8fd131;
	opacity: 0.95;
	transition: stroke 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transition-delay: 300ms;
}

/* 4) La remera hace un pequeño zoom y vuelve (450 ms → ~1400 ms).
   Se anima el contenedor para que ambas remeras nunca se desalineen. */
.ai-hero--design-applied .estampame-hero-ai__item--shirt {
	animation: aiFadeIn 0.9s ease-out forwards, aiShirtApply 0.95s ease-in-out both;
	animation-delay: var(--ai-in-shirt), 0.45s;
	will-change: transform;
}

/* 5) Crossfade blanca → estampada (550 ms). */
.ai-hero--design-applied .estampame-hero-ai__item--shirt.has-print.is-print-ready .ai-shirt-base {
	opacity: 0;
	transition-delay: var(--ai-shirt-fade-delay);
}

.ai-hero--design-applied .estampame-hero-ai__item--shirt.has-print.is-print-ready .ai-shirt-print {
	opacity: 1;
	transition-delay: var(--ai-shirt-fade-delay);
}

/* Estado persistente: la remera queda estampada (modo B y mobile). */
.ai-shirt--stay-printed .estampame-hero-ai__item--shirt.has-print.is-print-ready .ai-shirt-base {
	opacity: 0;
	transition-delay: 0s;
}

.ai-shirt--stay-printed .estampame-hero-ai__item--shirt.has-print.is-print-ready .ai-shirt-print {
	opacity: 1;
	transition-delay: 0s;
}

/* ------------------------------------------------------------ badge IA */

.ai-badge {
	position: absolute;
	top: -0.55em;
	right: 6%;
	display: inline-block;
	padding: 0.22em 0.85em;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ai-hero-green-dark);
	background: var(--estampame-green-light);
	border: 1px solid rgba(95, 150, 22, 0.35);
	border-radius: 999px;
	box-shadow: var(--ai-hero-shadow-soft);
}

/* ------------------------------------------------------- flechas (SVG) */

.ai-arrow {
	position: absolute;
	overflow: visible;
	opacity: 0;
	animation: aiFadeIn 0.9s ease-out forwards;
	animation-delay: var(--ai-in-extras);
	z-index: 2;
	pointer-events: none;
}

.ai-arrow--1 {
	left: var(--ai-pos-arrow1-left);
	top: var(--ai-pos-arrow1-top);
	width: var(--ai-pos-arrow1-w);
	height: auto;
	aspect-ratio: 1 / 1;
}

.ai-arrow--2 {
	left: var(--ai-pos-arrow2-left);
	top: var(--ai-pos-arrow2-top);
	width: var(--ai-pos-arrow2-w);
	height: auto;
	aspect-ratio: 120 / 70;
}

.ai-arrow__path,
.ai-arrow__tip {
	stroke: var(--ai-hero-green);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: var(--ai-arrow-opacity);
}

/* Flujo sutil del trazo (lento, continuo). */
.ai-arrow__path {
	stroke-dasharray: 7 9;
	animation: aiArrowFlow var(--ai-arrow-speed) linear infinite;
}

/* --------------------------------------------------------- cursor (SVG) */

.ai-cursor {
	position: absolute;
	left: var(--ai-pos-cursor-left);
	top: var(--ai-pos-cursor-top);
	z-index: 7;
	opacity: 0;
	animation: aiFadeIn 0.9s ease-out forwards, aiCursorMove var(--ai-cursor-cycle) ease-in-out infinite;
	animation-delay: var(--ai-in-extras), calc(var(--ai-in-extras) + 0.5s);
	pointer-events: none;
}

.ai-cursor svg {
	display: block;
	filter: drop-shadow(0 3px 6px rgba(17, 17, 17, 0.25));
}

/* Anillo del clic: se expande y desaparece, sincronizado con el ciclo. */
.ai-cursor__ring {
	position: absolute;
	top: -4px;
	left: 0;
	width: 18px;
	height: 18px;
	border: 2px solid var(--ai-hero-green);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.4);
	animation: aiCursorClick var(--ai-cursor-cycle) ease-out infinite;
	animation-delay: calc(var(--ai-in-extras) + 0.5s);
}

/* ------------------------------------------------------ destellos (CSS) */

.ai-spark {
	position: absolute;
	left: var(--sx, 50%);
	top: var(--sy, 50%);
	z-index: 6;
	opacity: 0;
	pointer-events: none;
	animation: aiSparkTwinkle var(--sd, 6s) ease-in-out infinite;
	animation-delay: var(--sdl, 0s);
}

.ai-spark--small { width: 7px; height: 7px; }
.ai-spark--medium { width: 11px; height: 11px; }

.ai-spark--dot {
	background: var(--ai-hero-green);
	border-radius: 50%;
}

.ai-spark--star {
	background: var(--ai-hero-green);
	clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* ---------------------------------------------------------------- hover */

.estampame-hero-ai__scene:hover .estampame-hero-ai__item--proposals img {
	transform: translateY(-5px);
}

/* ------------------------------------------------------------ keyframes */

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

@keyframes aiFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes aiFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(calc(-1 * var(--ai-float-dist))); }
}

@keyframes aiLift {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(calc(-1 * var(--ai-lift-dist))); }
}

@keyframes aiTilt {
	0%, 100% { transform: rotate(calc(-1 * var(--ai-tilt-deg))); }
	50%      { transform: rotate(var(--ai-tilt-deg)); }
}

@keyframes aiArrowFlow {
	to { stroke-dashoffset: -64; }
}

@keyframes aiSparkTwinkle {
	0%, 100% { opacity: calc(var(--ai-spark-opacity) * 0.3); transform: scale(0.8) translateY(0); }
	50%      { opacity: var(--ai-spark-opacity); transform: scale(1.15) translateY(-3px); }
}

/* Movimiento del cursor: quieto casi todo el ciclo, gesto corto de clic. */
@keyframes aiCursorMove {
	0%, 70%   { transform: translate(0, 0); }
	78%       { transform: translate(-9px, -9px); }
	84%       { transform: translate(-9px, -9px) scale(0.94); }
	88%       { transform: translate(-9px, -9px) scale(1); }
	96%, 100% { transform: translate(0, 0); }
}

@keyframes aiCursorClick {
	0%, 80%  { opacity: 0; transform: scale(0.4); }
	84%      { opacity: 0.7; transform: scale(0.6); }
	94%      { opacity: 0; transform: scale(1.6); }
	100%     { opacity: 0; transform: scale(0.4); }
}

/* Pulso único de clic durante la secuencia. */
@keyframes aiCursorPulse {
	0%   { opacity: 0; transform: scale(0.4); }
	30%  { opacity: 0.75; transform: scale(0.7); }
	100% { opacity: 0; transform: scale(1.6); }
}

/* Zoom breve de la remera: sube a --ai-shirt-hover-scale y vuelve a 1. */
@keyframes aiShirtApply {
	0%   { transform: scale(1); }
	45%  { transform: scale(var(--ai-shirt-hover-scale)); }
	100% { transform: scale(1); }
}

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

@media (min-width: 992px) {
	.estampame-hero-ai {
		padding-block: 5rem 1.4rem;
	}

	/* Izquierda 45% / derecha 55% */
	.estampame-hero-ai__inner {
		grid-template-columns: 45fr 55fr;
		gap: 3.5rem;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.estampame-hero-ai__scene {
		max-width: 540px;
	}
}

@media (max-width: 767px) {
	/* Mobile: título, texto, botones primero; composición después. */
	.estampame-hero-ai {
		padding-block: 2.5rem 0.75rem;
	}

	.estampame-hero-ai__scene {
		max-width: 440px;
		margin-top: 0.5rem;
	}

	.estampame-hero-ai__subtitle {
		font-size: 1.0325rem;
	}

	/* Menos ruido visual: sin cursor y máximo 4 destellos. */
	.ai-cursor,
	.ai-spark--extra {
		display: none;
	}

	.ai-badge {
		font-size: 0.75rem;
	}

	/* En touch, hero-ai.js ejecuta la secuencia una única vez (~1.4 s
	   después de cargar) y deja la remera estampada (.ai-shirt--stay-printed).
	   Ajustes del resalte para la composición compacta, si hiciera falta: */
	.estampame-hero-ai {
		--ai-choice-left: 52%;
		--ai-choice-top: 44%;
		--ai-choice-w: 41%;
		--ai-choice-h: 35%;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	/* Valores del resalte en tablet (hoy iguales al desktop; son
	   relativos a la tarjeta de propuestas, así que escalan solos). */
	.estampame-hero-ai {
		--ai-choice-left: 52%;
		--ai-choice-top: 44%;
		--ai-choice-w: 41%;
		--ai-choice-h: 35%;
	}
}

/* Ancla para "Ver ejemplos" (scroll suave solo si no hay reduced motion) */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

#ejemplos {
	scroll-margin-top: 90px;
}

/* Sección Ejemplos un 25% más compacta que las secciones estándar. */
#ejemplos.estampame-section {
	padding-block: 2.6rem;
}

#ejemplos .estampame-section__header {
	margin-bottom: 1.9rem;
}

.estampame-hero-ai__ejemplos-cta {
	text-align: center;
	margin: 0;
}

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

@media (prefers-reduced-motion: reduce) {
	.estampame-hero-ai__content > *,
	.estampame-hero-ai__item,
	.ai-arrow,
	.ai-cursor {
		animation-duration: 0.01s !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		opacity: 1;
	}

	.estampame-hero-ai__item img,
	.ai-arrow__path,
	.ai-cursor__ring,
	.ai-spark,
	.ai-choice {
		animation: none !important;
		transition: none !important;
	}

	.ai-spark {
		opacity: calc(var(--ai-spark-opacity) * 0.6);
	}

	.ai-cursor__ring {
		opacity: 0;
	}

	/* Decisión documentada: con reducción de movimiento se muestra
	   directamente la remera estampada (estática, sin secuencia),
	   porque comunica mejor el resultado del proceso. Solo aplica si
	   Imagen8 cargó (.is-print-ready); si no, queda la blanca. */
	.estampame-hero-ai__item--shirt.has-print.is-print-ready .ai-shirt-base {
		opacity: 0;
		transition: none;
	}

	.estampame-hero-ai__item--shirt.has-print.is-print-ready .ai-shirt-print {
		opacity: 1;
		transition: none;
	}
}