/* Quem somos (Figma: Sobre 339:987 / Sessão quem somos, 510:4117 —
   container de 1280px: linha de texto 630+20+630; foto 630×400 à
   esquerda; grade 2×2 de números à direita, células de 315×200 coladas,
   só o canto externo de cada uma arredondado, 30px). */

.quem-somos { padding: 56px 0; }
@media (min-width: 1024px) {
  .quem-somos { padding: 0; }
}

.quem-somos-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .quem-somos-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 44px; }
}

/* O eyebrow começa 22px abaixo do topo do texto de apoio (842 vs 820 no
   Figma) — o bloco da esquerda não é centralizado na altura do texto. */
@media (min-width: 1024px) {
  .quem-somos-heading { padding-top: 22px; }
}
.quem-somos h2 { text-wrap: wrap; }
.quem-somos-intro .lead { margin: 0; max-width: none; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) {
  .quem-somos-intro .lead { font-size: 18px; }
}

.quem-somos-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .quem-somos-panel { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
}

.quem-somos-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 630 / 400;
}
@media (min-width: 768px) {
  .quem-somos-photo { border-radius: 30px; }
}
.quem-somos-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Etiqueta com nome (Figma 506:3993): caixa de 190×86 a 19px da borda
   direita e 20px da base, vidro fosco branco 80%. */
.quem-somos-nametag {
  position: absolute;
  right: 19px;
  bottom: 20px;
  width: 190px;
  padding: 19px 0 18px 34px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 16px;
}
.quem-somos-nametag p { margin: 0; white-space: nowrap; }
.quem-somos-nametag-name { font-size: 18px; font-weight: 500; line-height: 27px; color: var(--color-navy); }
.quem-somos-nametag-role { font-size: 14px; font-weight: 300; line-height: 21px; color: var(--color-gray-04); }
@media (max-width: 767px) {
  .quem-somos-nametag { right: 12px; bottom: 12px; width: 150px; padding: 12px 0 12px 20px; border-radius: 12px; }
  .quem-somos-nametag-name { font-size: 15px; line-height: 22px; }
  .quem-somos-nametag-role { font-size: 12px; line-height: 18px; }
}

.quem-somos-paragraph {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-gray-04);
  max-width: 630px;
  margin: 24px 0 0;
}
@media (min-width: 768px) {
  .quem-somos-paragraph { font-size: 18px; }
}
@media (min-width: 1024px) {
  .quem-somos-paragraph { margin-top: 44px; }
}

/* Grade de números: bordas como no Figma (a célula laranja tem borda da
   própria cor; as outras três só desenham o lado que a vizinha não
   desenha). */
.quem-somos-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.quem-somos-stat {
  box-sizing: border-box;
  min-height: 200px;
  padding: 28px 20px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border-blue);
}
.quem-somos-stat:nth-child(1) { border-top-left-radius: 20px; }
.quem-somos-stat:nth-child(2) { border-top-right-radius: 20px; border-left: 0; }
.quem-somos-stat:nth-child(3) { border-bottom-left-radius: 20px; border-top: 0; }
.quem-somos-stat:nth-child(4) { border-bottom-right-radius: 20px; border-top: 0; border-left: 0; }
@media (min-width: 768px) {
  /* 44px do canto externo da célula até o ícone; a borda de 1px conta
     nesses 44 (por isso 43px de padding onde há borda). */
  .quem-somos-stat { padding: 43px 0 0 43px; }
  .quem-somos-stat:nth-child(n+3) { padding-top: 44px; }
  .quem-somos-stat:nth-child(1) { border-top-left-radius: 30px; }
  .quem-somos-stat:nth-child(2) { border-top-right-radius: 30px; }
  .quem-somos-stat:nth-child(3) { border-bottom-left-radius: 30px; }
  .quem-somos-stat:nth-child(4) { border-bottom-right-radius: 30px; }
}
.quem-somos-stat--featured { background: #EC4208; border-color: #EC4208; }

/* Ícone: círculo branco de 33,58px (aro de 0,37px) com miolo laranja de
   20,93px e o ícone de 12px por dentro. */
.quem-somos-stat-icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.58px;
  height: 33.58px;
  border-radius: 50%;
  background: var(--color-white);
  border: 0.372px solid var(--color-border-blue);
  margin-bottom: 6.4px;
}
.quem-somos-stat--featured .quem-somos-stat-icon { border-color: #F15A22; }
.quem-somos-stat-icon-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.93px;
  height: 20.93px;
  border-radius: 50%;
  background: var(--color-orange);
}
.quem-somos-stat-icon-fill img { width: 12px; height: 12px; }

.quem-somos-stat-value { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.32px; color: var(--color-orange); }
.quem-somos-stat--featured .quem-somos-stat-value { color: var(--color-white); }
.quem-somos-stat-label { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); }
.quem-somos-stat--featured .quem-somos-stat-label { color: var(--color-white); }
@media (min-width: 768px) {
  /* Uma linha por <span>, como as quebras exatas do Figma. */
  .quem-somos-stat-label span { display: block; white-space: nowrap; }
  .quem-somos-stat-value { margin-top: 0; }
}
@media (max-width: 767px) {
  .quem-somos-stat-value { font-size: 26px; }
  .quem-somos-stat-label span { display: inline; }
  .quem-somos-stat-label span + span::before { content: ' '; }
}

/* Entrada animada ao rolar (fade + slide-up; as células de números
   entram em cascata e a foto "assenta" com um leve zoom). */
.quem-somos-heading,
.quem-somos-intro .lead,
.quem-somos-photo,
.quem-somos-paragraph,
.quem-somos-stat {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.quem-somos-intro .lead { transition-delay: 0.1s; }
.quem-somos-paragraph { transition-delay: 0.15s; }
.quem-somos-stat:nth-child(2) { transition-delay: 0.1s; }
.quem-somos-stat:nth-child(3) { transition-delay: 0.2s; }
.quem-somos-stat:nth-child(4) { transition-delay: 0.3s; }
.quem-somos-heading.is-visible,
.quem-somos-intro .lead.is-visible,
.quem-somos-photo.is-visible,
.quem-somos-paragraph.is-visible,
.quem-somos-stat.is-visible { opacity: 1; transform: none; }

.quem-somos-photo img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.quem-somos-photo.is-visible img { transform: none; }
.quem-somos-nametag { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease 0.6s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s; }
.quem-somos-photo.is-visible .quem-somos-nametag { opacity: 1; transform: none; }

html:not(.js) .quem-somos-heading,
html:not(.js) .quem-somos-intro .lead,
html:not(.js) .quem-somos-photo,
html:not(.js) .quem-somos-paragraph,
html:not(.js) .quem-somos-stat,
html:not(.js) .quem-somos-nametag { opacity: 1; transform: none; }
html:not(.js) .quem-somos-photo img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .quem-somos-heading, .quem-somos-intro .lead, .quem-somos-photo, .quem-somos-paragraph, .quem-somos-stat,
  .quem-somos-nametag, .quem-somos-photo img { opacity: 1; transform: none; transition: none; }
}