/* Home — seção de abertura (hero). Identidade visual Mentorar v1.0 (2026).
   As variáveis --mentorar-* vêm do style.css do tema filho. */

.mtr-hero {
	--hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	/* Fica dentro do #Header, depois da barra do menu (que flutua): precisa
	   ocupar a largura toda numa linha própria, como o slider fazia. */
	clear: both;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 56px 0 72px;
	font-family: Montserrat, Arial, sans-serif;
	color: var(--mentorar-texto);
}

.mtr-hero__container {
	/* 1060 - 2x20 de respiro = 1020px: mesma borda esquerda do logo do cabeçalho */
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

/* ---- Texto ---- */
.mtr-hero .mtr-hero__sobretitulo {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mentorar-azul);
}

.mtr-hero .mtr-hero__titulo {
	margin: 0 0 20px;
	font-family: Poppins, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 3.2vw, 46px);
	line-height: 1.14;
	letter-spacing: -.015em;
	color: var(--mentorar-profundo);
}
/* No computador, as 3 linhas do mockup; no celular, quebra livre */
@media (min-width: 960px) {
	.mtr-hero .mtr-hero__titulo span { display: block; white-space: nowrap; }
}

.mtr-hero .mtr-hero__subtitulo {
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--mentorar-texto);
}

.mtr-hero__caminhos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 520px;
}

.mtr-hero a.mtr-hero__caminho {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	border-radius: 14px;
	color: #fff;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.mtr-hero a.mtr-hero__caminho--empresas { background: var(--mentorar-profundo); }
.mtr-hero a.mtr-hero__caminho--voce     { background: var(--mentorar-coral); }

.mtr-hero a.mtr-hero__caminho:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(2, 26, 75, .55);
	color: #fff;
}
.mtr-hero a.mtr-hero__caminho:focus-visible {
	outline: 3px solid var(--mentorar-luz);
	outline-offset: 3px;
}

.mtr-hero__caminho-titulo {
	font-family: Poppins, Arial, sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
}
.mtr-hero__caminho-texto {
	font-size: 13px;
	line-height: 1.45;
	opacity: .88;
}
/* Chamada de ação no pé do cartão, com a seta logo depois do texto */
.mtr-hero__caminho-acao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	font-weight: 600;
	font-size: 14px;
}
.mtr-hero__seta {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform .15s ease;
}
.mtr-hero a.mtr-hero__caminho:hover .mtr-hero__seta {
	transform: translateX(3px);
}

/* ---- Composição visual ---- */
.mtr-hero__visual {
	position: relative;
	min-height: 545px;
}

/* Hexágonos: a forma do símbolo da marca, no lugar das bolhas genéricas */
.mtr-hero__hex {
	position: absolute;
	clip-path: var(--hex);
}
.mtr-hero__hex--claro {
	width: 380px;
	height: 438px;
	top: -24px;
	left: 36%;
	background: #E3EEFA;
}
.mtr-hero__hex--coral {
	width: 170px;
	height: 196px;
	top: 150px;
	left: -3%;
	background: var(--mentorar-coral);
	opacity: .9;
}

/* Foto recortada: as pessoas "saem" do hexágono claro */
.mtr-hero__foto {
	position: absolute;
	top: 70px; /* abre espaço acima para a nota */
	left: 2%;
	/* até 510px, mas nunca passando da borda da tela em larguras menores */
	width: min(510px, calc(100% + 16px));
	display: block;
	/* a foto original termina reta nas laterais (blazer e ombro) e embaixo
	   (mãos): esmaece essas bordas. As duas máscaras se somam (intersect). */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 10%, #000 91%, transparent 100%),
		linear-gradient(to bottom, #000 72%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0, #000 10%, #000 91%, transparent 100%),
		linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-composite: intersect;
}
.mtr-hero__foto picture,
.mtr-hero__foto img {
	display: block;
	width: 100%;
	height: auto;
}
.mtr-hero__foto--marca {
	width: 300px;
	height: 346px;
	top: 18px;
	left: 30%;
	align-items: flex-start;
	padding-top: 62px;
	box-sizing: border-box;
	clip-path: var(--hex);
	background: var(--mentorar-gradiente);
}
.mtr-hero__foto--marca .mtr-hero__simbolo {
	width: 118px;
	height: auto;
}

/* Nota manuscrita: ancorada pela ESQUERDA, como a foto (left: 2%), para ficar
   sempre sobre o espaço livre acima da cabeça do homem, em qualquer largura. */
.mtr-hero .mtr-hero__nota {
	position: absolute;
	top: -40px;
	left: calc(2% + 250px);
	width: 250px;
	margin: 0;
	font-family: Caveat, cursive;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.15;
	color: var(--mentorar-profundo);
	transform: rotate(-3deg);
	z-index: 1;
}
.mtr-hero__nota svg {
	display: block;
	width: 44px;
	height: 30px;
	margin: 4px 0 0 150px;
	color: var(--mentorar-profundo);
}

@media (prefers-reduced-motion: reduce) {
	.mtr-hero a.mtr-hero__caminho,
	.mtr-hero__seta { transition: none; }
}

/* ---- Tablet e celular ---- */
@media (max-width: 959px) {
	.mtr-hero { padding: 36px 0 48px; }
	.mtr-hero__container { grid-template-columns: 1fr; gap: 28px; }
	.mtr-hero__visual { min-height: 545px; max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 560px) {
	.mtr-hero__caminhos { grid-template-columns: 1fr; }
	.mtr-hero .mtr-hero__nota,
	.mtr-hero__hex--coral { display: none; }
	.mtr-hero__visual { min-height: 0; }
	.mtr-hero__hex--claro { display: none; }
	.mtr-hero__foto--marca { display: none; }
	.mtr-hero__foto { position: relative; top: 0; left: 0; width: 100%; max-width: 420px; margin: 0 auto; }
}

/* ---- Elementos decorativos (aparecem na entrada e depois flutuam) ---- */
.mtr-hero__brilho {
	position: absolute;
	width: 560px;
	height: 560px;
	top: -70px;
	left: 18%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(9, 144, 237, .16) 0%, rgba(9, 144, 237, .06) 40%, rgba(9, 144, 237, 0) 68%);
	pointer-events: none;
}
.mtr-hero__deco {
	position: absolute;
	display: block;
	height: auto;
	pointer-events: none;
}
.mtr-hero__deco--linha {
	width: 42px;
	top: 70px;
	left: 3%;
	color: var(--mentorar-luz);
	opacity: .55;
}
.mtr-hero__deco--cheio {
	width: 24px;
	top: 392px;
	left: -1%;
	color: var(--mentorar-azul);
	opacity: .75;
}
/* reflexo de luz que passa uma vez sobre os cartões */
.mtr-hero a.mtr-hero__caminho { overflow: hidden; }
.mtr-hero a.mtr-hero__caminho::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .26) 50%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}

@media (max-width: 560px) {
	.mtr-hero__brilho,
	.mtr-hero__deco { display: none; }
}

/* ---- Entrada: os elementos surgem em tempos diferentes ----
   "mtr-hero-anim" (no <html>) é posta por um script antes da seção e só
   existe durante a entrada; "mtr-hero--ativo" dispara as transições quando
   a foto e as fontes estão prontas (script no fim do hero-home.php). */
.mtr-hero-anim .mtr-hero .mtr-hero__brilho,
.mtr-hero-anim .mtr-hero .mtr-hero__hex,
.mtr-hero-anim .mtr-hero .mtr-hero__deco,
.mtr-hero-anim .mtr-hero .mtr-hero__sobretitulo,
.mtr-hero-anim .mtr-hero .mtr-hero__titulo span,
.mtr-hero-anim .mtr-hero .mtr-hero__subtitulo,
.mtr-hero-anim .mtr-hero .mtr-hero__caminho,
.mtr-hero-anim .mtr-hero .mtr-hero__foto {
	transition:
		opacity 1s cubic-bezier(.22, .61, .36, 1) var(--d, 0s),
		transform 1.2s cubic-bezier(.16, 1, .3, 1) var(--d, 0s),
		filter 1s cubic-bezier(.22, .61, .36, 1) var(--d, 0s),
		letter-spacing 1.2s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.mtr-hero-anim .mtr-hero .mtr-hero__nota {
	transition: opacity .4s ease var(--d, 0s), clip-path 1.5s cubic-bezier(.45, .05, .35, 1) var(--d, 0s);
}
.mtr-hero-anim .mtr-hero .mtr-hero__nota path {
	transition: stroke-dashoffset .7s ease-out 3s;
}

/* tempo de cada elemento */
.mtr-hero .mtr-hero__brilho                  { --d: 0s; }
.mtr-hero .mtr-hero__hex--claro              { --d: .1s; }
.mtr-hero .mtr-hero__sobretitulo             { --d: .25s; }
.mtr-hero .mtr-hero__titulo span:nth-child(1) { --d: .4s; }
.mtr-hero .mtr-hero__titulo span:nth-child(2) { --d: .58s; }
.mtr-hero .mtr-hero__titulo span:nth-child(3) { --d: .76s; }
.mtr-hero .mtr-hero__foto                    { --d: .55s; }
.mtr-hero .mtr-hero__hex--coral              { --d: .95s; }
.mtr-hero .mtr-hero__subtitulo               { --d: 1.05s; }
.mtr-hero .mtr-hero__caminho--empresas       { --d: 1.3s; }
.mtr-hero .mtr-hero__caminho--voce           { --d: 1.45s; }
.mtr-hero .mtr-hero__deco--linha             { --d: 1.6s; }
.mtr-hero .mtr-hero__deco--cheio             { --d: 1.8s; }
.mtr-hero .mtr-hero__nota                    { --d: 1.9s; }

/* estado inicial (antes do disparo) */
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__brilho {
	opacity: 0;
	transform: scale(.5);
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__hex--claro {
	opacity: 0;
	transform: scale(.55) rotate(-14deg);
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__hex--coral {
	opacity: 0;
	transform: translate3d(-30px, 20px, 0) scale(.4) rotate(-40deg);
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__deco {
	opacity: 0;
	transform: scale(.2) rotate(-90deg);
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__sobretitulo {
	opacity: 0;
	letter-spacing: .4em;
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__titulo span {
	opacity: 0;
	filter: blur(12px);
	transform: translate3d(0, .5em, 0);
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__subtitulo {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__caminho {
	opacity: 0;
	transform: translate3d(0, 28px, 0) scale(.96);
}
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__foto {
	opacity: 0;
	transform: translate3d(0, 50px, 0) scale(.97);
}
/* a nota é "escrita" da esquerda para a direita; a seta se desenha no fim */
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__nota {
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}
.mtr-hero .mtr-hero__nota path { stroke-dasharray: 100; }
.mtr-hero-anim .mtr-hero:not(.mtr-hero--ativo) .mtr-hero__nota path { stroke-dashoffset: 100; }

/* ---- Depois da entrada: movimento contínuo, bem lento ---- */
.mtr-hero--ativo .mtr-hero__caminho::after {
	animation: mtr-hero-reflexo 1.2s ease-in-out both;
}
.mtr-hero--ativo .mtr-hero__caminho--empresas::after { animation-delay: 2.3s; }
.mtr-hero--ativo .mtr-hero__caminho--voce::after     { animation-delay: 2.5s; }

.mtr-hero--ativo .mtr-hero__hex--claro  { animation: mtr-hero-flutua 9s ease-in-out 1.6s infinite; }
.mtr-hero--ativo .mtr-hero__hex--coral  { animation: mtr-hero-flutua 7s ease-in-out 2.2s infinite reverse; }
.mtr-hero--ativo .mtr-hero__deco--linha { animation: mtr-hero-gira 14s ease-in-out 2.8s infinite; }
.mtr-hero--ativo .mtr-hero__deco--cheio { animation: mtr-hero-flutua 6s ease-in-out 3s infinite; }
.mtr-hero--ativo .mtr-hero__brilho      { animation: mtr-hero-pulsa 7s ease-in-out 1.2s infinite; }

@keyframes mtr-hero-reflexo {
	from { transform: translateX(-120%); }
	to   { transform: translateX(120%); }
}
@keyframes mtr-hero-flutua {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -12px, 0); }
}
@keyframes mtr-hero-gira {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(6px, -10px, 0) rotate(30deg); }
}
@keyframes mtr-hero-pulsa {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.08); opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
	.mtr-hero--ativo .mtr-hero__caminho::after,
	.mtr-hero--ativo .mtr-hero__hex,
	.mtr-hero--ativo .mtr-hero__deco,
	.mtr-hero--ativo .mtr-hero__brilho { animation: none; }
}