/* =========================================================
   Sobre a Sibium
   ========================================================= */

/* ---------- Topo + diagrama ---------- */
.so-hero { padding-top: 151px; padding-bottom: 63px; text-align: center; overflow-x: clip; }
.so-hero__title {
	position: relative; z-index: 1;
	max-width: 791px; margin: 0 auto;
	font-size: var(--sb-fs-lg); line-height: 1; letter-spacing: -.03em; font-weight: 400;
	background: linear-gradient(94.6deg, #089d24 14.2%, #1cff8d 91.4%);
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
	padding-bottom: .08em; margin-bottom: -.08em;
}
.so-hero__text { position: relative; z-index: 1; max-width: 704px; margin: 19px auto 0; font-size: 16px; line-height: 20px; color: #000; }
.so-hero__btn { position: relative; z-index: 2; margin-top: 72px; }
.so-hero__btn .sb-btn { min-width: 253px; color: #000; border-color: #000; }
.so-hero__btn .sb-btn:hover { color: #fff; background: #000; }

/* Diagrama: área de 704 x 198 (x=368 e y=397 no Figma); tudo posicionado a partir dela */
.so-eco { position: relative; width: 704px; height: 198px; margin: 57px auto 0; }
.so-eco__rings { position: absolute; left: 313px; top: 151px; width: 0; height: 0; pointer-events: none; }
.so-eco__ring { position: absolute; max-width: none; }
.so-eco__ring--13 { width: 396.69px; height: 396.69px; margin: -198.34px 0 0 -198.34px; transform: rotate(73.68deg); }
.so-eco__ring--12 { width: 289.62px; height: 289.62px; margin: -144.81px 0 0 -144.81px; transform: rotate(73.68deg); }
.so-eco__ring--11 { width: 214px; height: 214px; margin: -107px 0 0 -107px; transform: rotate(27.16deg); }
.so-eco__ring--10 { width: 157.94px; height: 157.94px; margin: -78.97px 0 0 -78.97px; transform: rotate(-92.25deg); }
.so-eco__ring--9 { width: 114px; height: 114px; margin: -57px 0 0 -57px; }
.so-eco__center { position: absolute; left: 215px; top: 143px; width: 189px; }
.so-eco__logo { width: 189px; height: 32px; object-fit: contain; }
.so-eco__boxes { position: absolute; inset: 0; }
.so-eco__item { position: absolute; width: 245px; }
.so-eco__item--1 { left: 0; top: 24px; }
.so-eco__item--2 { left: 289px; top: 0; }
.so-eco__item--3 { left: 459px; top: 114px; }
.so-eco__item--4 { left: -40px; top: 150px; }
.so-eco__box {
	display: flex; align-items: center; justify-content: center;
	height: 84px; padding: 12px 30px; border: 2px solid transparent; border-radius: 20px;
	background: var(--sb-text); color: #fff;
	transition: transform .4s var(--sb-ease), box-shadow .4s var(--sb-ease);
}
.so-eco__box:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .14); }
.so-eco__box-logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; }
.so-eco__item--3 .so-eco__box-logo { height: 32px; }
.so-eco__box-name { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }

/* ---------- Caixa verde: conexão + empresas ---------- */
.so-con__box { border-radius: 50px; background: linear-gradient(-68.67deg, #1cff8d 1.58%, #08a22b 96.75%); color: #fff; padding: 50px 39px 281px 45px; }
.so-con__top { display: flex; justify-content: space-between; gap: 40px; }
.so-con__copy { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0; }
.so-con__title { max-width: 560px; font-size: var(--sb-fs-lg); line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.so-con__text { max-width: 499px; margin-top: 40px; font-size: 16px; line-height: 20px; }
.so-con__text p + p { margin-top: 20px; }
.so-con__photo { width: 663px; flex: none; margin-top: 65px; aspect-ratio: 663 / 429; border-radius: 36px; overflow: hidden; }
.so-con__photo img { width: 100%; height: 100%; object-fit: cover; }
.so-emp__head { margin-top: 133px; text-align: center; }
.so-emp__title { max-width: 470px; margin: 0 auto; }
.so-emp__text { max-width: 556px; margin: 20px auto 0; font-size: 16px; line-height: 20px; }
.so-emp__text p + p { margin-top: 20px; }

/* Cartões das empresas (vêm do tipo Empresa) */
.so-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: -241px; }
.so-cards--4 { grid-template-columns: repeat(4, 1fr); }
.so-cards--1, .so-cards--2 { grid-template-columns: repeat(2, 1fr); }
.so-card__link { position: relative; display: flex; height: 400px; border-radius: 30px; overflow: hidden; color: #fff; isolation: isolate; background: #2b2b2b; }
.so-card__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.so-card__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.so-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sb-ease); }
.so-card__link:hover .so-card__img { transform: scale(1.05); }
/* Enquadramento das fotos de cada empresa igual ao Figma */
.so-card--sigma .so-card__img { object-position: 52% 50%; scale: 1.95; transform-origin: 50% 40%; }
.so-card--ambium .so-card__img { object-position: 50% 55%; scale: 1.484; transform-origin: 72.2% 50%; }
.so-card--dataview .so-card__img { object-position: 39% 50%; scale: 1.285; transform-origin: 50% 0; }
.so-card__body { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 20px 68px; text-align: center; }
.so-card__logo { height: 35px; width: auto; max-width: 100%; }
.so-card--sigma .so-card__logo { height: 36px; }
.so-card--ambium .so-card__logo, .so-card--dataview .so-card__logo { height: 34px; }
.so-card__name { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.so-card__res { margin-top: 28px; font-size: 16px; line-height: 18px; font-weight: 600; max-width: 240px; }
.so-card__btn { margin-top: 31px; width: 245px; max-width: 100%; color: #fff; background: var(--sb-green); }
.so-card__link:hover .so-card__btn { transform: translateY(-2px); }

/* ---------- Além dos dados ---------- */
.so-alem { padding-top: 77px; background: linear-gradient(to bottom, #fff calc(100% - 77px), var(--sb-light) calc(100% - 77px)); }
.so-alem__grid { display: grid; grid-template-columns: 1fr 726px; align-items: center; gap: 40px; }
.so-alem__copy { padding-bottom: 3px; }
.so-alem__title { max-width: 280px; }
.so-alem__text { max-width: 317px; margin-top: 20px; }
.so-alem__photo { aspect-ratio: 726 / 500; border-radius: 50px; overflow: hidden; }
.so-alem__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Fundo cinza: princípios + mercados ---------- */
.so-cinza { background: var(--sb-light); }
.so-pri { padding-top: 83px; }
.so-pri__grid { display: grid; grid-template-columns: 1fr 566px; gap: 40px; padding-right: calc(var(--sb-gutter) + 120px); }
.so-pri__copy { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 17px; }
.so-pri__title { color: var(--sb-green-esg); max-width: 333px; }
.so-pri__text { max-width: 449px; margin-top: 30px; }
.so-pri__list { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.so-pri__item {
	position: relative; display: flex; align-items: flex-end;
	height: 110px; padding: 20px 50px 19px 20px; border-radius: 25px; background: #fff;
	transition: box-shadow .3s, transform .3s var(--sb-ease);
}
.so-pri__item:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .06); }
/* Larguras irregulares do Figma (pares de linha) */
.so-pri__item:nth-child(6n+1) { width: 260px; }
.so-pri__item:nth-child(6n+2) { width: 221px; }
.so-pri__item:nth-child(6n+3) { width: 290px; }
.so-pri__item:nth-child(6n+4) { width: 266px; }
.so-pri__item:nth-child(6n+5) { width: 224px; }
.so-pri__item:nth-child(6n+6) { width: 270px; }
.so-pri__icon { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.so-pri__icon img { max-width: 24px; max-height: 24px; width: auto; height: auto; }
.so-pri__name { font-size: 18px; line-height: 20px; letter-spacing: -.03em; font-weight: 300; color: var(--sb-text); }

.so-mer { padding: 155px 0 120px; text-align: center; }
.so-mer__title { max-width: 700px; margin: 0 auto; color: var(--sb-text); }
.so-mer__text { max-width: 473px; margin: 10px auto 0; font-size: 16px; line-height: 20px; color: #000; }
.so-mer__setores { max-width: 1082px; margin: 42px auto 0; }
.so-mer .sb-setor, .so-mer .sb-setor__top { border-radius: 25px; }
.so-mer .sb-setor__name { font-size: 18px; line-height: 20px; letter-spacing: -.03em; font-weight: 300; color: #000; padding: 8px 12px 12px; }

/* ---------- Faixa final ---------- */
.sb-cta--sobre .sb-cta__title { max-width: 506px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1300px) {
	.so-con__photo { width: 50%; }
	.so-alem__grid { grid-template-columns: 1fr 1.6fr; }
	.so-pri__grid { padding-right: var(--sb-gutter); }
}
@media (max-width: 1100px) {
	.so-cards, .so-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.so-pri__grid { grid-template-columns: 1fr; row-gap: 40px; }
	.so-pri__text { margin-top: 20px; }
	.so-pri__list { display: grid; grid-template-columns: repeat(2, 1fr); }
	.so-pri__item:nth-child(n) { width: auto; }
}
@media (max-width: 900px) {
	.so-con__top { flex-direction: column; }
	.so-con__photo { width: 100%; margin-top: 0; order: 2; }
	.so-con__text { margin-top: 24px; }
	.so-alem__grid { grid-template-columns: 1fr; }
	.so-alem__title, .so-alem__text { max-width: 520px; }
}
@media (max-width: 768px) {
	.so-hero { padding-top: 120px; padding-bottom: 56px; }
	.so-hero__title br { display: none; }
	/* Diagrama vira logo central + quadros em grade */
	.so-eco { width: 100%; max-width: 420px; height: auto; margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
	.so-eco__rings { left: 50%; top: 40px; transform: scale(.7); }
	.so-eco__center { position: relative; left: auto; top: auto; width: 160px; height: 80px; display: flex; align-items: center; }
	.so-eco__logo { width: 160px; height: 28px; }
	.so-eco__boxes { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; margin-top: 16px; }
	.so-eco__item, .so-eco__item--1, .so-eco__item--2, .so-eco__item--3, .so-eco__item--4 { position: relative; left: auto; top: auto; width: auto; }
	.so-eco__box { height: 64px; padding: 10px 14px; border-radius: 16px; }
	.so-eco__box-logo, .so-eco__item--3 .so-eco__box-logo { height: 22px; }
	.so-eco__item:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
	.so-hero__btn { margin-top: 40px; }

	.so-con__box { border-radius: 30px; padding: 40px 20px 200px; }
	.so-emp__head { margin-top: 64px; }
	.so-cards, .so-cards--4 { grid-template-columns: 1fr; margin-top: -160px; padding: 0 0; gap: 12px; }
	.so-card__link { height: 360px; }
	.so-card__img, .so-card--sigma .so-card__img, .so-card--ambium .so-card__img, .so-card--dataview .so-card__img { scale: 1.15; transform-origin: 50% 50%; }

	.so-alem { padding-top: 64px; background: linear-gradient(to bottom, #fff calc(100% - 60px), var(--sb-light) calc(100% - 60px)); }
	.so-alem__photo { border-radius: 30px; }
	.so-pri { padding-top: 64px; }
	.so-pri__list { grid-template-columns: 1fr 1fr; gap: 8px; }
	.so-pri__item { height: 104px; padding: 16px 16px 16px 16px; border-radius: 20px; }
	.so-pri__icon { top: 16px; right: 16px; }
	.so-pri__name { font-size: 16px; }
	.so-mer { padding: 80px 0 72px; }
	.so-mer__title br { display: none; }
}
@media (max-width: 420px) {
	.so-pri__list { grid-template-columns: 1fr; }
	.so-pri__item { height: 88px; }
}