@charset "UTF-8";
 
/* ----- VARIÁVEIS ----------------------------------------------------------------------------- */
 
:root {
	color-scheme: dark;
 
	--espaco:		1.25rem;
 
	--bege:			#f7e9db;
	--bege-claro:	#fdf8f3;
 
	--ceu-1:		#1c0c2b;
	--ceu-2:		#3c165a;
	--ceu-3:		#692b7c;
	--ceu-4:		#b05281;
	--ceu-5:		#f2947a;
	--ceu-6:		#f9b886;
 
	--fonte-texto:	"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fonte-titulo:	"Fraunces", Georgia, "Times New Roman", serif;
}
 
/* ----- RESET --------------------------------------------------------------------------------- */
 
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
 
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
 
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
 
input,
button,
textarea,
select {
	font: inherit;
}
 
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
 
/* ----- ELEMENTOS BÁSICOS --------------------------------------------------------------------- */
 
body {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--ceu-1); /* fallback */
	background-image: linear-gradient( 180deg,
		var(--ceu-1) 0%,
		var(--ceu-2) 35%,
		var(--ceu-3) 50%,
		var(--ceu-4) 75%,
		var(--ceu-5) 85%,
		var(--ceu-6) 100%
	);
	color: #fff;
	font-family: var(--fonte-texto);
	font-size: 1.25rem;
	font-weight: 300;
	font-optical-sizing: auto;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
 
button,
input,
select,
textarea {
	font-family: var(--fonte-texto);
	font-size: 1.25rem;
	font-weight: 300;
}
 
strong {
	font-weight: 400;
}
 
a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
 
a:focus-visible,
button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
 
/* ----- CÉU ----------------------------------------------------------------------------------- */
 
#sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
 
/* ----- ESTRUTURA ----------------------------------------------------------------------------- */
 
/* Mantém o conteúdo acima do céu animado (o SVG absoluto pintaria por cima de elementos estáticos) */
header,
main,
footer {
	position: relative;
	z-index: 1;
}
 
.container {
	max-width: 62.5rem;
	margin: auto;
	padding: var(--espaco);
}


/* ----- CABEÇALHO ----------------------------------------------------------------------------- */

header {}

#lua-crescente {
	background: url(../images/logotipo-horizontal.svg) no-repeat center center/cover;
	aspect-ratio: 1098/716;
	width: clamp(17.5rem, 9.75rem + 34.375vw, 31.25rem);
	height: auto;
	margin: calc( var(--espaco) * 2);
	margin-inline: auto;
	text-indent: -100000000px;
}

/* ----- CONTEÚDO ------------------------------------------------------------------------------ */
 
h1 {
	width: clamp(17.5rem, 90vw, 62.5rem);
	margin-bottom: calc( var(--espaco) * 6);
	margin-inline: auto;
	font-family: var(--fonte-titulo);
	font-weight: 400;
	font-size: clamp(1.75rem, 0.1818rem + 3.6364vw, 3.375rem);
	line-height: 1.1;
	text-align: center;
	text-wrap: balance;
}
 
h2 {
	margin-bottom: var(--espaco);
	font-family: var(--fonte-titulo);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.0227rem + 0.5455vw, 1.5rem);
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}
 
#servicos {
	display: grid;
	gap: calc( var(--espaco) * 4);
	grid-template-columns: 1fr;
}
 
@media (min-width: 900px) {
 
	#servicos {
		grid-template-columns: repeat(3, 1fr);
	}
 
}
 
/* ----- RODAPÉ -------------------------------------------------------------------------------- */
 
footer {
	display: flex;
	align-items: flex-end;
	width: 100%;
	margin-top: calc( var(--espaco) * 2);
	background: url(../images/montains.svg) no-repeat center center/cover;
	aspect-ratio: 2400/518;
}
 
footer .container {
	width: 100%;
	padding-block: calc( var(--espaco) * 0.5);
}
 
footer p {
	font-size: 0.875rem;
	text-align: center;
}
 
/* ----- ACESSIBILIDADE: MOVIMENTO REDUZIDO ---------------------------------------------------- */
 
@media (prefers-reduced-motion: reduce) {
 
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
 
}
}