/*
 * Pagina /sobre/. Referencia: layout "Pagina Sobre a Zafarie" aprovado em
 * 24/09/2026. Base: interna.css (.zf-interna) e servicos-hub.css.
 *
 * Movimento: so transform/opacity. Estados iniciais so com html.zf-mo e
 * sem html.zf-mo-falhou.
 */

.zf-sb {
	--sb-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--sb-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zf-sb-cabeca { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.zf-sb-cabeca__titulo { display: flex; flex-direction: column; gap: 0.875rem; }
.zf-sb-cabeca--centro { align-items: center; text-align: center; }
.zf-sb-cabeca--centro .zf-sb-cabeca__titulo { align-items: center; }
@media (min-width: 900px) {
	.zf-sb-cabeca--linha { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
	.zf-sb-cabeca--linha .zf-int-lead { max-width: 28rem; }
}

/* =====================================================================
 * Topo
 * ================================================================== */

.zf-sb-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2rem, 1rem + 3vw, 3.5rem) var(--i-gutter) clamp(3rem, 2rem + 4vw, 6rem);
}
.zf-sb-hero__luz {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(1000px 560px at 78% -60px, rgba(97, 9, 215, 0.4), rgba(10, 10, 11, 0) 70%);
}
.zf-sb-hero__luz::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(154, 84, 248, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 84, 248, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 55% 60% at 75% 40%, #000 15%, transparent 75%);
	mask-image: radial-gradient(ellipse 55% 60% at 75% 40%, #000 15%, transparent 75%);
}
.zf-sb-hero__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .zf-sb-hero__grade { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 5vw, 4.5rem); } }
.zf-sb-hero__texto { display: flex; flex-direction: column; gap: 1.375rem; }
.zf-sb-hero .zafarie-breadcrumbs { font-size: 0.8125rem; color: var(--i-texto); }
.zf-sb-hero .zafarie-breadcrumbs ol { justify-content: flex-start; }
.zf-sb-hero .zafarie-breadcrumbs a { color: var(--i-texto); }
.zf-sb-hero .zafarie-breadcrumbs a:hover { color: var(--i-branco); }
.zf-sb-hero .zf-int-h1 { font-size: clamp(2.125rem, 1.2rem + 3.4vw, 3.375rem); }
.zf-sb-hero .zf-int-hero__resumo { max-width: 36rem; }
.zf-sb-hero .zf-cta,
.zf-sb-hero .zf-cta__botoes { justify-content: flex-start; align-items: flex-start; margin-inline: 0; text-align: left; }

/* Cartao com os fatos da empresa. */
.zf-sb-cartao {
	position: relative;
	isolation: isolate;
	padding: clamp(1.25rem, 1rem + 1vw, 1.875rem);
	border-radius: 24px;
	box-shadow: 0 0 80px rgba(122, 30, 246, 0.2);
}
.zf-sb-cartao__borda { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; background: #3b1d6e; }
.zf-sb-cartao__borda::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 180%;
	aspect-ratio: 1;
	background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(154, 84, 248, 0.95) 300deg, rgba(236, 140, 255, 0.95) 320deg, transparent 340deg);
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}
.zf-sb-cartao__borda::after {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: 23px;
	background: radial-gradient(420px 320px at 80% 0%, rgba(122, 30, 246, 0.28), rgba(16, 15, 22, 0) 70%), #100f16;
}
.zf-sb-cartao__topo { display: flex; align-items: center; gap: 14px; margin-bottom: 1.25rem; }
.zf-sb-cartao__topo > div { display: flex; flex-direction: column; gap: 2px; }
.zf-sb-cartao__topo strong { font-size: 1.25rem; color: var(--i-branco); }
.zf-sb-cartao__topo span { font-size: 0.8125rem; color: var(--i-texto); }
.zf-sb-cartao dl { margin: 0; display: flex; flex-direction: column; }
.zf-sb-fato { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--i-borda); }
.zf-sb-fato__icone { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #6109d7; background: #120227; }
.zf-sb-fato dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #71717a; }
.zf-sb-fato dd { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--i-branco); }
@media (min-width: 560px) {
	.zf-sb-fato { grid-template-columns: 40px 130px minmax(0, 1fr); }
	.zf-sb-fato__icone { grid-row: auto; }
	.zf-sb-fato dd { font-size: 1rem; }
}

/* =====================================================================
 * Secoes
 * ================================================================== */

.zf-sb-manifesto { background: #0b0a10; border-block: 1px solid rgba(255, 255, 255, 0.05); }
.zf-sb-manifesto__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) { .zf-sb-manifesto__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; } }
.zf-sb-manifesto__frase { display: flex; flex-direction: column; gap: 1.125rem; }
.zf-sb-manifesto__frase h2 { font-size: clamp(1.875rem, 1.1rem + 3vw, 2.875rem); line-height: 1.12; letter-spacing: -0.035em; }
.zf-sb-manifesto__texto { display: flex; flex-direction: column; gap: 1.375rem; }
.zf-sb-manifesto__texto p { margin: 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.65; color: var(--i-texto-claro); }
.zf-sb-pilares { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.zf-sb-pilares li { padding: 8px 14px; border: 1px solid var(--i-borda-roxa); border-radius: 999px; background: #120f1c; font-size: 0.875rem; font-weight: 600; color: #e4e4e7; }

/* Historia */
.zf-sb-historia { background: radial-gradient(640px 400px at 0% 40%, rgba(97, 9, 215, 0.18), rgba(10, 10, 11, 0) 70%); }
.zf-sb-historia__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .zf-sb-historia__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; } .zf-sb-historia__lado { position: sticky; top: 8rem; } }
.zf-sb-historia__lado { display: flex; flex-direction: column; gap: 0.875rem; }
.zf-sb-anos { margin: 0; display: flex; align-items: baseline; gap: 0.2em; font-size: clamp(4.5rem, 2.5rem + 7vw, 8.25rem); line-height: 0.9; font-weight: 800; letter-spacing: -0.06em; color: var(--i-roxo); }
.zf-sb-anos [data-zf-sb-contador] { font-variant-numeric: tabular-nums; }
.zf-sb-historia__lado h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.125rem); }
.zf-sb-historia__texto { display: flex; flex-direction: column; gap: 1.75rem; }
.zf-sb-historia__intro { margin: 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.65; color: var(--i-texto-claro); }

.zf-sb-linha { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.zf-sb-linha::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 28px;
	bottom: 28px;
	width: 2px;
	background: linear-gradient(#7a1ef6, #c04df2, rgba(122, 30, 246, 0.25));
	transform-origin: center top;
}
.zf-sb-marco { position: relative; z-index: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; }
.zf-sb-marco__ano {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #120227;
	border: 1px solid #6109d7;
	font-size: 0.8125rem;
	font-weight: 800;
	color: #d9bffc;
}
.zf-sb-marco--atual .zf-sb-marco__ano { background: #7a1ef6; border-color: #7a1ef6; color: #ffffff; box-shadow: 0 0 28px rgba(122, 30, 246, 0.55); }
.zf-sb-marco__texto { display: flex; flex-direction: column; gap: 4px; }
.zf-sb-marco__texto strong { font-size: 1.0625rem; color: var(--i-branco); }
.zf-sb-marco__texto span { font-size: 0.9375rem; line-height: 1.55; color: var(--i-texto); }
@media (max-width: 599px) {
	.zf-sb-linha::before { left: 23px; top: 24px; bottom: 24px; }
	.zf-sb-marco { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
	.zf-sb-marco__ano { width: 48px; height: 48px; font-size: 0.75rem; }
}

/* Frentes */
.zf-sb-frentes { background: #0b0a10; border-block: 1px solid rgba(255, 255, 255, 0.05); }
.zf-sb-frentes__grade { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .zf-sb-frentes__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1100px) { .zf-sb-frentes__grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.zf-sb-frentes__grade > li { display: flex; }
.zf-sb-frente {
	width: 100%;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	background: #100f16;
	border: 1px solid var(--i-borda);
	border-radius: 20px;
	color: #e4e4e7;
	text-decoration: none;
	transition: border-color 0.25s ease, transform 0.45s var(--sb-ease), box-shadow 0.45s var(--sb-ease);
}
.zf-sb-frente:hover { border-color: #6109d7; transform: translate3d(0, -4px, 0); box-shadow: 0 18px 40px -18px rgba(122, 30, 246, 0.5); color: #e4e4e7; }
.zf-sb-frente:focus-visible { outline: 2px solid #d9bffc; outline-offset: 3px; }
.zf-sb-frente .zf-int-icone { width: 48px; height: 48px; transition: transform 0.5s var(--sb-mola); }
.zf-sb-frente:hover .zf-int-icone { transform: rotate(-6deg) scale(1.06); }
.zf-sb-frente strong { font-size: 1.125rem; color: var(--i-branco); }
.zf-sb-frente__desc { flex-grow: 1; font-size: 0.875rem; line-height: 1.55; color: #b4b4bd; }
.zf-sb-frente__mais { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--i-roxo-link); }
.zf-sb-frente__mais svg { transition: transform 0.35s var(--sb-ease); }
.zf-sb-frente:hover .zf-sb-frente__mais svg { transform: translate3d(3px, 0, 0); }

/* Metodo */
.zf-sb-metodo__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .zf-sb-metodo__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; } }
.zf-sb-metodo__texto { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.zf-sb-mais { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--i-roxo-link); text-decoration: none; }
.zf-sb-mais:hover { color: #d9bffc; }
.zf-sb-mais svg { transition: transform 0.35s var(--sb-ease); }
.zf-sb-mais:hover svg { transform: translate3d(3px, 0, 0); }
.zf-sb-metodo__lista { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.zf-sb-metodo__lista > li { position: relative; z-index: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
.zf-sb-metodo__lista .zf-int-icone { grid-row: span 3; width: 56px; height: 56px; box-shadow: inset 0 0 18px rgba(122, 30, 246, 0.25), 0 0 24px rgba(122, 30, 246, 0.3); }
.zf-sb-metodo__num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; color: #71717a; }
.zf-sb-metodo__lista strong { font-size: 1.0625rem; color: var(--i-branco); }
.zf-sb-metodo__desc { font-size: 0.875rem; line-height: 1.55; color: var(--i-texto); }
@media (min-width: 900px) {
	.zf-sb-metodo__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
	.zf-sb-metodo__lista > li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
	.zf-sb-metodo__lista::before {
		content: "";
		position: absolute;
		z-index: 0;
		left: 28px;
		right: 3rem;
		top: 27px;
		height: 2px;
		background: linear-gradient(90deg, #7a1ef6, #c04df2, rgba(122, 30, 246, 0.2));
		transform-origin: left center;
	}
}

/* Selos */
.zf-sb-selos { background: #0b0a10; border-block: 1px solid rgba(255, 255, 255, 0.05); }
.zf-sb-selos__grade { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .zf-sb-selos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1100px) { .zf-sb-selos__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zf-sb-selo {
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	background: radial-gradient(260px 160px at 0% 0%, rgba(122, 30, 246, 0.16), rgba(16, 15, 22, 0) 70%), #100f16;
	border: 1px solid var(--i-borda-roxa);
	border-radius: 20px;
	transition: border-color 0.25s ease, transform 0.45s var(--sb-ease);
}
.zf-sb-selo:hover { border-color: #7a1ef6; transform: translate3d(0, -3px, 0); }
.zf-sb-selo__tipo { padding: 6px 10px; border-radius: 999px; background: #2b045f; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #d9bffc; }
.zf-sb-selo strong { font-size: 1.25rem; line-height: 1.25; color: var(--i-branco); }
.zf-sb-selo__desc { font-size: 0.875rem; line-height: 1.55; color: #b4b4bd; }

/* =====================================================================
 * Movimento: entrada do topo
 * ================================================================== */

.zf-sb-palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.zf-sb-palavra > span { display: inline-block; }

html.zf-mo:not(.zf-mo-falhou):not(.zf-sb-js) .zf-sb-hero h1 { opacity: 0.01; }
html.zf-mo:not(.zf-mo-falhou):not(.zf-sb-js) .zf-sb-hero :is(.zafarie-breadcrumbs, .zf-int-rotulo, .zf-int-hero__resumo, .zf-cta, .zf-sb-cartao) { opacity: 0; }

html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero:not(.zf-sb-in) .zf-sb-palavra > span { transform: translate3d(0, 135%, 0) rotate(4deg); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero:not(.zf-sb-in) :is(.zafarie-breadcrumbs, .zf-int-rotulo, .zf-int-hero__resumo, .zf-cta) { opacity: 0; transform: translate3d(0, 18px, 0); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero:not(.zf-sb-in) .zf-sb-cartao { opacity: 0; transform: translate3d(0, 44px, 0) scale(0.96); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero:not(.zf-sb-in) .zf-sb-cartao__topo svg { opacity: 0; transform: rotate(-120deg) scale(0.3); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero:not(.zf-sb-in) .zf-sb-fato { opacity: 0; transform: translate3d(24px, 0, 0); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero:not(.zf-sb-in) .zf-sb-fato__icone { transform: scale(0.4); }

html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero .zf-sb-palavra > span { transition: transform 0.9s var(--sb-ease) calc(var(--w, 0) * 55ms + 120ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero :is(.zafarie-breadcrumbs, .zf-int-rotulo) { transition: opacity 0.7s ease, transform 0.8s var(--sb-ease); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero .zf-int-hero__resumo { transition: opacity 0.8s ease calc(var(--palavras, 8) * 55ms + 220ms), transform 0.9s var(--sb-ease) calc(var(--palavras, 8) * 55ms + 220ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero .zf-cta { transition: opacity 0.8s ease calc(var(--palavras, 8) * 55ms + 360ms), transform 0.9s var(--sb-mola) calc(var(--palavras, 8) * 55ms + 360ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero .zf-sb-cartao { transition: opacity 0.9s ease 0.2s, transform 1.2s var(--sb-ease) 0.2s; }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero .zf-sb-cartao__topo svg { transition: opacity 0.5s ease 0.5s, transform 1s var(--sb-mola) 0.5s; }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero .zf-sb-fato { transition: opacity 0.5s ease, transform 0.7s var(--sb-ease); transition-delay: calc(var(--f, 0) * 110ms + 650ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero .zf-sb-fato__icone { transition: transform 0.7s var(--sb-mola); transition-delay: calc(var(--f, 0) * 110ms + 720ms); }

/* A borda do cartao da uma volta de luz e some. */
html.zf-mo:not(.zf-mo-falhou) .zf-sb-hero.zf-sb-in .zf-sb-cartao__borda::before { animation: zf-sb-gira 2.6s cubic-bezier(0.45, 0, 0.25, 1) 1.3s both; }
@keyframes zf-sb-gira {
	0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0; }
}

/* =====================================================================
 * Movimento: ao rolar (motion.js marca os grupos)
 * ================================================================== */

/* Manifesto: as palavras acendem em sequencia quando a frase aparece. */
html.zf-mo:not(.zf-mo-falhou) .zf-sb-frase-js .zf-sb-fpal { opacity: 0.18; transition: opacity 0.6s ease calc(var(--w, 0) * 70ms + 150ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-frase-js.zf-sb-acesa .zf-sb-fpal { opacity: 1; }

/* Linha do tempo e metodo: a linha se desenha. */
html.zf-mo:not(.zf-mo-falhou) .zf-sb-linha[data-zf-mo-grupo]::before { transform: scaleY(0); transition: transform 1.6s var(--sb-ease) 0.2s; }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-linha.zf-mo-visivel::before { transform: none; }
@media (min-width: 900px) {
	html.zf-mo:not(.zf-mo-falhou) .zf-sb-metodo__lista[data-zf-mo-grupo]::before { transform: scaleX(0); transition: transform 1.4s var(--sb-ease) 0.2s; }
	html.zf-mo:not(.zf-mo-falhou) .zf-sb-metodo__lista.zf-mo-visivel::before { transform: none; }
}
html.zf-mo:not(.zf-mo-falhou) .zf-sb-marco[data-zf-mo] .zf-sb-marco__ano { transition: transform 0.8s var(--sb-mola); transition-delay: calc(var(--zf-atraso, 0ms) + 120ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-sb-marco[data-zf-mo]:not(.zf-mo-in) .zf-sb-marco__ano { transform: scale(0.4); }

@media (prefers-reduced-motion: reduce) {
	.zf-sb *, .zf-sb *::before, .zf-sb *::after { animation: none !important; transition-duration: 0.01ms !important; }
}