/* ========================================
   GEOSITE TELECOM - About Page Styles
   ======================================== */

/* --- Shared Badge --- */
.about-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--light-purple);
  color: var(--primary-darker);
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 24px;
  line-height: 1.5;
}

/* --- Symbol Background (spans hero + pilares) --- */
main {
  position: relative;
  overflow-x: clip;
}

/* ========================================
   ABOUT HERO
   ======================================== */
.about-hero {
  position: relative;
  padding: 140px var(--content-padding) 80px;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
}

.about-symbol-bg {
  position: absolute;
  top: 340px;
  left: -18px;
  width: 632px;
  height: 803px;
  pointer-events: none;
  z-index: 0;
}

.about-symbol-bg__img {
  width: 100%;
  height: 100%;
}

.about-hero__container {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.about-hero__content {
  flex: 0 0 610px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 50px;
}

.about-hero__titles {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-hero__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary);
  margin: 0;
}

.about-hero__subtitle {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--primary);
  margin: 0;
}

.about-hero__description {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--neutral);
  max-width: 557px;
  margin-top: 8px;
}

.about-hero__actions {
  display: flex;
  gap: 17px;
  align-items: center;
  margin-top: 8px;
}

.about-hero__image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.about-hero__employees-img {
  width: 532px;
  height: 569px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

/* ========================================
   NOSSOS PILARES
   ======================================== */
.pilares {
  padding: 80px var(--content-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}

.pilares__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.pilares__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pilares__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary);
  text-align: center;
}

.pilares__underline {
  width: 302px;
  height: 5px;
  background: var(--primary);
  border-radius: 100px;
}

.pilares__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.pilar {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: var(--bg-purple);
  border-radius: 16px;
}

.pilar:first-child {
  align-items: center;
}

.pilar__icon-wrapper {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: var(--light-purple);
  border-radius: 8px;
}

.pilar__icon {
  width: 80px;
  height: 80px;
}

.pilar__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.pilar__title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary);
}

.pilar__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--neutral);
}

.pilar__text p {
  margin: 0;
  line-height: 1.5;
}

/* ========================================
   PARCERIA GEOSITE + SQUADRA
   ======================================== */
.parceria {
  padding: 80px var(--content-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}

.parceria__container {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.parceria__photos {
  flex: 0 0 588px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.parceria__photo-top {
  width: 100%;
  height: 346px;
  border-radius: 16px;
  overflow: hidden;
}

.parceria__img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parceria__photo-bottom {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.parceria__photo-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 285px;
}

.parceria__img-small {
  width: 100%;
  height: 285px;
  object-fit: cover;
  border-radius: 16px;
}

.parceria__photo-right {
  flex: 1;
}

.parceria__img-tall {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 20%;
  border-radius: 16px;
}

.parceria__info {
  flex: 0 0 580px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.parceria__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary);
}

.parceria__title strong {
  font-weight: 700;
}

.parceria__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--neutral);
  max-width: 557px;
}

.parceria__stats {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.parceria__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--bg-purple);
  border-radius: 16px;
  text-align: center;
}

.parceria__stat-number {
  font-size: 96px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--primary);
}

.parceria__stat-label {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--neutral);
}

/* ========================================
   NOSSA HISTORIA
   ======================================== */
.historia {
  padding: 80px var(--content-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}

.historia__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.historia__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.historia__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary);
  text-align: center;
}

.historia__underline {
  width: 302px;
  height: 5px;
  background: var(--primary);
  border-radius: 100px;
}

.historia__timeline {
  position: relative;
  width: 100%;
  max-width: 1160px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.historia__line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 4px;
  display: flex;
  justify-content: center;
}

.historia__line-svg {
  position: absolute;
  left: -18px;
  top: 0;
  width: 1164px;
  height: 100%;
  display: none;
}

.historia__line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-left: 4px dashed var(--light-purple);
  border-radius: 2px;
}

.historia__entry {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  padding-left: 0;
}

.historia__dot {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.historia__dot-img {
  width: 40px;
  height: 40px;
}

.historia__entry-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.historia__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--light-purple);
  color: #2D1D40;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 24px;
  width: 175px;
  text-align: center;
  line-height: 1.5;
}

.historia__entry-body {
  display: flex;
  gap: 16px;
  align-items: center;
}

.historia__entry-image {
  flex-shrink: 0;
  width: 379px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
}

.historia__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.historia__entry-text-card {
  background: var(--neutral-bg);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 5.6px rgba(0, 0, 0, 0.25);
  max-width: 565px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.historia__entry-text-card p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #353535;
  max-width: 506px;
}

/* Entry right alignment */
.historia__entry--right {
  padding-left: 176px;
  flex-direction: row-reverse;
}

.historia__entry--right .historia__entry-content {
  align-items: flex-end;
}

/* ========================================
   NOSSO TIME (CEO)
   ======================================== */
.time {
  background: var(--bg-purple);
  padding: 64px 100px;
}

.time__container {
  max-width: 1200px;
  margin: 0 auto;
}

.time__content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.time__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 0 677px;
}

.time__avatars {
  display: flex;
  gap: 24px;
  align-items: center;
}

.time__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.time__avatar.active {
  border: 3px solid var(--primary);
  transform: scale(1.05);
}

.time__avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.time__card {
  background: var(--neutral-bg);
  border-radius: 16px;
  padding: 24px 32px;
  box-shadow: 0 2px 5.6px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.time__card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time__name {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--primary);
}

.time__role {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--primary);
}

.time__bio {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark);
}

.time__photo {
  flex-shrink: 0;
  width: 400px;
  height: 417px;
  border-radius: 16px;
  overflow: hidden;
}

.time__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   CASES DE SUCESSO
   ======================================== */
.cases {
  padding: 80px var(--content-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}

.cases__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  max-width: 1243px;
  margin: 0 auto;
}

.cases__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary);
  text-align: center;
  width: 100%;
}

.cases__grid {
  display: flex;
  gap: 32px;
  align-items: stretch;
  width: 100%;
}

.case-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 393px;
}

.case-card__image {
  position: relative;
  width: 100%;
  height: 270px;
  border-radius: 16px;
  overflow: hidden;
}

.case-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card__image--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
}

.case-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-card__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #353535;
}

.case-card__text {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #353535;
  min-height: 98px;
}

.case-card__btn {
  width: 163px;
}

/* ========================================
   RESPONSIVE - ABOUT PAGE
   ======================================== */
@media (max-width: 1280px) {
  .about-hero__content { flex: 1; min-width: 0; }
  .about-hero__employees-img { width: 400px; height: 428px; }
  .parceria__container { gap: 24px; }
  .parceria__photos { flex: 0 0 480px; }
  .parceria__info { flex: 1; }
  .parceria__stat-number { font-size: 72px; }
  .parceria__stat-label { font-size: 24px; }
  .time { padding: 64px 40px; }
  .time__left { flex: 1; }
  .time__photo { width: 350px; height: 365px; }
  .historia__entry--right { padding-left: 64px; }
}

@media (max-width: 1024px) {
  .about-hero__container {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  .about-hero__content {
    flex: none;
    align-items: center;
    padding-top: 0;
  }
  .about-hero__description { margin: 0 auto; }
  .about-hero__actions { justify-content: center; }
  .about-hero__employees-img { width: 400px; height: 428px; }
  .about-hero__title { font-size: 34px; }

  .parceria__container { flex-direction: column; }
  .parceria__photos { flex: none; width: 100%; }
  .parceria__info { flex: none; width: 100%; }
  .parceria__photo-top { height: 300px; }
  .parceria__img-small { height: 200px; }
  .parceria__stat-number { font-size: 64px; }

  .historia__entry--right { padding-left: 0; flex-direction: row; }
  .historia__entry--right .historia__entry-content { align-items: flex-start; }
  .historia__entry-body { flex-direction: column; }
  .historia__entry-image { width: 100%; max-width: 379px; }
  .historia__entry-text-card { max-width: 100%; }

  .time__content { flex-direction: column; align-items: center; }
  .time__left { flex: none; width: 100%; max-width: 677px; }
  .time__photo { width: 100%; max-width: 400px; height: 417px; }

  .cases__grid { flex-direction: column; align-items: center; }
  .case-card { max-width: 500px; width: 100%; }
}

@media (max-width: 768px) {
  .about-hero { padding: 120px 20px 40px; }
  .about-hero__title { font-size: 28px; }
  .about-hero__subtitle { font-size: 18px; }
  .about-hero__employees-img { width: 300px; height: 321px; }
  .about-hero__actions { flex-direction: column; align-items: center; }

  .pilares { padding: 60px 20px; }
  .pilares__title { font-size: 28px; }
  .pilar { flex-direction: column; align-items: center; text-align: center; }
  .pilar__title { font-size: 24px; }
  .pilar__text { font-size: 16px; }
  .pilar__icon { width: 60px; height: 60px; }
  .pilares__underline { width: 200px; }

  .parceria { padding: 60px 20px; }
  .parceria__title { font-size: 28px; }
  .parceria__photo-bottom { flex-direction: column; }
  .parceria__photo-left { flex: none; flex-direction: row; }
  .parceria__img-small { height: 150px; flex: 1; }
  .parceria__img-tall { height: 200px; }
  .parceria__stat-number { font-size: 48px; }
  .parceria__stat-label { font-size: 20px; }

  .historia { padding: 60px 20px; }
  .historia__title { font-size: 28px; }
  .historia__underline { width: 200px; }
  .historia__line { display: none; }
  .historia__entry { padding-left: 0; }
  .historia__dot { display: none; }
  .historia__entry--right { padding-left: 0; }
  .historia__entry-image { width: 100%; height: 180px; }
  .historia__entry-text-card p { font-size: 14px; }

  .time { padding: 40px 20px; }
  .time__name { font-size: 24px; }
  .time__role { font-size: 18px; }
  .time__avatars { gap: 16px; }
  .time__avatar { width: 60px; height: 60px; }
  .time__photo { height: 300px; }

  .cases { padding: 60px 20px; }
  .cases__title { font-size: 28px; }
  .case-card__text { font-size: 16px; min-height: auto; }
}