@charset "iso-8859-1";
/* CSS Document */

/* =====================================================
   SMALL (sm)
   >= 576px
   ===================================================== */

@media (min-width: 576px) {
	body {
		background: #faeae0;
		font-family: system-ui;
		margin-top: 20px;
	}

	.celula-extra {
		width: 50%;
		float: left;
		padding-bottom: 8px;
	}

	.celula {
		width: 100%;
		float: left;
		padding-bottom: 8px;
	}
}


/* =====================================================
   MEDIUM (md)
   >= 768px
   Tablets
   ===================================================== */

@media (min-width: 768px) {
	body {
		background: #faeae0;
		font-family: system-ui;
		margin-top: 20px;
	}

	.celula-extra {
		width: 25%;
		float: left;
		padding-right: 12px;
		padding-bottom: 8px;
	}

	.celula {
		width: 50%;
		float: left;
		padding-right: 12px;
		padding-bottom: 8px;
	}

	/* Estado inicial (no topo da página) */
	.navbar-custom {
		background-color: #fc6bd7;
		transition: background-color 0.4s ease, box-shadow 0.4s ease;
	}

	.hero {
		min-height: 50vh;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.hero-page {
		min-height: 9vh;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.titulo span {
		font-size: 22px;
	}
}


/* =====================================================
   LARGE (lg)
   >= 992px
   Notebooks e desktops
   ===================================================== */

@media (min-width: 992px) {
	body {
		margin-top: 20px;
		background: #faeae0;
		font-family: system-ui;
	}

	/* Estado inicial (no topo da página) */
	.navbar-custom {
		background-color: #fc6bd7;
		transition: background-color 0.4s ease, box-shadow 0.4s ease;
	}
	
	.logo {
		text-align: center;
		width: 350px;
	}
	
	.hero {
		min-height: 60vh;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.hero-page {
		min-height: 9vh;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.titulo span {
		font-size: 22px;
	}
}


/* =====================================================
   EXTRA LARGE (xl)
   >= 1200px
   Monitores grandes
   ===================================================== */

@media (min-width: 1200px) {
	body {
		margin-top: 20px;
		background: #faeae0;
		font-family: system-ui;
	}

	legend {
		font-size: 26px;
	}

	.logo {
		text-align: center;
		width: 350px;
	}
	
	.celula-extra {
		width: 14%;
		float: left;
		padding-right: 12px;
		padding-bottom: 8px;
	}

	.celula {
		width: 25%;
		float: left;
		padding-right: 12px;
		padding-bottom: 8px;
	}

	/* Estado inicial (no topo da página) */
	.navbar-custom {
		background-color: #fc6bd7;
		transition: background-color 0.4s ease, box-shadow 0.4s ease;
	}

	/* Estado quando a página for rolada para baixo */
	.navbar-custom.scrolled {
		background-color: #fab8f4;
		/* Substitua pela sua cor personalizada */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		/* Opcional: uma sombra leve */
	}

	.hero {
		min-height: 85vh;
		/* 60 */
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.hero-page {
		min-height: 12vh;
		/* 9 */
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.titulo span {
		font-size: 22px;
	}
}


/* =====================================================
   EXTRA EXTRA LARGE (xxl)
   >= 1400px
   Monitores ultrawide e 4K
   ===================================================== */

@media (min-width: 1400px) {
	body {
		margin-top: 0px;
		background: #faeae0;
		font-family: system-ui;
	}

	legend {
		font-size: 26px;
	}
	
	.logo {
		text-align: center;
		width: 350px;
	}

	/* Estado inicial (no topo da página) */
	.navbar-custom {
		background-color: #fc6bd7;
		transition: background-color 0.4s ease, box-shadow 0.4s ease;
	}

	/* Estado quando a página for rolada para baixo */
	.navbar-custom.scrolled {
		background-color: #fab8f4;
		/* Substitua pela sua cor personalizada */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		/* Opcional: uma sombra leve */
	}

	.hero {
		min-height: 60vh;
		/* 85 */
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.hero-page {
		min-height: 9vh;
		/* 12 */
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		color: white;
	}

	.titulo span {
		font-size: 22px;
	}
}