/* ==========================================================================
   SECAO "SEU NEGOCIO CRESCE, QUANTHAS SUSTENTA"
   Tres colunas: titulo, simbolo animado e texto de apoio.
   ========================================================================== */

.secao-negocio {
	/* Ritmo da flutuacao. Fica numa variavel so para que o simbolo e a
	   sombra nunca saiam de sincronia. */
	--flutuacao-duracao: 4s;
	--flutuacao-atraso: 0.4s;

	background-color: var(--cor-fundo);
	padding-block: clamp(3.5rem, 8vw, 7.5rem);
}

.secao-negocio__container {
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	padding-inline: calc(var(--respiro-lateral) + clamp(0.5rem, 2vw, 2rem));
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.35fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   Titulo
   -------------------------------------------------------------------------- */

.secao-negocio__titulo {
	color: var(--cor-preto);
	font-size: var(--titulo-secao);
	font-weight: var(--peso-bold);
	line-height: var(--titulo-secao-altura);
	letter-spacing: var(--titulo-secao-tracking);
	text-wrap: balance;
}

/* Segunda metade do titulo, em verde */
.secao-negocio__destaque {
	display: block;
	color: var(--cor-verde);
}

/* --------------------------------------------------------------------------
   Simbolo animado
   Flutuacao vertical sutil, feita em CSS em vez de GIF: nao pesa nada, fica
   nitido em qualquer resolucao e desliga sozinho em prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.secao-negocio__figura {
	position: relative;
	margin: 0;
	/* Espaco para a sombra, que fica fora dos limites da imagem */
	margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
	justify-self: center;
}

/* Sombra projetada no chao.
   Fica no pseudo-elemento em vez de embutida na imagem para poder reagir ao
   movimento: quando o simbolo sobe, ela encolhe e clareia — que e como uma
   sombra real se comporta quando o objeto se afasta do chao. */
.secao-negocio__figura::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -26%;
	width: 84%;
	height: 14%;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.11) 30%,
		rgba(0, 0, 0, 0.05) 50%,
		rgba(0, 0, 0, 0.02) 68%,
		transparent 82%
	);
	/* O blur dissolve a borda que o gradiente sozinho ainda deixa perceptivel */
	filter: blur(6px);
	transform: translateX(-50%);
	animation: sombra-simbolo var(--flutuacao-duracao) ease-in-out var(--flutuacao-atraso) infinite;
	pointer-events: none;
}

@keyframes sombra-simbolo {
	0%,
	100% {
		transform: translateX(-50%) scale(1);
		opacity: 1;
	}

	50% {
		transform: translateX(-50%) scale(0.88);
		opacity: 0.6;
	}
}

.secao-negocio__imagem {
	width: 100%;
	max-width: 24rem;
	height: auto;
	/* O atraso evita que a flutuacao comece junto com o fade de entrada */
	animation: flutuar-simbolo var(--flutuacao-duracao) ease-in-out var(--flutuacao-atraso) infinite;
	/* Avisa o navegador para promover a camada e usar a GPU */
	will-change: transform;
}

@keyframes flutuar-simbolo {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-0.75rem);
	}
}

/* --------------------------------------------------------------------------
   Texto de apoio
   -------------------------------------------------------------------------- */

.secao-negocio__texto {
	color: var(--cor-texto);
	font-size: clamp(0.875rem, 0.35vw + 0.75rem, 1rem);
	line-height: 1.65;
}

.secao-negocio__texto p + p {
	margin-top: 1.25em;
}

.secao-negocio__texto strong {
	font-weight: var(--peso-semibold);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
	.secao-negocio__container {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 3rem);
	}

	/* O simbolo passa a ocupar a linha toda, abaixo do titulo e do texto */
	.secao-negocio__figura {
		grid-row: 2;
		grid-column: 1 / -1;
		order: 3;
	}
}

/* No celular a secao vira uma coluna so, com tudo centralizado */
@media (max-width: 720px) {
	.secao-negocio__container {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	.secao-negocio__titulo {
		max-width: 100%;
	}

	.secao-negocio__figura {
		grid-column: auto;
		grid-row: auto;
		order: 0;
		justify-self: center;
	}

	.secao-negocio__imagem {
		max-width: 15rem;
	}

	/* Texto justificado em coluna estreita abre buracos entre as palavras */
	.secao-negocio__texto {
		text-align: center;
		max-width: 22rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.secao-negocio__imagem,
	.secao-negocio__figura::after {
		animation: none;
	}
}