/*
 * SkySkin Header & Footer Responsive Fix 1.1.0
 * Cambios acotados a los componentes globales aprobados.
 */

/* El JS normaliza el trazo a 100 unidades. Este patrón deja una ventana
 * transparente exactamente detrás del logo y conserva el resto de la línea. */
#ssk1111-header .ssk1111-art-svg .skyskin-hero-fix__logo-contour {
	stroke-dasharray: 5 22 73 !important;
	stroke-dashoffset: 0 !important;
}

@media (max-width: 960px) {
	/* El header original ocultaba toda la geometría en tablet/mobile.
	 * Se reutiliza el mismo SVG, sin crear ni reemplazar el hero. */
	body.ssk1111-active #ssk1111-header {
		background: linear-gradient(
			90deg,
			#A75F73 0%,
			#CA8DA0 58%,
			#E4BDC7 100%
		) !important;
		isolation: isolate;
	}

	body.ssk1111-active #ssk1111-header .ssk1111-art {
		display: block !important;
		height: 116px !important;
		overflow: hidden !important;
		opacity: 1 !important;
	}

	body.ssk1111-active #ssk1111-header .ssk1111-art-svg {
		display: block !important;
		width: 100% !important;
		height: 116px !important;
		max-width: none !important;
	}

	/* Estos adornos laterales fueron diseñados para desktop y competirían
	 * con el logo y el botón de menú en anchos reducidos. */
	body.ssk1111-active #ssk1111-header .ssk1111-flower,
	body.ssk1111-active #ssk1111-header .ssk1111-orbit,
	body.ssk1111-active #ssk1111-header .ssk1111-ball {
		display: none !important;
	}

	body.ssk1111-active #ssk1111-header .ssk1111-logo,
	body.ssk1111-active #ssk1111-header .ssk1111-toggle,
	body.ssk1111-active #ssk1111-header .ssk1111-mobile-menu {
		z-index: 7;
	}

	#ssk1111-header .ssk1111-art-svg .skyskin-hero-fix__logo-contour {
		stroke-dasharray: 0 22 78 !important;
	}
}

@media (max-width: 520px) {
	body.ssk1111-active #ssk1111-header .ssk1111-art,
	body.ssk1111-active #ssk1111-header .ssk1111-art-svg {
		height: 110px !important;
	}

	/* En teléfonos el logo ocupa una proporción mayor del ancho. */
	#ssk1111-header .ssk1111-art-svg .skyskin-hero-fix__logo-contour {
		stroke-dasharray: 0 40 60 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ssk1111-header .ssk1111-art-svg .skyskin-hero-fix__logo-contour {
		transition: none !important;
	}
}

/* Footer: el SVG comienza con una curva alta en el centro. En tablet y mobile
 * el logo original arrancaba antes de esa curva y quedaba fuera del fondo rosa.
 * Se desplaza el contenido debajo del contorno y se recupera el espacio
 * compactando únicamente separaciones verticales. */
@media (max-width: 960px) {
	body.sskf1-active #sskf1-footer .sskf1-inner {
		padding-top: 96px !important;
		padding-bottom: 18px !important;
		gap: 12px !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-links {
		row-gap: 10px !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-motto i {
		margin-bottom: 6px !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-copy {
		padding-bottom: 15px !important;
	}
}

@media (max-width: 560px) {
	body.sskf1-active #sskf1-footer .sskf1-inner {
		padding: 104px 18px 8px !important;
		gap: 7px !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-logo {
		width: 168px !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-links {
		gap: 4px !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-contact {
		line-height: 1.2 !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-motto {
		font-size: 11.5px !important;
		line-height: 1.16 !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-motto i {
		margin-bottom: 4px !important;
	}

	body.sskf1-active #sskf1-footer .sskf1-copy {
		padding: 0 16px 12px !important;
		font-size: 9.5px !important;
		line-height: 1.25 !important;
	}
}