/* ============================================================
   OUTIS — página Sobre  [outis_sobre]
   Usa os tokens --o-* do outis-base (.outis-v2).
   ============================================================ */

.outis-v2.osb { background: var(--o-fundo); overflow: visible; overflow-x: clip; }
.osb h1, .osb h2, .osb h3, .osb p, .osb ul { margin: 0; }
.osb ul { padding: 0; list-style: none; }
.osb.outis-v2 a { text-decoration: none; }

/* ---------- topo navy ---------- */
.osb-topo {
	position: relative; overflow: hidden; background: var(--o-navy-900); color: #fff;
	padding: clamp(52px, 7vw, 96px) 0 clamp(110px, 11vw, 150px);
}
.osb-topo::after {
	content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%;
	background: radial-gradient(closest-side, rgba(127,194,237,.17), transparent 70%); pointer-events: none;
}
.osb .osb-topo-in {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.osb .osb-h1 { font: 700 clamp(32px, 4.4vw, 54px)/1.08 var(--o-f); letter-spacing: -.03em; color: #fff; }
.osb .osb-lede { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--o-texto-cl); max-width: 600px; }
.osb-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.osb-topo-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--o-r); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.osb .osb-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.osb-mosaico li {
	display: grid; gap: 14px; align-content: end; aspect-ratio: 1 / .82; padding: 22px;
	border-radius: var(--o-r); background: rgba(255,255,255,.05); border: 1px solid var(--o-linha-esc);
	font: 600 15px/1.3 var(--o-f); color: #fff;
}
.osb-mosaico li:nth-child(2) { background: var(--o-laranja); border-color: var(--o-laranja); }
.osb-mosaico li:nth-child(3) { background: rgba(255,255,255,.1); }
.osb-mosaico .o-ico { width: 34px; height: 34px; color: var(--o-laranja-lt); }
.osb-mosaico li:nth-child(2) .o-ico { color: #fff; }

/* ---------- missão e visão (sobem para a faixa navy) ---------- */
.osb .osb-mv {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
	margin-top: clamp(-80px, -7vw, -60px);
}
.osb-mv-cartao {
	padding: 30px 32px; background: #fff; border: 1px solid var(--o-linha);
	border-radius: var(--o-r); box-shadow: var(--o-sombra-h);
}
.osb-mv-ico {
	width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
	background: var(--o-laranja-bg); color: var(--o-laranja);
}
.osb-mv-ico .o-ico { width: 22px; height: 22px; }
.osb .osb-mv-cartao h2 { font: 700 22px/1.2 var(--o-f); letter-spacing: -.02em; color: var(--o-texto); margin-bottom: 10px; }
.osb-mv-cartao p { font-size: 15px; line-height: 1.7; color: var(--o-texto-2); }

/* ---------- áreas ---------- */
.osb-areas { padding: clamp(64px, 8vw, 104px) 0; }
.osb-cab { max-width: 640px; margin-bottom: 36px; }
.osb .osb-areas-grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.osb-area {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--o-linha); border-radius: var(--o-r); box-shadow: var(--o-sombra);
	transition: box-shadow .25s, transform .25s;
}
.osb-area:hover { box-shadow: var(--o-sombra-h); transform: translateY(-3px); }
.osb-area-foto { aspect-ratio: 16 / 7; overflow: hidden; background: var(--o-fundo-2); }
.osb-area-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osb-area-corpo { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 28px 30px 30px; }
.osb-area-cab { display: flex; align-items: center; gap: 14px; }
.osb-area-ico {
	flex: 0 0 48px; height: 48px; border-radius: var(--o-r-s); display: grid; place-items: center;
	background: var(--o-navy-900); color: var(--o-laranja-lt);
}
.osb-area-ico .o-ico { width: 24px; height: 24px; }
.osb .osb-area h3 { font: 700 20px/1.25 var(--o-f); letter-spacing: -.015em; color: var(--o-texto); }
.osb-area-corpo > p { font-size: 14.5px; line-height: 1.7; color: var(--o-texto-2); }
.osb .osb-lista { display: grid; gap: 8px; padding-top: 4px; }
.osb-lista li { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.45 var(--o-f); color: var(--o-texto); }
.osb-lista .o-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--o-laranja); stroke-width: 2.4; }
.osb-area .o-link { margin-top: auto; padding-top: 8px; }

/* ---------- como trabalhamos ---------- */
.osb-valores { background: var(--o-navy-900); padding: clamp(60px, 7vw, 92px) 0; }
.osb .osb-h2-cl { color: #fff; margin-bottom: 36px; }
.osb .osb-valores-grelha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.osb-valores-grelha li {
	display: grid; gap: 10px; align-content: start; padding: 24px;
	border-radius: var(--o-r); background: rgba(255,255,255,.04); border: 1px solid var(--o-linha-esc);
}
.osb-valor-ico { color: var(--o-laranja-lt); }
.osb-valor-ico .o-ico { width: 28px; height: 28px; }
.osb-valores-grelha strong { font: 700 16.5px/1.3 var(--o-f); color: #fff; }
.osb-valores-grelha p { font-size: 14px; line-height: 1.6; color: var(--o-texto-dim); }

/* ---------- chamada final ---------- */
.osb .osb-cta { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 96px); }
.osb-cta-caixa {
	display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap;
	padding: clamp(28px, 4vw, 48px); border-radius: var(--o-r);
	background: #fff; border: 1px solid var(--o-linha); box-shadow: var(--o-sombra);
	border-left: 4px solid var(--o-laranja);
}
.osb .osb-cta-caixa h2 { font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--o-f); letter-spacing: -.02em; color: var(--o-texto); }
.osb-cta-caixa p { margin-top: 8px; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--o-texto-2); }
.osb-cta-caixa .osb-btns { margin-top: 0; }
.osb .osb-btn-esc { background: transparent; color: var(--o-texto); border-color: var(--o-linha); }
.osb .osb-btn-esc:hover { border-color: var(--o-navy-900); color: var(--o-navy-900); }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
	.osb .osb-valores-grelha { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.osb .osb-topo-in { grid-template-columns: 1fr; }
	.osb .osb-areas-grelha { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.osb .osb-mv { grid-template-columns: 1fr; gap: 16px; }
	.osb-mv-cartao { padding: 24px 20px; }
	.osb-area-corpo { padding: 22px 20px 24px; }
	.osb .osb-valores-grelha { grid-template-columns: 1fr; }
	.osb .osb-mosaico { gap: 10px; }
	.osb-mosaico li { padding: 16px; font-size: 13.5px; }
	.osb-mosaico .o-ico { width: 28px; height: 28px; }
}