/**
 * Fundamentos visuais reutilizaveis do tema VTR Hebrom.
 *
 * Novas paginas devem usar as classes .vtr-section__* para herdar o mesmo
 * padrao visual das secoes institucionais da Home.
 */

@font-face {
	font-family: Montserrat;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--vtr-color-aqua: #00b1aa;
	--vtr-color-teal: #2b776d;
	--vtr-color-gray: #575757;
	--vtr-color-black: #000000;
	--vtr-color-white: #ffffff;

	--vtr-section-font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif;
	--vtr-section-color: var(--vtr-color-white);
	--vtr-section-padding-block: 70px;
	--vtr-section-padding-block-mobile: 54px;
	--vtr-mobile-content-gutter: 24px;

	--vtr-section-line-width: 130px;
	--vtr-section-line-height: 2px;
	--vtr-section-line-title-gap: 65px;
	--vtr-section-line-radius: 999px;
	--vtr-section-line-color: rgba(0, 177, 170, 0.72);
	--vtr-section-line-shadow: 0 0 5px rgba(0, 177, 170, 0.22);

	--vtr-section-title-size: clamp(48px, 13.5vw, 64px);
	--vtr-section-title-weight: 300;
	--vtr-section-title-line-height: 1;
	--vtr-section-title-letter-spacing: -0.04em;
	--vtr-section-title-copy-gap: 20px;

	--vtr-section-copy-size: 24px;
	--vtr-section-copy-weight: 400;
	--vtr-section-copy-line-height: 32px;
	--vtr-section-copy-letter-spacing: normal;
	--vtr-section-paragraph-gap: 10px;

	--vtr-section-rail-width: 46px;
	--vtr-section-rail-height: 150px;
	--vtr-section-rail-padding: 16px 9px;
	--vtr-section-rail-border: 2px dashed rgba(255, 255, 255, 0.82);
	--vtr-section-rail-radius: 999px;
	--vtr-section-rail-shadow: 0 0 12px rgba(0, 177, 170, 0.18);
	--vtr-section-rail-font-size: 14px;
	--vtr-section-rail-font-weight: 600;
	--vtr-section-rail-letter-spacing: -0.01em;
	--vtr-section-title-visual-offset: 10px;
}

.vtr-section {
	color: var(--vtr-section-color);
	font-family: var(--vtr-section-font-family);
}

.vtr-section__line {
	display: block;
	width: var(--vtr-section-line-width);
	height: var(--vtr-section-line-height);
	margin: 0 0 var(--vtr-section-line-title-gap);
	border-radius: var(--vtr-section-line-radius);
	background: var(--vtr-section-line-color);
	box-shadow: var(--vtr-section-line-shadow);
}

.vtr-section__title {
	margin: 0;
	color: var(--vtr-section-color);
	font-family: var(--vtr-section-font-family);
	font-size: var(--vtr-section-title-size);
	font-style: normal;
	font-weight: var(--vtr-section-title-weight);
	line-height: var(--vtr-section-title-line-height);
	letter-spacing: var(--vtr-section-title-letter-spacing);
}

.vtr-section__copy {
	margin: 0;
	color: var(--vtr-section-color);
	font-family: var(--vtr-section-font-family);
	font-size: var(--vtr-section-copy-size);
	font-style: normal;
	font-weight: var(--vtr-section-copy-weight);
	line-height: var(--vtr-section-copy-line-height);
	letter-spacing: var(--vtr-section-copy-letter-spacing);
}

.vtr-section__copy p,
.vtr-section__paragraph {
	margin-top: 0;
	margin-bottom: var(--vtr-section-paragraph-gap);
}

.vtr-section__copy p:last-child,
.vtr-section__paragraph:last-child {
	margin-bottom: 0;
}

.vtr-section__rail {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--vtr-section-rail-width);
	min-width: var(--vtr-section-rail-width);
	min-height: var(--vtr-section-rail-height);
	padding: var(--vtr-section-rail-padding);
	border: var(--vtr-section-rail-border);
	border-radius: var(--vtr-section-rail-radius);
	background-color: transparent;
	box-shadow: var(--vtr-section-rail-shadow);
	color: var(--vtr-section-color);
	font-family: var(--vtr-section-font-family);
	font-size: var(--vtr-section-rail-font-size);
	font-weight: var(--vtr-section-rail-font-weight);
	letter-spacing: var(--vtr-section-rail-letter-spacing);
	line-height: 1;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}