/* =======================================================================
   PÁGINA NOSSA ESSÊNCIA — missão, visão e valores
   ======================================================================= */
@font-face { font-family: 'Justus'; src: url('/assets/fonts/Justus-Roman.ttf') format('truetype'); font-style: normal; font-display: swap; }
@font-face { font-family: 'Justus SC'; src: url('/assets/fonts/Justus-Versalitas.ttf') format('truetype'); font-display: swap; }

.ess-hero .pp-hero__desc { margin-bottom: 0; }

/* Missão e visão */
.ess-mv { background: #F6F4EF; padding: 90px 20px 40px; }
.ess-mv__wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ess-card {
	background: #FCFDFD; border: 1px solid #E7E3DA; border-radius: 18px; overflow: hidden;
	display: flex; flex-direction: column;
}
.ess-card__foto { aspect-ratio: 16 / 9; overflow: hidden; background: #0E3B2D; }
.ess-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.ess-card:hover .ess-card__foto img { transform: scale(1.04); }
.ess-card__corpo { position: relative; padding: 46px 40px 36px; text-align: center; flex: 1; }
.ess-card__icone {
	position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
	width: 64px; height: 64px; border-radius: 50%; background: #0E3B2D; border: 2px solid #C8A96A;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(14,59,45,.22);
}
.ess-card__icone svg { width: 30px; height: 30px; fill: none; stroke: #D7BB7F; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ess-card__titulo {
	font-family: 'Justus SC', 'Marcellus', serif !important; font-weight: 400; color: #0E3B2D;
	font-size: clamp(34px, 3.6vw, 46px); letter-spacing: .04em; line-height: 1; margin: 0 0 14px;
}
.ess-card__titulo::after { content: ""; display: block; width: 46px; height: 1.5px; background: #C8A96A; margin: 16px auto 0; }
.ess-card__texto { font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.75; color: #4A524E; margin: 0 auto; max-width: 440px; }
.ess-card__texto strong { color: #0E3B2D; font-weight: 600; }

/* Faixa verde de baixo: fluxo (missão) e linha do tempo (visão) */
.ess-fluxo, .ess-tempo { list-style: none; margin: 0; background: #0E3B2D; padding: 26px 24px; display: grid; }
.ess-fluxo { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ess-fluxo li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ess-fluxo li + li::before {
	content: "→"; position: absolute; left: -10px; top: 9px; color: rgba(215,187,127,.6); font-size: 15px;
}
.ess-fluxo svg { width: 34px; height: 34px; fill: none; stroke: #D7BB7F; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ess-fluxo span, .ess-tempo span {
	font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FCFDFD; line-height: 1.4;
}
.ess-tempo { grid-template-columns: repeat(3, 1fr); position: relative; padding-top: 34px; }
.ess-tempo::before {
	content: ""; position: absolute; left: 12%; right: 6%; top: 40px; height: 1px;
	background: linear-gradient(90deg, rgba(215,187,127,.25), #D7BB7F);
}
.ess-tempo::after {
	content: ""; position: absolute; right: calc(6% - 2px); top: 36px; border: 4.5px solid transparent; border-left: 7px solid #D7BB7F;
}
.ess-tempo li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; }
.ess-tempo li::before {
	content: ""; position: absolute; top: 0; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #D7BB7F; background: #0E3B2D;
}
.ess-tempo li:last-child::before { background: #D7BB7F; }

/* Valores */
.ess-valores { background: #F6F4EF; padding: 70px 20px 40px; }
.ess-valores__wrap { max-width: 1180px; margin: 0 auto; }
.ess-valores__topo { text-align: center; margin-bottom: 46px; }
.ess-valores__titulo {
	font-family: 'Justus SC', 'Marcellus', serif !important; font-weight: 400; color: #0E3B2D;
	font-size: clamp(38px, 4.4vw, 56px); letter-spacing: .08em; margin: 0; line-height: 1;
	display: inline-flex; align-items: center; gap: 26px;
}
.ess-valores__titulo::before, .ess-valores__titulo::after { content: ""; width: clamp(40px, 12vw, 160px); height: 1px; background: #C8A96A; }
.ess-valores__sub {
	font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: #8A6A2E; margin: 16px 0 0;
}
.ess-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ess-valor { text-align: center; padding: 34px 34px 38px; border-left: 1px solid #E2D6BC; }
.ess-valor:nth-child(3n + 1) { border-left: 0; }
.ess-valor:nth-child(n + 4) { border-top: 1px solid #E2D6BC; }
.ess-valor__icone {
	width: 74px; height: 74px; border-radius: 50%; border: 1.5px solid #0E3B2D; margin: 0 auto 20px;
	display: flex; align-items: center; justify-content: center; transition: background .3s ease, border-color .3s ease;
}
.ess-valor__icone svg { width: 34px; height: 34px; fill: none; stroke: #0E3B2D; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.ess-valor:hover .ess-valor__icone { background: #0E3B2D; border-color: #C8A96A; }
.ess-valor:hover .ess-valor__icone svg { stroke: #D7BB7F; }
.ess-valor h3 {
	font-family: 'Justus SC', 'Marcellus', serif !important; font-weight: 400; color: #0E3B2D;
	font-size: 22px; letter-spacing: .04em; line-height: 1.15; margin: 0 0 12px;
}
.ess-valor p { font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.7; color: #5A615C; margin: 0 auto; max-width: 300px; }

/* Fecho: símbolo J.E se desenha -> frase se escreve -> traço -> botão */
.ess-legado { background: #F6F4EF; text-align: center; padding: 56px 20px 110px; display: flex; flex-direction: column; align-items: center; }
.ess-legado__simbolo { width: 46px; height: auto; margin-bottom: 26px; overflow: visible; }
.ess-legado__simbolo path { fill: #C8A96A; stroke: #C8A96A; stroke-width: .35; fill-rule: evenodd; }
.ess-legado__pre {
	font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #0E3B2D; margin: 0;
}
.ess-legado__frase {
	font-family: 'Ripon Script', 'Ephesis', cursive !important; font-size: clamp(54px, 7vw, 92px); line-height: 1.25; color: #B08D4E;
	margin: 4px 0 0; padding: 0 .2em;
}
.ess-legado__traco { display: block; width: min(340px, 70vw); height: 1.5px; margin: 6px 0 40px; background: linear-gradient(90deg, transparent, #C8A96A 20%, #C8A96A 80%, transparent); }
.ess-legado__btn:hover { background: #0E3B2D !important; color: #FCFDFD !important; }
.ess-legado__btn:focus-visible { outline: 2px solid #0E3B2D; outline-offset: 3px; }

/* ---- Movimento ao rolar (só quando o JS liga .ess-anima no <html>) ---- */
.ess-anima [data-ess-revelar] .ess-legado__simbolo path { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ess-anima [data-ess-revelar].is-on .ess-legado__simbolo path { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.05,.3,1), fill-opacity .8s ease 1.4s; }
.ess-anima [data-ess-revelar] .ess-legado__pre { opacity: 0; transform: translateY(8px); }
.ess-anima [data-ess-revelar].is-on .ess-legado__pre { opacity: 1; transform: none; transition: opacity .7s ease 1.7s, transform .7s ease 1.7s; }
.ess-anima [data-ess-revelar] .ess-legado__frase { clip-path: inset(0 100% 0 0); }
.ess-anima [data-ess-revelar].is-on .ess-legado__frase { clip-path: inset(0 -5% 0 0); transition: clip-path 2.2s cubic-bezier(.45,.05,.3,1) 2.1s; }
.ess-anima [data-ess-revelar] .ess-legado__traco { transform: scaleX(0); }
.ess-anima [data-ess-revelar].is-on .ess-legado__traco { transform: scaleX(1); transition: transform 1s ease 4.1s; }
.ess-anima [data-ess-revelar] .ess-legado__btn { opacity: 0; }
.ess-anima [data-ess-revelar].is-on .ess-legado__btn { opacity: 1; transition: opacity .8s ease 4.6s, background .3s ease, transform .25s ease; }

/* Missão: os passos acendem em sequência */
.ess-anima .ess-fluxo li { opacity: .28; transition: opacity .6s ease; }
.ess-anima .ess-fluxo.is-on li { opacity: 1; }
.ess-anima .ess-fluxo.is-on li:nth-child(2) { transition-delay: .45s; }
.ess-anima .ess-fluxo.is-on li:nth-child(3) { transition-delay: .9s; }
.ess-anima .ess-fluxo.is-on li:nth-child(4) { transition-delay: 1.35s; }

/* Visão: a linha do tempo se desenha até "Para sempre", que fica pulsando */
.ess-anima .ess-tempo::before { transform: scaleX(0); transform-origin: left; }
.ess-anima .ess-tempo::after { opacity: 0; }
.ess-anima .ess-tempo.is-on::before { transform: scaleX(1); transition: transform 1.6s cubic-bezier(.6,.05,.3,1); }
.ess-anima .ess-tempo.is-on::after { opacity: 1; transition: opacity .3s ease 1.5s; }
.ess-anima .ess-tempo li { opacity: .3; transition: opacity .5s ease; }
.ess-anima .ess-tempo.is-on li { opacity: 1; }
.ess-anima .ess-tempo.is-on li:nth-child(2) { transition-delay: .6s; }
.ess-anima .ess-tempo.is-on li:nth-child(3) { transition-delay: 1.2s; }
.ess-tempo.is-on li:last-child::before { animation: ess-pulso 2.4s ease-in-out 1.8s infinite; }
@keyframes ess-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(215,187,127,.55); } 50% { box-shadow: 0 0 0 7px rgba(215,187,127,0); } }

/* Valores: entram um a um */
.ess-anima .ess-grade .ess-valor { opacity: 0; transform: translateY(14px); }
.ess-anima .ess-grade.is-on .ess-valor { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(2) { transition-delay: .12s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(3) { transition-delay: .24s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(4) { transition-delay: .36s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(5) { transition-delay: .48s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(6) { transition-delay: .6s; }

/* Abertura: o título se escreve à mão */
.ess-anima .ess-hero .pp-hero__title { clip-path: inset(-10% 100% -10% 0); }
.ess-anima .ess-hero.is-on .pp-hero__title { clip-path: inset(-10% -5% -10% 0); transition: clip-path 1.9s cubic-bezier(.45,.05,.3,1) .25s; }
.ess-anima .ess-hero .pp-hero__desc, .ess-anima .ess-hero .pp-eyebrow { opacity: 0; transform: translateY(10px); }
.ess-anima .ess-hero.is-on .pp-eyebrow { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.ess-anima .ess-hero.is-on .pp-hero__desc { opacity: 1; transform: none; transition: opacity .8s ease 1.6s, transform .8s ease 1.6s; }

/* Cartões: sobem, a foto aproxima devagar e o selo salta */
.ess-anima .ess-card[data-ess-revelar] { opacity: 0; transform: translateY(36px); }
.ess-anima .ess-card.is-on { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1); }
.ess-anima .ess-mv__wrap .ess-card.is-on + .ess-card.is-on { transition-delay: .18s; }
.ess-anima .ess-card[data-ess-revelar] .ess-card__foto img { transform: scale(1.14); }
.ess-anima .ess-card.is-on .ess-card__foto img { transform: scale(1); transition: transform 3.2s cubic-bezier(.22,1,.36,1); }
.ess-anima .ess-card.is-on:hover .ess-card__foto img { transform: scale(1.04); transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.ess-anima .ess-card[data-ess-revelar] .ess-card__icone { transform: translateX(-50%) scale(.4); opacity: 0; }
.ess-anima .ess-card.is-on .ess-card__icone { transform: translateX(-50%) scale(1); opacity: 1; transition: transform .7s cubic-bezier(.34,1.56,.64,1) .55s, opacity .3s ease .55s; }

/* Ícones se desenham a traço */
.ess-anima [data-ess-revelar] .ess-valor__icone svg *, .ess-anima .ess-fluxo svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ess-anima .ess-grade.is-on .ess-valor__icone svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.6,.05,.3,1) .35s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(2) .ess-valor__icone svg * { transition-delay: .47s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(3) .ess-valor__icone svg * { transition-delay: .59s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(4) .ess-valor__icone svg * { transition-delay: .71s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(5) .ess-valor__icone svg * { transition-delay: .83s; }
.ess-anima .ess-grade.is-on .ess-valor:nth-child(6) .ess-valor__icone svg * { transition-delay: .95s; }
.ess-anima .ess-fluxo.is-on svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease; }
.ess-anima .ess-fluxo.is-on li:nth-child(2) svg * { transition-delay: .45s; }
.ess-anima .ess-fluxo.is-on li:nth-child(3) svg * { transition-delay: .9s; }
.ess-anima .ess-fluxo.is-on li:nth-child(4) svg * { transition-delay: 1.35s; }

@media (max-width: 1024px) {
	.ess-mv__wrap { grid-template-columns: 1fr; max-width: 680px; }
	.ess-grade { grid-template-columns: 1fr 1fr; }
	.ess-valor, .ess-valor:nth-child(n) { border-left: 0; border-top: 1px solid #E2D6BC; }
	.ess-valor:nth-child(2n) { border-left: 1px solid #E2D6BC; }
	.ess-valor:nth-child(-n + 2) { border-top: 0; }
}
@media (max-width: 640px) {
	.ess-mv { padding: 60px 16px 24px; }
	.ess-card__corpo { padding: 44px 22px 28px; }
	.ess-card__texto { font-size: 15px; }
	.ess-fluxo { grid-template-columns: 1fr 1fr; row-gap: 22px; padding: 24px 12px; }
	.ess-fluxo li:nth-child(3)::before { display: none; }
	.ess-fluxo span, .ess-tempo span { font-size: 10px; letter-spacing: .1em; }
	.ess-valores { padding: 54px 16px 24px; }
	.ess-valores__titulo { gap: 14px; }
	.ess-grade { grid-template-columns: 1fr; }
	.ess-valor, .ess-valor:nth-child(n) { border-left: 0; border-top: 1px solid #E2D6BC; padding: 30px 8px; }
	.ess-valor:first-child { border-top: 0; }
	.ess-legado { padding: 40px 16px 80px; }
	.ess-legado__simbolo { width: 38px; }
	.ess-legado__pre { font-size: 12px; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) {
	.ess-card__foto img { transition: none; }
	.ess-tempo.is-on li:last-child::before { animation: none; }
}