/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                    INCOMPANY — Treinamentos In-Company (page-incompany.php)
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝

Complemento de bootstrap.css + dialogo_cores.css.

Os valores aqui sao os do mockup (Claude Design), nao os da escala do Bootstrap: o mockup
usa 10/12/14/18/22/26/28/30/32/34/36/44/52/72/88/96px e encaixar isso em mt-3/mt-4/p-4
comprime o ritmo da pagina. Por isso o espacamento vive em classe .ic_, e nao em utilitario.

Todo seletor vive dentro de .ic_pagina ou usa o prefixo .ic_ para nao vazar para o resto do site.

Paleta (design system Instituto Filantropia):
	laranja #ff8200 · laranja2 #e15500 · laranja5 #ffe5c9 · preto #141d2d
	cinza #71878e · cinza2 #a6b2b6 · cinza3 #e5e5e5 · cinza4 #f5f5f5
*/


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    BASE
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

html { scroll-behavior: smooth; }

/* bootstrap.css do tema fixa .container em width:1140px — abaixo de 576px isso estoura a
   viewport. Restaurar width:100% devolve os max-width por breakpoint do Bootstrap, que e'
   o que o mockup usa (1320px em telas >=1400px). */
.ic_pagina .container { width: 100%; }

/* tipografia do design system: Raleway nos titulos, Lato no corpo.
   o tema aplica o shorthand `font:` em a/li/p span, por isso o !important aqui. */
.ic_pagina,
.ic_pagina p,
.ic_pagina a,
.ic_pagina li,
.ic_pagina span,
.ic_pagina button	{ font-family: 'Lato', sans-serif !important; }

.ic_pagina h1,
.ic_pagina h2,
.ic_pagina h3,
.ic_pagina h4		{ font-family: 'Raleway', sans-serif !important; letter-spacing: 0 !important; }

/* o reboot do Bootstrap 5 sublinha todo <a>; aqui o sublinhado e' opt-in
   via .text-decoration-underline (usado so nos contatos do CTA final) */
.ic_pagina a		{ text-decoration: none; }

/* bootstrap.css do tema abre com `* { color:#141d2d }`, o que quebra a heranca de cor:
   todo filho recebe #141d2d direto em vez de herdar do pai. Sem isto, os <i> de icone
   ficam escuros dentro de botao/circulo colorido e o <span> de texto dos itens de lista
   ignora o .cinza do <li>. As classes de cor do tema tem !important e continuam vencendo. */
.ic_pagina i,
.ic_pagina span,
.ic_pagina strong,
.ic_pagina em		{ color: inherit; }

/* compensa a subnav fixa ao pular para uma ancora (barra 74px + padding 10px x2) */
.ic_ancora			{ scroll-margin-top: 100px; }

/* o design system define preto como #141d2d; dialogo_cores.css usa #212529 */
.ic_escuro_bg		{ background-color: #141d2d !important; }
.ic_escuro			{ color: #141d2d !important; }
.ic_branco_suave	{ color: rgba(255,255,255,.92) !important; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    RITMO VERTICAL DAS SECOES
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

.ic_secao			{ padding: 96px 0; }
.ic_secao_hero		{ padding: 96px 0 0; }
.ic_secao_cta		{ padding: 88px 0; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    TIPOGRAFIA DA PAGINA
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
Os tamanhos .p1-.p8 do tema sao fixos; aqui os titulos precisam ser fluidos (clamp).*/

.ic_h1			{ font-size: clamp(34px, 4.6vw, 64px) !important; line-height: 1.12 !important; font-weight: 800 !important; margin: 0 !important; }
.ic_h2			{ font-size: clamp(28px, 3.4vw, 42px) !important; line-height: 1.2  !important; font-weight: 700 !important; margin: 0 !important; }
.ic_h2_cta		{ font-size: clamp(28px, 3.4vw, 42px) !important; line-height: 1.15 !important; font-weight: 800 !important; margin: 0 !important; }
.ic_h2_pq		{ font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1.2  !important; font-weight: 700 !important; margin: 0 !important; }
.ic_h2_menor	{ font-size: clamp(26px, 3vw,   38px) !important; line-height: 1.2  !important; font-weight: 700 !important; margin: 0 !important; }

.ic_h1, .ic_h2, .ic_h2_cta, .ic_h2_pq, .ic_h2_menor { text-wrap: pretty; }

/* respiro sob o titulo quando existe texto de apoio (mockup: margin 0 0 16px).
   Precisa vir depois das regras de .ic_h2* — `margin:0!important` acima anularia
   um .mb-3 do Bootstrap, que tem a mesma especificidade e carrega antes. */
.ic_titulo_mb	{ margin-bottom: 16px !important; }

/* h3/h4 dos cards — margens do mockup embutidas na classe */
.ic_h3			{ font-size: 23px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 22px 0 10px !important; }
.ic_h3_menor	{ font-size: 21px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 16px 0 !important; }
.ic_h4			{ font-size: 19px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 4px 0 8px !important; }

.ic_lead		{ font-size: 19px !important; line-height: 1.65 !important; }
.ic_texto		{ font-size: 18px !important; line-height: 1.6  !important; }
.ic_texto_md	{ font-size: 17px !important; line-height: 1.6  !important; }
.ic_texto_sm	{ font-size: 16px !important; line-height: 1.6  !important; }
.ic_texto_xs	{ font-size: 15px !important; line-height: 1.6  !important; }
.ic_texto_xxs	{ font-size: 13px !important; line-height: 1.6  !important; }

/* olho / eyebrow: rotulo caixa-alta acima dos titulos */
.ic_olho		{ font-size: 13px !important; font-weight: 900 !important; letter-spacing: .14em !important;
				  margin: 0 0 14px !important; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    SUBNAV DE ANCORAS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

.ic_subnav					{ border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 0; }
.ic_subnav_barra			{ height: 74px; }
.ic_logo_menu				{ height: 36px; width: auto; }
.ic_subnav nav				{ gap: 34px; scrollbar-width: none; }
.ic_subnav nav::-webkit-scrollbar { display: none; }
.ic_subnav nav a			{ font-size: 15px !important; font-weight: 700 !important; transition: color 250ms ease; }
.ic_subnav nav a:hover		{ color: #ff8200 !important; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    BOTOES
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
Nao reutilizam .btn do tema de proposito: .btn impoe height:37px, font-weight:500, Raleway e
.btn-lg impoe width:100% — tudo incompativel com os CTAs do mockup (Lato 700, 17px, lado a lado).
O !important em color vence o `a{color:#151515!important}` do bootstrap.css do tema.*/

.ic_btn					{ display: inline-flex; align-items: center; gap: 10px;
						  font-size: 17px !important; font-weight: 700 !important;
						  padding: 15px 30px; border: none; border-radius: 6px;
						  transition: all 250ms ease; cursor: pointer; }

/* laranja chapado (mockup) — nao o degrade de .btn-primary */
.ic_btn_laranja			{ background: #ff8200; color: #fff !important; }
.ic_btn_laranja:hover	{ background: #e15500; color: #fff !important; }

/* vazado sobre fundo escuro */
.ic_btn_vazado			{ background: transparent; color: #fff !important;
						  padding: 13px 28px; border: 2px solid rgba(255,255,255,.32); }
.ic_btn_vazado:hover	{ border-color: #ff8200; color: #ff8200 !important; }

/* vazado sobre o degrade laranja do CTA final */
.ic_btn_vazado_cta			{ padding: 13px 26px; border-color: rgba(255,255,255,.7); }
.ic_btn_vazado_cta:hover	{ background: rgba(255,255,255,.14); color: #fff !important;
							  border-color: rgba(255,255,255,.7); }

/* branco sobre o degrade laranja do CTA final */
.ic_btn_branco			{ background: #fff; color: #e15500 !important; padding: 15px 28px; }
.ic_btn_branco:hover	{ background: #141d2d; color: #fff !important; }

/* CTA compacto da subnav */
.ic_btn_sm				{ font-size: 15px !important; padding: 11px 22px; border-radius: 5px; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    HERO E FUNDOS ESCUROS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

/* etiqueta translucida do hero */
.ic_etiqueta			{ background: rgba(255,130,0,.16); padding: 8px 18px; }

.ic_hero_h1				{ margin-top: 26px !important; }
.ic_hero_lead			{ margin-top: 26px !important; max-width: 820px; }
.ic_hero_ctas			{ margin-top: 36px; gap: 14px; }

/* brilhos decorativos (radial) dos blocos escuros */
.ic_brilho				{ position: absolute; border-radius: 9999px; pointer-events: none; }
.ic_brilho_dir			{ top: -160px; right: -140px; width: 620px; height: 620px;
						  background: radial-gradient(circle, rgba(255,130,0,.34) 0%, rgba(255,130,0,0) 68%); }
.ic_brilho_esq			{ left: -180px; bottom: -220px; width: 560px; height: 560px;
						  background: radial-gradient(circle, rgba(255,130,0,.26) 0%, rgba(255,130,0,0) 70%); }

/* faixa degrade de 6px no rodape do hero (usa .laranja_degrade3 do tema) */
.ic_faixa				{ height: 6px; }

/* numeros do hero */
.ic_stats				{ margin-top: 72px; padding-bottom: 64px; }
.ic_stats > div			{ padding-top: 18px; padding-bottom: 18px; }
.ic_stat				{ border-left: 3px solid rgba(255,255,255,.16); padding-left: 20px; }
.ic_stat_destaque		{ border-left-color: #ff8200; }
.ic_stat_num			{ font-family: 'Raleway', sans-serif !important;
						  font-size: 69px !important; font-weight: 800 !important; line-height: 1 !important; }
.ic_stat_label			{ margin-top: 8px !important; }

/* blocos "por que escolher" */
.ic_motivos				{ gap: 18px; }
.ic_motivo				{ background: rgba(255,255,255,.05); border-left: 3px solid #ff8200;
						  padding: 22px 24px; gap: 16px; }
.ic_motivo i			{ font-size: 19px; line-height: 1.4; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    GRIDS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

.ic_grid				{ margin-top: 44px; }
.ic_grid_etapas			{ margin-top: 52px; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    CARDS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

/* etapas — borda superior laranja + sombra forte no hover
   (o Bootstrap 5.0.2 nao tem utilitario de espessura de borda) */
.ic_card_etapa			{ padding: 32px 28px; border-top: 3px solid #ff8200 !important;
						  transition: box-shadow 250ms ease; }
.ic_card_etapa:hover	{ box-shadow: 0 8px 30px rgba(20,29,45,.15); }

/* entregas — sombra leve no hover */
.ic_card_entrega		{ padding: 28px; gap: 16px; transition: box-shadow 250ms ease; }
.ic_card_entrega:hover	{ box-shadow: 0 4px 12px rgba(20,29,45,.12); }

/* temas — sem hover no mockup */
.ic_card_tema			{ padding: 30px 28px; }

/* selo numerado das etapas */
.ic_num					{ font-family: 'Raleway', sans-serif !important;
						  width: 38px; height: 38px; font-size: 15px; font-weight: 900; }

/* icone circular das entregas */
.ic_ico					{ width: 34px; height: 34px; font-size: 17px; flex: 0 0 auto; }

/* icone solto dos cards de tema */
.ic_ico_grande			{ font-size: 26px; line-height: 1; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    LISTAS DE TEMAS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
bootstrap.css do tema aplica ul{padding-left:70px!important}, ul li{list-style:disc}
e li{font-weight:500!important} — o mockup usa 400.*/

.ic_lista				{ padding-left: 0 !important; margin-bottom: 0 !important; gap: 10px; }
.ic_lista li			{ list-style: none !important; gap: 10px;
						  font-size: 15px !important; line-height: 1.5 !important; font-weight: 400 !important; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    ABAS DE TEMAS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
nav-pills do Bootstrap com a paleta Dialogo Social.
bootstrap.css do tema forca ul{padding-left:70px!important} e ul li{list-style:disc}.*/

.ic_pills					{ padding-left: 0 !important; margin-top: 34px; gap: 10px; }
.ic_pills li				{ list-style: none !important; }
.ic_pills .nav-link			{ font-size: 16px !important; font-weight: 700; padding: 13px 26px;
							  border-radius: 50px; background: #fff; color: #141d2d !important;
							  border: 2px solid #e5e5e5; transition: all 250ms ease; }
.ic_pills .nav-link:hover	{ border-color: #ff8200; }
.ic_pills .nav-link.active	{ background: #ff8200; color: #fff !important; border-color: #ff8200; }

.ic_abas					{ margin-top: 28px; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    GALERIA DE TURMAS (slider)
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
object-fit so ganhou utilitario no Bootstrap 5.3.*/

.ic_foto				{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* indicador ativo na cor da marca (padrao do Bootstrap e' branco) */
.ic_slider .carousel-indicators .active		{ background-color: #ff8200; opacity: 1; }

/* veu suave atras das setas — garante contraste sobre foto clara */
.ic_slider .carousel-control-prev	{ background: linear-gradient(90deg,  rgba(20,29,45,.35), transparent); }
.ic_slider .carousel-control-next	{ background: linear-gradient(270deg, rgba(20,29,45,.35), transparent); }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    LOGOS (PROVA SOCIAL)
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
Preto&branco por padrao, revela a versao colorida no hover.*/

.ic_logo						{ height: 236px; }
.ic_logo img					{ position: absolute; top: 0; left: 0;
								  width: 100%; height: 100%; padding: 14px; object-fit: contain; }
.ic_logo .ic_logo_pb			{ transition: opacity 250ms ease; }
.ic_logo:hover .ic_logo_pb		{ opacity: 0; }

/* no mobile a grade vira carrossel de 3 em 3 (.d-md-none no markup).
   Os indicadores saem de cima dos cartoes e vao para baixo; .carousel-dark
   do Bootstrap ja' deixa os tracinhos escuros, legiveis sobre o fundo branco. */
.ic_logos_slider .carousel-indicators	{ position: static; margin: 16px 0 0; }

@media (max-width: 767.98px) {
	.ic_logo		{ height: 120px; }
	.ic_logo img	{ padding: 8px; }
}


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    CTA FINAL
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

.ic_cta_lead			{ max-width: 640px; }
.ic_cta_ctas			{ gap: 12px; }
.ic_cta_contato			{ margin-top: 20px !important; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    RODAPE
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

.ic_rodape			{ padding: 30px 0; }
.ic_rodape_col		{ padding-top: 10px; padding-bottom: 10px; }
.ic_logo_rodape		{ height: 40px; width: auto; }
.ic_rodape_frase	{ margin-top: 12px !important; }
.ic_rodape_linha	{ height: 1px; background: rgba(255,255,255,.1); margin: 32px 0 20px; }


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    BOTAO FLUTUANTE WHATSAPP
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝*/

/* verde oficial do WhatsApp; icone 50% maior que os 27px do mockup (27 x 1.5 = 40.5).
   o !important no font-size e' obrigatorio: bootstrap.css do tema aplica o shorthand
   `font: 16px sans-serif !important` em todo <a>, e sem ele o icone fica em 16px. */
.ic_fab			{ right: 24px; bottom: 24px; width: 58px; height: 58px; font-size: 40.5px !important; z-index: 1030;
				  background-color: #25d366; color: #fff !important;
				  box-shadow: 0 8px 30px rgba(20,29,45,.35); transition: background-color 250ms ease; }
.ic_fab:hover	{ background-color: #1da851; color: #fff !important; }