/**
 * Promo "Mi Argentina" en la home.
 *
 * Replica el hero de https://www.estampame.com/sitioweb/mi-argentina/
 * con sus propios tokens, para no alterar la paleta verde del sitio.
 * La frase del dorso usa la misma tipografía manuscrita celeste que la plantilla.
 */

.estampame-ma {
	--ma-celeste: #74acdf;
	--ma-celeste-soft: #a8d0ef;
	--ma-celeste-mist: #e8f4fb;
	--ma-celeste-dark: #5a9ad4;
	--ma-ink: #1a2a3a;
	--ma-ink-soft: #3d5266;
	--ma-shadow: rgba(26, 42, 58, 0.12);
	--ma-display: "Fraunces", Georgia, serif;
	--ma-hand: "Ink Free", "Segoe Print", "Bradley Hand", "Apple Chancery", cursive;

	position: relative;
	overflow: hidden;
	padding: clamp(2.25rem, 6vw, 4rem) 0;
	background:
		radial-gradient(ellipse 120% 80% at 50% -10%, var(--ma-celeste-soft) 0%, transparent 55%),
		linear-gradient(165deg, #fbfcfe 0%, var(--ma-celeste-mist) 48%, #f0f7fc 100%);
	color: var(--ma-ink);
}

.estampame-ma__inner {
	display: grid;
	gap: 1.75rem;
	align-items: center;
}

/* —— Copy —— */
.estampame-ma__brand {
	margin: 0 0 0.35rem;
	font-family: var(--ma-display);
	font-size: clamp(1.5rem, 4.5vw, 2.05rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ma-celeste);
}

.estampame-ma__title {
	margin: 0 0 0.75rem;
	font-family: var(--ma-display);
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ma-ink);
}

.estampame-ma__text {
	margin: 0 0 0.6rem;
	max-width: 36rem;
	font-size: clamp(1rem, 2.4vw, 1.12rem);
	line-height: 1.5;
	color: var(--ma-ink-soft);
}

.estampame-ma__claim {
	margin: 0 0 1.35rem;
	max-width: 32rem;
	font-family: var(--ma-display);
	font-size: clamp(1.05rem, 2.8vw, 1.28rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--ma-celeste);
}

/* —— CTA —— */
.estampame-ma__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.95rem 1.9rem;
	border: 1px solid var(--ma-celeste);
	border-radius: 999px;
	background: var(--ma-celeste);
	color: #fff;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(116, 172, 223, 0.45);
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.estampame-ma__cta:hover,
.estampame-ma__cta:focus {
	background: var(--ma-celeste-dark);
	border-color: var(--ma-celeste-dark);
	color: #fff;
	box-shadow: 0 10px 26px rgba(90, 154, 212, 0.5);
	transform: translateY(-1px);
}

.estampame-ma__cta:focus-visible {
	outline: 3px solid #e8c547;
	outline-offset: 3px;
}

.estampame-ma__price {
	margin: 0.85rem 0 0;
	font-size: 0.98rem;
	color: var(--ma-ink-soft);
}

.estampame-ma__price strong {
	color: var(--ma-ink);
	font-weight: 600;
	white-space: nowrap;
}

/* —— Remera decorativa: misma composición y flote que la landing —— */
.estampame-ma__visual {
	position: relative;
	width: min(100%, 340px);
	margin-inline: auto;
	aspect-ratio: 822 / 964;
}

.estampame-ma__shirt {
	position: relative;
	width: 100%;
	height: 100%;
	animation: estampame-ma-float 5.5s ease-in-out infinite;
}

.estampame-ma__mockup {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 32px var(--ma-shadow));
}

.estampame-ma__sun,
.estampame-ma__map,
.estampame-ma__icon {
	position: absolute;
	height: auto;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.estampame-ma__sun {
	left: 50%;
	top: 22%;
	width: 11.5%;
}

.estampame-ma__map {
	left: 50%;
	top: 45%;
	width: 16.8%;
	opacity: 0.95;
}

.estampame-ma__icon {
	left: var(--ma-x);
	top: var(--ma-y);
	width: 10%;
	transform: translate(-50%, -50%) rotate(var(--ma-rot, 0deg));
}

.estampame-ma__phrase {
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-family: var(--ma-hand);
	font-size: clamp(0.65rem, 2.1vw, 0.9rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ma-celeste);
	white-space: nowrap;
	pointer-events: none;
}

@keyframes estampame-ma-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@media (min-width: 860px) {
	.estampame-ma__inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 2.5rem;
	}

	.estampame-ma__visual {
		width: min(100%, 400px);
		margin-inline: 0 auto;
	}
}

@media (max-width: 600px) {
	.estampame-ma__cta {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.estampame-ma__shirt {
		animation: none;
	}

	.estampame-ma__cta {
		transition: none;
	}

	.estampame-ma__cta:hover {
		transform: none;
	}
}