/* ==========================================================================
   SOBRE — apresentação do Enem Social, o que está incluso e prova social
   ========================================================================== */

.sobre {
  width: 100%;
  padding: 60px 0;
}

.sobre .conteudo {
  display: flex;
  align-items: center;
  gap: 54px;
  max-width: 1080px;
  margin: 0 auto;
}

/* Ilustração animada (mesmo estilo dos pilares de Recursos) */
.sobre .imagem {
  --tom: var(--cor-roxo-claro);
  position: relative;
  width: 320px;
  min-width: 320px;
  height: 320px;
  overflow: hidden;
}

.sobre .imagem .visual {
  position: absolute;
  inset: 0;
}

.sobre .imagem .halo {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tom) 32%, transparent) 0, transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sobre .imagem .orbita {
  position: absolute;
  top: 44%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed hsla(0, 0%, 100%, .14);
  translate: -50% -50%;
  animation: girar-orbita 40s linear infinite;
}

.sobre .imagem .orbita.o1 {
  width: 150px;
  height: 150px;
}

.sobre .imagem .orbita.o2 {
  width: 236px;
  height: 236px;
  border-color: color-mix(in srgb, var(--tom) 22%, transparent);
  animation-duration: 60s;
  animation-direction: reverse;
}

.sobre .imagem .orbe {
  --tom: var(--cor-roxo);
  position: absolute;
  top: 44%;
  left: 50%;
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  border-radius: 26px;
  animation: flutuar 4.5s ease-in-out infinite;
}

.sobre .imagem .chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #0a0614cc;
  border: 1px solid var(--bolha-borda-forte);
  font-size: var(--f0);
  color: var(--cor-branco-fixo);
  white-space: nowrap;
  animation: flutuar 4s ease-in-out infinite;
}

.sobre .imagem .chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-chip);
  box-shadow: 0 0 10px var(--cor-chip);
}

.sobre .imagem .chip.c1 { top: 34px; left: 22px; --cor-chip: #ff6b9d; animation-delay: -.8s; }
.sobre .imagem .chip.c2 { top: 64px; right: 18px; --cor-chip: var(--cor-azul-claro); animation-delay: -2s; }
.sobre .imagem .chip.c3 { top: 182px; left: 16px; --cor-chip: var(--cor-verde); animation-delay: -1.4s; }
.sobre .imagem .chip.c4 { top: 204px; right: 22px; --cor-chip: var(--cor-laranja); animation-delay: -2.8s; }

@keyframes girar-orbita {
  to { transform: rotate(360deg); }
}

.sobre .imagem .selo {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 2;
}

.sobre .imagem .selo i {
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cor-verde);
  animation: pulsa-selo 1.6s ease-in-out infinite;
}

/* Texto */
.sobre .texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sobre .texto .selo {
  margin: 0 0 20px;
}

.sobre .texto h2 {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--cor-texto);
}

.sobre .texto p {
  margin: 0 0 12px;
  font-size: var(--f3);
  line-height: 1.6;
  color: var(--cor-cinza);
}

.sobre .texto p strong {
  color: var(--cor-texto);
}

.sobre .texto .incluso {
  margin: 14px 0 12px;
  font-size: var(--f1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.sobre .texto .marcadores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sobre .texto .marcadores li {
  padding: 8px 14px;
}

.sobre .texto .marcadores li .icone {
  color: var(--cor-roxo-claro);
}

.sobre .texto .marcadores li span {
  font-size: var(--f2);
  color: var(--cor-texto);
}

/* Prova social */
.sobre .impacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 54px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--bolha-borda);
  text-align: center;
}

.sobre .impacto .numeros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.sobre .impacto .numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 200px;
  padding: 20px 26px;
}

.sobre .impacto .numero strong {
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 20%, var(--cor-roxo-claro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sobre .impacto .numero span {
  font-size: var(--f2);
  color: var(--cor-cinza);
}

.sobre .impacto .rotulo {
  max-width: 520px;
  font-size: var(--f2);
  line-height: 1.5;
  color: var(--cor-cinza);
  text-wrap: balance;
}

.sobre .impacto .logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 50px;
  width: 100%;
}

.sobre .impacto .logos img {
  display: block;
  width: auto;
  height: 30px;
  opacity: .6;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease;
}

.sobre .impacto .logos li:hover img {
  opacity: 1;
  filter: grayscale(0);
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 1000px) {
  .sobre {
    padding: 45px 0;
  }

  .sobre .conteudo {
    flex-direction: column;
    gap: 26px;
  }

  .sobre .imagem {
    width: 240px;
    min-width: 240px;
    height: 240px;
  }

  .sobre .imagem .visual {
    transform: scale(.75);
    transform-origin: 0 0;
    width: 320px;
    height: 320px;
  }

  .sobre .imagem .selo {
    bottom: 14px;
    left: 14px;
  }

  .sobre .texto h2 {
    font-size: var(--f10);
  }

  .sobre .texto p {
    font-size: var(--f2);
  }

  .sobre .impacto {
    margin: 36px 0 0;
    padding: 26px 0 0;
  }

  .sobre .impacto .numeros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
  }

  .sobre .impacto .numero {
    min-width: 0;
    padding: 16px 12px;
  }

  .sobre .impacto .numero strong {
    font-size: var(--f10);
  }

  .sobre .impacto .numero span {
    font-size: var(--f1);
  }

  .sobre .impacto .logos {
    gap: 18px 28px;
  }

  .sobre .impacto .logos img {
    height: 24px;
  }
}