/* ============================================================
   02-typography.css — Body, headings, textos utilitários
   ============================================================ */

/*
   FONTES — Para trocar para Inter (renderização mais nítida em telas):
   1. Substitua o <link> do Google Fonts em todos os HTML por:
      https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap
   2. Troque 'Roboto' por 'Inter' em font-family abaixo.
*/

body {
	font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400; /* Era 500 — weight mais leve renderiza com mais nitidez */
	color: #333;
	background-color: #fff;
	-webkit-text-size-adjust: none;
	/* letter-spacing removido do body — causava desalinhamento subpixel */
	-webkit-font-smoothing: subpixel-antialiased; /* melhor clareza em Windows/Linux */
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
	body { font-size: 16px; line-height: 1.5; }
}

/* Headings */
h1, h2, h3, h4, h5, h6, [class^='heading-'] {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	color: #151515;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
[class^='heading-'] a { color: inherit; text-decoration: none; }

h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover,
[class^='heading-'] a:hover { color: #354879; }

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
[class^='heading-'] span { display: inline-block; }

h1, .heading-1 { font-size: 30px; line-height: 1.15; letter-spacing: 0; }
@media (min-width: 576px) { h1, .heading-1 { font-size: 32px; } }
@media (min-width: 768px) { h1, .heading-1 { font-size: 46px; line-height: 1.25; } }
@media (min-width: 992px) { h1, .heading-1 { font-size: 54px; } }
@media (min-width: 1200px) { h1, .heading-1 { font-size: 58px; } }
@media (min-width: 1600px) { h1, .heading-1 { font-size: 68px; line-height: 1.17647; } }

h2, .heading-2 {
	font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
	font-weight: 300;
	font-size: 28px;
	line-height: 1.4;
	letter-spacing: 0;
}
@media (min-width: 576px) { h2, .heading-2 { font-size: 30px; } }
@media (min-width: 768px) { h2, .heading-2 { font-size: 44px; } }
@media (min-width: 1200px) { h2, .heading-2 { font-size: 55px; line-height: 1.30909; } }

h3, .heading-3 { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
@media (min-width: 768px) { h3, .heading-3 { font-size: 30px; line-height: 1.4; } }
@media (min-width: 1200px) { h3, .heading-3 { font-size: 36px; line-height: 1.33333; } }
h3 .big, .heading-3 .big { font-size: 2em; line-height: 1; }

h4, .heading-4 { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
@media (min-width: 1200px) { h4, .heading-4 { font-size: 24px; line-height: 1.33333; } }

h5, .heading-5 { font-size: 16px; line-height: 1.5; letter-spacing: .01em; }
@media (min-width: 768px) { h5, .heading-5 { font-size: 20px; line-height: 1.4; } }

h6, .heading-6 {
	font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #aeb1be;
}
@media (min-width: 768px) { h6, .heading-6 { font-size: 16px; line-height: 1.5; } }

/* Utilitários de texto */
small, .small { display: block; font-size: 12px; line-height: 1.5; }
strong { font-weight: 700; color: #74757f; }

.big { font-size: 16px; line-height: 1.55; }
@media (min-width: 768px) { .big { font-size: 20px; line-height: 1.6; } }

.lead { font-size: 24px; line-height: 34px; font-weight: 300; }

.text-large {
	font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: uppercase;
}
@media (min-width: 576px) { .text-large { font-size: 55px; } }
@media (min-width: 768px) { .text-large { font-size: 68px; } }
@media (min-width: 992px) { .text-large { font-size: 80px; } }
@media (min-width: 1200px) { .text-large { font-size: 100px; } }

.custom-article { font-weight: 400; line-height: 1.69; }
.sumbol { padding-right: 0.36em; }

.text-width-1 { display: inline-block; max-width: 800px; }
.text-width-2 { display: inline-block; max-width: 350px; }
p .text-width-1 { display: inline-block; max-width: 800px; }

/* Cores de texto */
html .page .text-primary { color: rgb(38, 168, 150); }
.text-primary2 { color: rgb(38, 168, 150); }
.page .text-danger { color: #dc0000; }
.page .text-gray-700 { color: black; }
.page .text-color-1 { color: #fa9b1f; }

.context-dark .text-gray-700,
.bg-gray-700 .text-gray-700,
.bg-gray-800 .text-gray-700,
.bg-primary .text-gray-700,
.bg-primary-darken .text-gray-700,
.bg-primary-darker .text-gray-700 { color: #fff; }

/* Gradientes de título */
.gradient-title {
	background: linear-gradient(135deg, rgb(38, 168, 150) 0%, rgb(28, 148, 130) 50%, rgb(18, 128, 110) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: bold;
}
@supports not (-webkit-background-clip: text) {
	.gradient-title { color: rgb(38, 168, 150); }
}

.gradient-title-soft {
	background: linear-gradient(135deg, rgb(38, 168, 150) 0%, rgb(48, 188, 170) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: bold;
}

.gradient-title-glow {
	background: linear-gradient(135deg, rgb(38, 168, 150) 0%, rgb(28, 148, 130) 50%, rgb(18, 128, 110) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: bold;
	filter: drop-shadow(0 0 2px rgba(38, 168, 150, 0.3));
}

/* Título decorado */
.title-decorated {
	position: relative;
	padding-left: 40px;
	text-align: left;
}
.title-decorated::before {
	content: '';
	position: absolute;
	left: 0;
	top: .8em;
	width: 30px;
	border-bottom: 1px solid;
}
@media (min-width: 768px) {
	.title-decorated { padding-left: 70px; }
	.title-decorated::before { width: 50px; top: .7em; border-bottom-width: 2px; }
	.title-decorated-lg { padding-left: 80px; }
	.title-decorated-lg::before { width: 62px; }
	.title-decorated-lg + p { margin-top: 32px; }
}

/* WOW outer */
.wow-outer span { display: block; }
.wow-outer .wow > span { display: inline; }