/* ==========================================================================
   PÁGINA "SITE INSTITUCIONAL" (/site-institucional/)

   Mesmo padrão visual da página Landing Pages (referência): usa sites.css,
   criacao-sites.css e os componentes partilhados de landing-pages.css.
   Aqui ficam só os componentes próprios (classes si-): mockup de site
   institucional, mapa de páginas, hub de serviços, exemplos e cronologia.
   ========================================================================== */

/* Mockup de site institucional (CSS) ------------------------------------- */

.si-wf {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 4.5%;
	padding: 4.5%;
	overflow: hidden;
	border-radius: 8px;
	background: var(--s-fundo);
}

.lp-device--phone .si-wf {
	border-radius: 12px;
}

.si-wf i,
.si-wf b {
	display: block;
}

.si-wf__nav {
	height: 6%;
	min-height: 5px;
	display: flex;
	align-items: center;
	gap: 4%;
}

.si-wf__logo {
	width: 10%;
	height: 100%;
	border-radius: 99px;
	background: var(--s-cobre);
}

.si-wf__menu {
	flex: 1;
	height: 45%;
	display: flex;
	justify-content: center;
	gap: 4%;
}

.si-wf__menu i {
	width: 9%;
	border-radius: 99px;
	background: var(--s-borda);
}

.si-wf__menu i:nth-child(3) {
	background: var(--s-cobre-claro);
}

.si-wf__nav b {
	width: 14%;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--s-botao-1), var(--s-botao-2));
}

.si-wf__banner {
	flex: 1.3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8%;
	padding: 0 8%;
	border-radius: 6px;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--s-fundo-final) 88%, transparent) 0 45%, color-mix(in srgb, var(--s-fundo-final) 30%, transparent)),
		linear-gradient(135deg, var(--s-cobre-claro), var(--s-fundo-setores));
}

.si-wf__banner i {
	width: 42%;
	height: 10%;
	border-radius: 99px;
	background: var(--cor-branco);
}

.si-wf__banner i + i {
	width: 30%;
	opacity: .55;
}

.si-wf__banner b {
	width: 18%;
	height: 13%;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--s-botao-1), var(--s-botao-2));
}

.si-wf__servicos {
	flex: .8;
	display: flex;
	gap: 4%;
}

.si-wf__servicos i {
	flex: 1;
	border: 1px solid var(--s-borda-cartao);
	border-radius: 5px;
	background:
		radial-gradient(circle at 22% 30%, var(--s-cobre-claro) 0 7%, transparent 8%),
		var(--cor-branco);
}

.si-wf__sobre {
	flex: .6;
	display: flex;
	gap: 5%;
}

.si-wf__sobre > i {
	width: 38%;
	border-radius: 5px;
	background: linear-gradient(135deg, var(--s-fundo-hero), var(--s-fundo-setores));
}

.si-wf__sobre > span {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14%;
}

.si-wf__sobre > span i {
	height: 12%;
	border-radius: 99px;
	background: var(--s-borda);
}

.si-wf__sobre > span i:nth-child(2) { width: 80%; }
.si-wf__sobre > span i:nth-child(3) { width: 60%; }

/* Telemóvel: menu em ícone, conteúdo empilhado */
.si-wf--phone .si-wf__logo { width: 22%; }
.si-wf--phone .si-wf__menu { display: none; }
.si-wf--phone .si-wf__nav { justify-content: space-between; }
.si-wf--phone .si-wf__nav b { width: 16%; background: var(--s-texto); }
.si-wf--phone .si-wf__banner i { width: 75%; }
.si-wf--phone .si-wf__banner i + i { width: 55%; }
.si-wf--phone .si-wf__banner b { width: 45%; }
.si-wf--phone .si-wf__servicos { flex-direction: column; gap: 6%; flex: 1.4; }
.si-wf--phone .si-wf__servicos i:nth-child(3) { display: none; }
.si-wf--phone .si-wf__sobre { display: none; }

/* O QUE É: percurso ------------------------------------------------------ */

.si-percurso {
	padding: 30px;
}

.si-percurso .lp-cadeia {
	padding: 0;
}

.si-percurso .lp-cadeia li {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 18px;
}

.si-percurso .lp-cadeia li + li {
	margin-top: 26px;
}

.si-percurso .lp-cadeia li + li::before {
	top: -25px;
	line-height: 24px;
	font-size: 17px;
}

.si-percurso .lp-cadeia__ex {
	font-size: var(--texto-sm);
	font-weight: 600;
	color: var(--s-texto-medio);
	text-align: right;
}

/* MAPA DO SITE ----------------------------------------------------------- */

.si-mapa {
	padding: 72px;
	background: var(--s-fundo-portfolio);
}

.si-tree {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.si-tree__raiz,
.si-tree__ramos > li > span {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.si-tree__raiz {
	position: relative;
	background: linear-gradient(135deg, var(--s-botao-1), var(--s-botao-2));
	color: var(--cor-branco);
	font-size: var(--texto-base);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--s-botao-2) 25%, transparent);
}

.si-tree__raiz::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 2px;
	height: 24px;
	background: var(--s-borda);
}

.si-tree__ramos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, auto);
	justify-content: center;
	gap: 14px;
	width: max-content;
	max-width: 100%;
	margin: 24px 0 0;
	padding: 24px 0 0;
	list-style: none;
}

/* Linha horizontal que liga os ramos */
.si-tree__ramos::before {
	content: "";
	position: absolute;
	top: 0;
	left: 6%;
	right: 6%;
	height: 2px;
	background: var(--s-borda);
}

.si-tree__ramos > li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.si-tree__ramos > li::before {
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
	width: 2px;
	height: 24px;
	background: var(--s-borda);
}

.si-tree__ramos > li > span {
	border: 1px solid var(--s-borda-cartao);
	background: var(--cor-branco);
	color: var(--s-texto-forte);
	font-size: var(--texto-sm);
	box-shadow: 0 8px 20px rgb(var(--rgb-preto) / .05);
}

.si-tree__ramos > li.is-opcional > span {
	border-style: dashed;
}

.si-tree__ramos em {
	margin-left: 4px;
	color: var(--s-cobre);
	font-size: var(--texto-2xs);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
}

.si-tree__sub {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.si-tree__sub::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 50%;
	width: 2px;
	height: 18px;
	background: var(--s-borda);
}

.si-tree__sub li {
	padding: 7px 14px;
	border: 1px solid var(--s-borda-etiqueta);
	border-radius: 999px;
	background: var(--cor-branco);
	font-size: var(--texto-xs);
	font-weight: 700;
	color: var(--s-ferrugem-clara);
	text-align: center;
}

.si-paginas {
	max-width: 1080px;
	margin: 48px auto 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.si-paginas li {
	padding: 20px 22px;
	border-radius: 14px;
	background: var(--cor-branco);
	border: 1px solid var(--s-borda-cartao);
}

.si-paginas h3 {
	margin: 0 0 6px;
	font-size: var(--texto-base);
	font-weight: 800;
	color: var(--s-texto-forte);
}

.si-paginas h3 span {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--s-fundo-hero);
	color: var(--s-cobre);
	font-size: var(--texto-2xs);
	font-weight: 700;
	vertical-align: middle;
}

.si-paginas p {
	margin: 0;
	font-size: var(--texto-sm);
	line-height: 1.6;
	color: var(--s-texto-medio);
}

/* SERVIÇOS: hub ---------------------------------------------------------- */

.si-hub {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.si-hub__topo {
	position: relative;
	padding: 12px 26px;
	border-radius: 12px;
	background: var(--s-fundo-final);
	color: var(--cor-branco);
	font-weight: 800;
}

.si-hub__topo::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 2px;
	height: 26px;
	background: var(--s-borda);
}

.si-hub__paginas {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	width: 100%;
	margin-top: 26px;
	padding-top: 22px;
}

.si-hub__paginas::before {
	content: "";
	position: absolute;
	top: 0;
	left: 16%;
	right: 16%;
	height: 2px;
	background: var(--s-borda);
}

.si-hub__pagina {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 16px;
	border: 1px solid var(--s-borda-cartao);
	border-radius: 14px;
	background: var(--cor-branco);
	box-shadow: 0 12px 26px rgb(var(--rgb-preto) / .06);
}

.si-hub__pagina::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 50%;
	width: 2px;
	height: 22px;
	background: var(--s-borda);
}

.si-hub__pagina b {
	font-size: var(--texto-sm);
	font-weight: 800;
	color: var(--s-texto-forte);
}

.si-hub__pagina i {
	display: block;
	height: 7px;
	border-radius: 99px;
	background: var(--s-borda);
}

.si-hub__pagina i:nth-of-type(2) { width: 80%; }
.si-hub__pagina i:nth-of-type(3) { width: 60%; }

.si-hub__pagina em {
	margin-top: 6px;
	padding: 7px 0;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--s-botao-1), var(--s-botao-2));
	color: var(--cor-branco);
	font-size: var(--texto-2xs);
	font-style: normal;
	font-weight: 800;
	text-align: center;
}

.si-hub__nota {
	margin-top: 18px;
	color: var(--s-cobre-escuro);
	font-size: var(--texto-sm);
	font-weight: 800;
}

/* CREDIBILIDADE ---------------------------------------------------------- */

.si-cred__itens {
	grid-template-columns: repeat(4, 1fr);
}

/* EMPRESAS --------------------------------------------------------------- */

.si-empresas__grid {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	text-align: left;
}

.si-empresas__grid li {
	padding: 22px 22px 22px 24px;
	border: 1px solid var(--s-borda-cartao);
	border-left: 4px solid var(--s-vivo);
	border-radius: 12px;
	background: var(--cor-branco);
	transition: translate .6s var(--mov-curva), box-shadow .6s var(--mov-curva);
}

.si-empresas__grid li:hover {
	translate: 0 -4px;
	box-shadow: 0 16px 32px rgb(var(--rgb-preto) / .07);
}

.si-empresas__grid h3 {
	margin: 0 0 6px;
	font-size: var(--texto-base);
	font-weight: 800;
	color: var(--s-texto-forte);
}

.si-empresas__grid p {
	margin: 0;
	font-size: var(--texto-sm);
	line-height: 1.55;
	color: var(--s-texto-medio);
}

/* COMPARAÇÃO ------------------------------------------------------------- */

.si-comparar .lp-col h3 {
	font-size: var(--texto-xl);
}

.si-comparar__nota {
	max-width: 640px;
	margin-inline: auto !important;
	font-weight: 600 !important;
	line-height: 1.6;
}

/* PROCESSO: cronologia --------------------------------------------------- */

.si-timeline {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
	text-align: left;
}

.si-timeline::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 4%;
	right: 4%;
	height: 2px;
	background: linear-gradient(90deg, var(--s-borda), var(--s-cobre-claro), var(--s-borda));
}

.si-timeline li {
	position: relative;
}

.si-timeline__num {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cor-branco);
	border: 2px solid var(--s-cobre-claro);
	color: var(--s-cobre-claro);
	font-weight: 900;
}

.si-timeline li:last-child .si-timeline__num {
	border: none;
	background: linear-gradient(135deg, var(--s-botao-1), var(--s-botao-2));
	color: var(--cor-branco);
}

.si-timeline h3 {
	margin: 16px 0 6px;
	font-size: var(--texto-base);
	font-weight: 900;
	color: var(--s-texto-forte);
}

.si-timeline p {
	margin: 0;
	font-size: var(--texto-sm);
	line-height: 1.6;
	color: var(--s-texto-medio);
}

/* PROJETOS --------------------------------------------------------------- */

.si-projeto__case {
	margin: 14px 0 0 !important;
}

.si-projeto__case a {
	color: var(--s-ferrugem);
	font-weight: 800;
}

/* RESPONSIVO ------------------------------------------------------------- */

@media (max-width: 1200px) {
	.si-tree__ramos {
		grid-template-columns: repeat(3, auto);
		row-gap: 34px;
	}

	.si-tree__ramos::before {
		display: none;
	}

	.si-timeline {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 34px;
	}

	.si-timeline::before {
		display: none;
	}
}

@media (max-width: 1024px) {
	.si-mapa {
		padding: 54px 24px;
	}

	.si-paginas,
	.si-cred__itens,
	.si-empresas__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.si-hub {
		order: 2;
	}
}

@media (max-width: 700px) {
	/* Mapa do site em lista vertical */
	.si-tree {
		align-items: flex-start;
		padding-left: 6px;
	}

	.si-tree__raiz::after {
		left: 22px;
	}

	.si-tree__ramos {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: auto;
		margin-top: 18px;
		padding: 0 0 0 22px;
		border-left: 2px solid var(--s-borda);
		margin-left: 21px;
	}

	.si-tree__ramos > li {
		align-items: flex-start;
	}

	.si-tree__ramos > li::before {
		top: 50%;
		left: -22px;
		width: 18px;
		height: 2px;
	}

	.si-tree__ramos > li:has(.si-tree__sub)::before {
		top: 22px;
	}

	.si-tree__sub {
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 8px;
	}

	.si-tree__sub::before {
		display: none;
	}

	.si-paginas,
	.si-cred__itens,
	.si-empresas__grid,
	.si-timeline {
		grid-template-columns: 1fr;
	}

	.si-timeline li {
		display: grid;
		grid-template-columns: 48px 1fr;
		column-gap: 14px;
	}

	.si-timeline__num {
		grid-row: span 2;
	}

	.si-timeline h3 {
		margin-top: 4px;
	}

	.si-hub__paginas {
		gap: 8px;
	}

	.si-hub__pagina {
		padding: 12px 10px;
	}

	.si-percurso {
		padding: 22px;
	}

	.si-percurso .lp-cadeia li {
		flex-direction: column;
		gap: 2px;
	}

	.si-percurso .lp-cadeia__ex {
		text-align: left;
	}
}