/* =========================================================
   Box Área (linha do tempo)
   ========================================================= */
.boxArea{background: var(--color-bg-page); scroll-margin-top: var(--layout-header-height-compact);}
.boxArea:nth-of-type(odd){background: var(--color-bg-subtle);}
	.boxArea .centro{position: relative; display: grid; grid-template-columns: 273px 20px minmax(0, 1fr); align-items: start; column-gap: var(--space-40); padding-top: 128px; padding-bottom: 128px;}
		/* Linha vertical da linha do tempo */
		.boxArea .centro::before{content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--layout-page-margin) + 273px + var(--space-40) + 9px); width: 2px; background: var(--color-border-subtle);}
		.boxArea h2{font: 400 var(--type-h1-size)/var(--type-h1-line-height) var(--font-family-heading); letter-spacing: -0.02em; color: var(--color-text-heading);}
			.boxArea h2 strong{font-weight: 700;}
		.boxArea .marcador{position: relative; z-index: 1; padding-top: 11px;}
		.boxArea .lista li{position: relative; padding-left: 20px; font: 300 var(--type-body-list-size)/var(--type-body-list-line-height) var(--font-family-body); letter-spacing: 0.02em; color: var(--color-text-heading);}
			.boxArea .lista li::before{content: ""; position: absolute; left: 0; top: 0; width: 8px; height: var(--type-body-list-line-height); background: url('../img/marcadorLista.svg') no-repeat center / 8px 44px;}

/* Laptop */
@media (max-width: 1439px){
	.boxArea .centro{grid-template-columns: 220px 20px minmax(0, 1fr); column-gap: var(--space-32); padding-top: var(--layout-section-y-md); padding-bottom: var(--layout-section-y-md);}
		.boxArea .centro::before{left: calc(var(--layout-page-margin) + 220px + var(--space-32) + 9px);}
}

/* Tablet e celular: sem linha do tempo, título em cima da lista */
._320 .boxArea .centro{grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); padding-top: var(--layout-section-y-md); padding-bottom: var(--layout-section-y-md);}
	._320 .boxArea .centro::before,
	._320 .boxArea .marcador{display: none;}