@font-face {
	font-family: 'HeadingNow';
	src: url('../fonts/HeadingNow-64Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GooperCondensed';
	src: url('../fonts/VCGooperCondensed-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Dolphins';
	src: url('../fonts/dolphins.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colores Globales de Papachos */
	--azul: #3131DA;
	--rosa: #FF4FC4;
	--rojo: #E63E33;
	--amarillo: #FFEA27;
	--verde: #006A15;
	--negro: #000000;
	--blanco: #FFFFFF;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
}

#content {
	min-height: 100vh;
	background-color: var(--negro);
}

/* ==========================================================================
   Utility Classes (Animations)
   ========================================================================== */

/* Bounce/Spring Scale Animation para Stickers */
.sticker-pop {
	opacity: 0;
	scale: 0.3;
	/* Empieza más pequeño. Usa 'scale' independiente para no interferir con 'transform' (como rotate) */
	transition: scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
}

.sticker-pop.is-visible {
	opacity: 1;
	scale: 1;
}

/* Logo Swap on Hover */
.logo-swap-container {
	position: relative;
	display: inline-block;
}

.logo-swap-container .logo-default {
	display: block;
	transition: opacity 0.3s ease;
}

.logo-swap-container .logo-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.logo-swap-container:hover .logo-default {
	opacity: 0;
}

.logo-swap-container:hover .logo-hover {
	opacity: 1;
}

#mdw-cta-footer {
	transition: all 0.5s ease-out;
	position: fixed;
	display: flex;
	bottom: -100%;
	z-index: 1000;
	height: 80px;
	width: 100%;
	background-color: var(--blanco);

	&.show {
		bottom: 0;

		@media screen and (max-width: 1023px) {
			display: none;
		}
	}
}

.marcas-footer-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 80px;
	padding: 1rem;
}