/**
 * Home page redesign — scoped to front-page.php only.
 * Tokens sourced from Figma file v96S5hLuHGfpP4uZORFMPy, frame "Landing page" (1:5585).
 */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Lilita+One&family=Cherry+Bomb+One&display=swap');

.home-redesign {
	--home-salmon: #fd4883;
	--home-azul: #2b56c0;
	--home-celeste: #44aaec;
	--home-verde: #47b687;
	--home-lila: #a173d1;
	--home-naranja: #ffae00;
	--home-amarillo: #fed319;
	--home-gris-trazos: #d0d0d0;
	--home-radio: 25px;
	font-family: 'Baloo 2', sans-serif;
	overflow-x: hidden;
	padding: 0 16px;
}

.home-redesign a {
	text-decoration: none;
}

.home-btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--home-salmon);
	color: #fff !important;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 600;
	font-size: 22px;
	padding: 18px 32px;
	border-radius: 92px;
	white-space: nowrap;
}

.home-btn-pill img {
	width: 40px;
	height: 40px;
}

/* ================= HERO ================= */
.home-hero {
	/* Break out of .home-redesign's 16px side padding so the slider runs
	   edge-to-edge regardless of the viewport width. */
	position: relative;
	width: calc(100% + 32px);
	max-width: calc(100% + 32px);
	margin: 0 -16px;
	overflow: hidden;
}

.home-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(253, 72, 131, 0) 55%, rgba(253, 72, 131, 0.65) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Cap slide height on desktop only — object-fit crops to fill instead of
   letterboxing. The slides are ~2.065:1, so this only crops on unusually
   wide viewports (>~1860px); at common desktop widths (1440-1920px) the
   natural height stays at or under this cap, so nothing gets cut off. */
@media (min-width: 993px) {
	.home-hero img {
		width: 100%;
		max-height: 900px;
		object-fit: cover;
	}
}

.home-hero .flickity-prev-next-button {
	background-color: transparent;
	opacity: 1;
	z-index: 2;
}

.home-hero .flickity-prev-next-button .arrow,
.home-hero .flickity-prev-next-button svg {
	fill: var(--home-salmon);
}

.home-hero .slider-nav-circle .flickity-prev-next-button svg {
	background-color: #fff;
	border-color: var(--home-salmon);
}

/* Flatsome's default circle-nav hover swaps to the theme's global accent
   color (--fs-color-primary); override so hover stays on-brand instead. */
.home-hero .slider-nav-circle .flickity-prev-next-button:hover svg {
	background-color: var(--home-salmon);
	border-color: var(--home-salmon);
	fill: #fff !important;
}

.home-hero .flickity-page-dots {
	z-index: 2;
}

.home-hero .flickity-page-dots .dot {
	background-color: #fff;
	border: 3px solid transparent;
	opacity: 0.85;
}

.home-hero .flickity-page-dots .dot:hover {
	opacity: 1;
}

.home-hero .flickity-page-dots .dot.is-selected {
	background-color: var(--home-amarillo);
	opacity: 1;
}

/* ================= TIENDA OFICIAL + GRID ================= */
.home-tienda {
	max-width: 1267px;
	margin: 0 auto;
	padding: 60px 0 24px;
}

.home-tienda__intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.home-tienda__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Cherry Bomb One', cursive;
	font-size: 56px;
	margin: 0 0 12px;
}

.home-tienda__title-pink {
	color: var(--home-salmon);
}

.home-tienda__title-blue {
	color: var(--home-celeste);
}

.home-tienda__mano {
	width: 44px;
	height: 44px;
	object-fit: contain;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 4px;
}

.home-tienda__subtitle {
	font-family: 'Baloo 2', sans-serif;
	font-weight: 600;
	font-size: 24px;
	color: var(--home-azul);
	margin: 0;
	max-width: 600px;
}

.home-tienda__cta {
	flex-shrink: 0;
}

.home-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.home-product-card {
	border-radius: 32px;
	overflow: hidden;
	border: 1px solid var(--card-accent, var(--home-salmon));
	display: flex;
	flex-direction: column;
}

.home-product-card__media {
	position: relative;
	background: var(--card-accent, var(--home-salmon));
	aspect-ratio: 423 / 457;
}

.home-product-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}

.home-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-product-card__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	background: var(--card-accent, var(--home-salmon));
	color: #fff;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 8px 16px;
	border-radius: 46px;
	text-transform: uppercase;
}

.home-product-card__wishlist {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-product-card__wishlist .wishlist-button {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--card-accent, var(--home-salmon)) !important;
	/* Flatsome's .button.circle carries a margin-bottom meant for button
	   groups; left as-is it pushes the icon up off-center in this tight
	   circle. */
	margin: 0 !important;
}

.home-product-card__discount {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: var(--home-amarillo);
	color: var(--home-azul);
	font-family: 'Lilita One', cursive;
	font-size: 13px;
	width: 54px;
	height: 54px;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-12deg);
}

.home-product-card__secondary-badge {
	position: absolute;
	bottom: 14px;
	right: 14px;
	background: #fff;
	color: var(--card-accent, var(--home-salmon));
	font-family: 'Lilita One', cursive;
	font-size: 13px;
	line-height: 1.1;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.home-product-card__body {
	background: #fff;
	padding: 22px;
	border-radius: 15px 15px 32px 32px;
	margin-top: -20px;
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.home-product-card__title {
	font-family: 'Lilita One', cursive;
	font-size: 22px;
	font-weight: 500;
	line-height: 22.5px;
	color: var(--card-accent, var(--home-salmon));
	margin: 0 0 6px;
}

.home-product-card__title a {
	color: inherit;
}

.home-product-card__desc {
	font-family: 'Baloo 2', sans-serif;
	font-size: 16px;
	font-weight: regular;
	color: var(--home-azul);
	margin: 0 0 12px;
	line-height: 1.3;
}

.home-product-card__price {
	font-family: 'Lilita One', cursive;
	font-size: 22px;
	font-weight: 500 !important;
	color: var(--card-accent, var(--home-salmon));
	margin: 0;
}

.home-product-card__price .woocommerce-Price-amount {
	font-weight: 500 !important;
	color: inherit !important;
}

.home-product-card__iva {
	font-family: 'Baloo 2', sans-serif;
	font-size: 14px;
	color: var(--home-azul);
	margin: 0 0 16px;
}

.home-product-card__cta {
	margin-top: auto;
}

.home-product-card__cta a.button,
.home-product-card__cta a.add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	text-align: center;
	background: var(--card-accent, var(--home-salmon)) !important;
	color: #fff !important;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 800;
	font-size: 16px;
	text-transform: none;
	padding: 16px;
	border-radius: var(--home-radio);
}

.home-product-card__cta a.button::before {
	content: '';
	width: 18px;
	height: 18px;
	background: url("../images/bag.svg") no-repeat center / contain;
	flex-shrink: 0;
}

/* ================= BENEFITS BAR ================= */
.home-benefits {
	max-width: 1267px;
	margin: 0 auto 60px;
	background: #fff;
	border: 1px solid var(--home-gris-trazos);
	border-radius: 40px;
	box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.07);
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 24px 40px;
	gap: 20px;
	flex-wrap: wrap;
}

.home-benefits__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.home-benefits__item svg {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.home-benefits__item strong {
	display: block;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 600;
	font-size: 18px;
}

.home-benefits__item span {
	display: block;
	font-family: 'Baloo 2', sans-serif;
	font-size: 15px;
	color: var(--home-azul);
}

/* ================= SIGUENOS EN NUESTRAS REDES ================= */
.home-social {
	position: relative;
	max-width: 1330px;
	margin: 0 auto;
	padding: 40px 20px 80px;
	text-align: center;
}

.home-social__grid-container {
	position: relative;
}

.home-social__heading {
	/* Pulls the card grid up so it visually sits in front of Rossi & Luigi's
	   legs/hands — the grid-container is a later sibling, so it paints over
	   the tail end of the heading artwork with no z-index needed. */
	margin: 0 0 clamp(-70px, -7vw, -30px);
}

.home-social__heading-image {
	display: block;
	width: 100%;
	max-width: 1040px;
	/* The source art (1216x528) has ~108px of empty canvas below Rossi &
	   Luigi's feet; crop it out so the characters' feet, not blank space,
	   sit right above the card grid. */
	aspect-ratio: 1216 / 420;
	object-fit: cover;
	object-position: top;
	margin: 0 auto;
}

.home-social__grid {
	display: flex;
	justify-content: center;
	gap: clamp(10px, 2.5vw, 24px);
	margin-bottom: 40px;
	flex-wrap: wrap;
	padding: 0 6px;
}

.home-social-card-wrap {
	position: relative;
	display: block;
	width: clamp(120px, 22vw, 168px);
	height: clamp(148px, 27vw, 206px);
}

/*
 * The rotated "sticker" layer behind the card is a real sibling element that
 * comes FIRST in the DOM, not a negative z-index pseudo-element. Two elements
 * with no z-index set always paint in DOM order (later on top), so this back
 * layer is guaranteed to render behind .home-social-card in every browser —
 * no stacking-context edge cases possible.
 */
.home-social-card-wrap__back {
	position: absolute;
	inset: 0;
	border: 1px solid var(--card-color, var(--home-salmon));
	border-radius: 20px;
	background: #fff;
	transform: rotate(-4deg);
}

.home-social-card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #ffebf6;
	border: 1px solid var(--card-color, var(--home-salmon));
	border-radius: 20px;
	padding: clamp(8px, 2vw, 14px);
}

.home-social-card:hover .home-social-card__inner {
	background: #fff5fa;
}

.home-social-card__inner {
	width: 100%;
	height: 100%;
	border: 2px dashed var(--card-color, var(--home-salmon));
	border-radius: 14px;
	background: #fff;
	transition: background 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 14px);
}

.home-social-card-wrap__back--instagram {
	background-color: var(--home-naranja);
}

.home-social-card-wrap__back--instagram,
.home-social-card--instagram {
	--card-color: var(--home-naranja);
}

.home-social-card-wrap__back--tiktok {
	background-color: var(--home-lila);
}

.home-social-card-wrap__back--tiktok,
.home-social-card--tiktok {
	--card-color: var(--home-lila);
}

.home-social-card-wrap__back--facebook {
	background-color: var(--home-celeste);
}

.home-social-card-wrap__back--facebook,
.home-social-card--facebook {
	--card-color: var(--home-celeste);
}

.home-social-card-wrap__back--youtube {
	background-color: var(--home-salmon);
}

.home-social-card-wrap__back--youtube,
.home-social-card--youtube {
	--card-color: var(--home-salmon);
}

.home-social-card-wrap__back--spotify {
	background-color: var(--home-verde);
}

.home-social-card-wrap__back--spotify,
.home-social-card--spotify {
	--card-color: var(--home-verde);
}

.home-social-card__icon {
	width: clamp(64px, 14vw, 97px);
	height: clamp(64px, 14vw, 97px);
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-social-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.home-social-card__label {
	font-family: 'Lilita One', cursive;
	font-size: clamp(14px, 3vw, 20px);
	color: var(--card-color);
	border-bottom: 3px solid var(--card-color);
	padding-bottom: 2px;
	white-space: nowrap;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
	.home-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-tienda__title {
		font-size: 40px;
	}
}

@media (max-width: 600px) {
	.home-product-grid {
		grid-template-columns: 1fr;
	}

	.home-tienda__intro {
		align-items: flex-start;
	}

	.home-benefits {
		flex-direction: column;
		align-items: flex-start;
	}
}