/* =========================================================
   Página aberta de uma Solução
   Medidas do Figma "Serviço empresa aberto" (1440 x 3620).
   ========================================================= */
.sl-page { background: var(--sb-light); padding-top: 100px; }

/* ---------- Topo ---------- */
.sl-hero .sb-wrap { padding-left: 51px; padding-right: 51px; }
.sl-hero__photo { height: 480px; border-radius: 30px; overflow: hidden; background: #e9e9e9; margin-bottom: 34px; }
.sl-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.sl-hero__title { max-width: 672px; font-size: clamp(34px, 3.82vw, 55px); line-height: 1; letter-spacing: -.03em; font-weight: 500; color: #000; }
.sl-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 17px; }
.sl-hero__text { max-width: 473px; font-size: 16px; line-height: 20px; color: var(--sb-gray); }
.sl-hero:last-child { padding-bottom: 140px; }
.sl-hero__btn { flex: none; margin: 0 -1px 4px auto; }
.sl-hero .sb-btn--verde { background: #00c825; }

/* ---------- Destaques ---------- */
.sl-dest { padding-top: 136px; }
.sl-dest__title { text-align: center; color: var(--sb-green); }
.sl-dest__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 1210px; margin: 30px auto 0; }
.sl-dest__card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 191px; padding: 29px 28px 25px 29px; border: 1px solid var(--sb-green-esg); border-radius: 25px; }
.sl-dest__icon { width: 41px; height: 41px; border-radius: 50%; background: var(--sb-green); display: flex; align-items: center; justify-content: center; }
.sl-dest__icon img { width: 23px; height: 23px; object-fit: contain; }
.sl-dest__text { max-width: 232px; font-size: 20px; line-height: 22px; letter-spacing: -.03em; font-weight: 500; color: var(--sb-green-esg); }

/* ---------- Números ---------- */
.sl-num { padding-top: 125px; }
.sl-num__title { text-align: center; color: var(--sb-text); }
.sl-num__list { display: grid; grid-template-columns: 219px 260px 229px 261px 167px; justify-content: center; margin-top: 42px; }
.sl-num__item { display: flex; flex-direction: column; color: var(--sb-text); }
.sl-num__value { font-size: var(--sb-fs-lg); line-height: 1; letter-spacing: -.03em; font-weight: 300; white-space: nowrap; }
.sl-num__label { max-width: 136px; margin: -2px 0 0 39px; font-size: 16px; line-height: 20px; }
.sl-num__item:nth-child(1) .sl-num__label { max-width: 129px; }
.sl-num__item:nth-child(2) .sl-num__label { max-width: 97px; }
.sl-num__item:nth-child(3) .sl-num__label { max-width: 106px; }
.sl-num__item:nth-child(4) .sl-num__label { max-width: 104px; }

/* ---------- Perguntas frequentes ---------- */
.sl-faq { padding-top: 163px; padding-bottom: 163px; }
.sl-faq__inner { max-width: 800px; margin: 0 auto; }
.sl-faq__title { color: var(--sb-text); }
.sl-faq__list { display: grid; gap: 10px; margin-top: 13px; }
.sl-faq__item { border: 1px solid var(--sb-border); border-radius: 25px; transition: border-color .3s; }
.sl-faq__item:hover { border-color: #c4c4c4; }
.sl-faq__q button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 29px 38px 26px 29px; border: 0; background: none; text-align: left; cursor: pointer; font-size: var(--sb-fs-sm); line-height: 25px; letter-spacing: -.03em; font-weight: 500; color: var(--sb-text); }
.sl-faq__icon { position: relative; flex: none; width: 24px; height: 24px; }
.sl-faq__icon svg { position: absolute; inset: 0; width: 24px; height: 24px; transition: opacity .3s, transform .4s var(--sb-ease); }
.sl-faq__icon svg + svg { opacity: 0; transform: rotate(-90deg); }
.sl-faq__item.is-open .sl-faq__icon svg:first-child { opacity: 0; transform: rotate(90deg); }
.sl-faq__item.is-open .sl-faq__icon svg + svg { opacity: 1; transform: none; }
.sl-faq__item.is-open .sl-faq__q button { padding-bottom: 10px; }
.sl-faq__panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--sb-ease); }
.sl-faq__a { max-width: 760px; padding: 0 38px 23px 29px; font-size: 16px; line-height: 20px; color: var(--sb-text); }
.sl-faq__a p + p { margin-top: 20px; }
.sb-js .sl-faq__item:not(.is-open) .sl-faq__panel { max-height: 0; }
html:not(.sb-js) .sl-faq__panel { max-height: none; }

/* ---------- Chamada final ---------- */
.sl-cta .sb-cta__inner { align-items: flex-end; padding-bottom: 64px; }
.sl-cta .sb-cta__title { max-width: 680px; }
.sl-cta .sb-cta__side { padding-bottom: 13px; }
.sl-cta .sb-cta__bg { background-position: 70% 30%; }

/* ---------- Responsivo ---------- */
@media (max-width: 1300px) {
	.sl-num__list { grid-template-columns: repeat(5, auto); justify-content: space-between; column-gap: 24px; }
}
@media (max-width: 1024px) {
	.sl-hero .sb-wrap { padding-left: var(--sb-gutter); padding-right: var(--sb-gutter); }
	.sl-hero__photo { height: auto; aspect-ratio: 1338 / 480; }
	.sl-dest { padding-top: 96px; }
	.sl-dest__grid { grid-template-columns: repeat(2, 1fr); }
	.sl-num { padding-top: 96px; }
	.sl-num__list { grid-template-columns: repeat(3, auto); justify-content: center; column-gap: 56px; row-gap: 36px; }
	.sl-faq { padding-top: 96px; padding-bottom: 96px; }
}
@media (max-width: 768px) {
	.sl-cta .sb-cta__inner { align-items: stretch; }
	.sl-cta .sb-cta__side { padding-bottom: 0; }
	.sl-page { padding-top: 84px; }
	.sl-hero:last-child { padding-bottom: 72px; }
	.sl-hero__photo { aspect-ratio: 4 / 3; border-radius: 24px; margin-bottom: 28px; }
	.sl-hero__title br { display: none; }
	.sl-hero__row { flex-direction: column; align-items: flex-start; gap: 24px; }
	.sl-hero__btn { margin: 0; }
	.sl-dest { padding-top: 72px; }
	.sl-dest__grid { grid-template-columns: 1fr; margin-top: 24px; }
	.sl-dest__card { min-height: 0; gap: 24px; padding: 24px 22px 22px; }
	.sl-num { padding-top: 72px; }
	.sl-num__list { grid-template-columns: repeat(2, 1fr); justify-content: stretch; column-gap: 16px; row-gap: 28px; margin-top: 32px; }
	.sl-num__label, .sl-num__item:nth-child(n) .sl-num__label { margin-left: 4px; margin-top: 4px; max-width: 150px; }
	.sl-faq { padding-top: 72px; padding-bottom: 72px; }
	.sl-faq__q button { padding: 22px 20px 20px 22px; font-size: 19px; line-height: 23px; gap: 16px; }
	.sl-faq__item.is-open .sl-faq__q button { padding-bottom: 8px; }
	.sl-faq__a { padding: 0 20px 20px 22px; }
	.sl-faq__item { border-radius: 20px; }
}