/* =========================================================
 * Footer Sugar Sun
 * Degradado #FA5808 → #BA0368, curva blanca superior,
 * 3 columnas: Sobre | Menú | Contáctanos
 * + logo central abajo + badges esquina inferior derecha
 * ========================================================= */

/* Eliminamos el div .ss-footer__curve si todavía existe en el markup. */
.ss-footer__curve { display: none; }

.ss-footer {
	position: relative;
	background: #ffffff;   /* fondo blanco SOLO del bloque del footer */
	color: #ffffff;
	font-family: var(--OZ-Font-Base, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	padding: 0;
}

/* Capa interna con el degradado + curva. Va dentro del .ss-footer,
   así el blanco que la rodea (el background del footer) actúa como
   "sección blanca" detrás del arco, sin afectar al resto de la web. */
.ss-footer__bg {
	position: relative;
	background: linear-gradient(90deg, #FA5808 0%, #BA0368 100%);
	padding: 120px 0 32px;
	-webkit-clip-path: ellipse(120% 100% at 50% 100%);
	        clip-path: ellipse(120% 100% at 50% 100%);
}

.ss-footer__container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 32px 0;
	position: relative;
}

/* ---------- Grid principal: 3 columnas ---------- */
.ss-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 64px;
	margin-bottom: 48px;
}

.ss-footer__col {
	min-width: 0;
}

.ss-footer__heading {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 18px;
	color: #ffffff;
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 2px solid #ffffff;
	letter-spacing: .01em;
}

/* ---------- Col 1: Sobre ---------- */
.ss-footer__col--about p {
	color: #ffffff;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
}

/* Iconos sociales (van en la fila inferior, esquina izquierda) */
.ss-footer__socials {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	text-decoration: none;
	transition: transform .2s ease;
}
.ss-footer__socials a:hover {
	transform: translateY(-2px);
}
.ss-footer__socials img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ---------- Col 2: Menú ---------- */
.ss-footer__col--menu .ss-footer__list,
.ss-footer__col--menu .menu,
.ss-footer__col--menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ss-footer__col--menu li {
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.ss-footer__col--menu li:last-child {
	border-bottom: none;
}
.ss-footer__col--menu a {
	display: block;
	padding: 12px 0;
	color: #ffffff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: opacity .2s ease, padding-left .2s ease;
}
.ss-footer__col--menu a:hover {
	opacity: .85;
	padding-left: 6px;
}

/* ---------- Col 3: Contáctanos ---------- */
.ss-footer__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ss-footer__contacts li {
	color: #ffffff;
	font-size: 14px;
	line-height: 1.55;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.ss-footer__contacts li:last-child {
	border-bottom: none;
}
.ss-footer__contacts a {
	color: #ffffff;
	text-decoration: none;
	transition: opacity .2s ease;
}
.ss-footer__contacts a:hover {
	opacity: .85;
	text-decoration: underline;
}

/* =========================================================
 *  Zona inferior: sociales-izq | logo-centro | badges-der
 * ========================================================= */
.ss-footer__bottom {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 32px;
	margin-top: 32px;
}

/* Las redes ocupan la columna izquierda */
.ss-footer__bottom .ss-footer__socials {
	justify-self: start;
	align-self: end;
}

.ss-footer__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
}
.ss-footer__logo img,
.ss-footer__logo .custom-logo {
	max-height: 160px;
	max-width: 360px;
	width: auto;
	height: auto;
	display: block;
}
.ss-footer__logo a {
	display: inline-flex;
	align-items: center;
}
.ss-footer__logo-fallback {
	font-size: 32px;
	font-weight: 800;
	color: #ffffff;
}

/* Badges (esquina inferior derecha) */
.ss-footer__badges {
	justify-self: end;
	align-self: end;
	display: flex;
	align-items: center;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ss-footer__badges li {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-footer__badges img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	display: block;
}

/* =========================================================
 *  Firma (link tenue a Ozado)
 * ========================================================= */
.ss-footer__signature {
	margin-top: 32px;
	text-align: right;
	padding-right: 8px;
}
.ss-footer__signature a {
	color: rgba(255, 255, 255, .25);
	font-size: 12px;
	font-weight: 400;
	text-decoration: none;
	letter-spacing: .02em;
	transition: color .25s ease;
}
.ss-footer__signature a:hover {
	color: rgba(255, 255, 255, .9);
	text-decoration: underline;
}

/* =========================================================
 *  Responsive
 * ========================================================= */
@media (max-width: 1024px) {
	/* Evita el desbordamiento horizontal del clip-path y los badges absolute. */
	.ss-footer,
	.ss-footer__bg { overflow-x: hidden; }
	.ss-footer__container { padding: 56px 24px 0; max-width: 100%; box-sizing: border-box; }
	.ss-footer__grid { gap: 40px; }
	.ss-footer__badges img { width: 60px; height: 60px; }
	.ss-footer__logo img { max-height: 110px; }
}

@media (max-width: 768px) {
	/* En móvil quitamos la curva y el padding-top que reservaba su espacio.
	   Sin clip-path, el degradado queda plano en el borde superior. */
	.ss-footer__bg {
		padding-top: 0;
		-webkit-clip-path: none;
		        clip-path: none;
	}
	/* Lockdown de desbordamiento horizontal en móvil. */
	.ss-footer,
	.ss-footer__bg,
	.ss-footer__container {
		overflow-x: hidden;
		max-width: 100%;
		box-sizing: border-box;
	}
	.ss-footer__container {
		padding: 48px 20px 0;
		width: 100%;
	}
	.ss-footer__grid,
	.ss-footer__col,
	.ss-footer__col--about p,
	.ss-footer__contacts li,
	.ss-footer__contacts {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-word;
	}
	/* Las líneas divisoras y headings tampoco deben empujar el ancho. */
	.ss-footer__heading {
		max-width: 100%;
		box-sizing: border-box;
	}

	.ss-footer__grid {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-bottom: 32px;
	}

	.ss-footer__bottom {
		grid-template-columns: 1fr;
		gap: 24px;
		justify-items: center;
	}
	.ss-footer__bottom .ss-footer__socials,
	.ss-footer__badges {
		justify-self: center;
	}
	.ss-footer__badges { flex-wrap: wrap; justify-content: center; }
	.ss-footer__badges img {
		width: 64px;
		height: 64px;
	}
	.ss-footer__logo { min-height: 0; }
	.ss-footer__logo img,
	.ss-footer__logo .custom-logo { max-height: 110px; max-width: 280px; }

	.ss-footer__signature {
		text-align: center;
		padding-right: 0;
	}
}

@media (max-width: 480px) {
	.ss-footer__heading { font-size: 18px; }
	.ss-footer__col--about p,
	.ss-footer__contacts li { font-size: 13px; }
	.ss-footer__col--menu a { font-size: 14px; }
	.ss-footer__badges img { width: 54px; height: 54px; }
	.ss-footer__logo img { max-height: 84px; }
}