/* Cena institucional exclusiva da abertura de Como atuamos. */
.institutional-page .institutional-hero {
  background: #06112f;
}

/* As faixas seguintes preservam o lado reservado ao conteúdo de cada cena. */
.institutional-page .institutional-process,
.institutional-page .institutional-solutions {
  background: #06112f;
}

.institutional-page .institutional-process .institutional-process-image,
.institutional-page .institutional-solutions .institutional-solutions-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.institutional-page .institutional-process .scene-shade {
  background:
    linear-gradient(270deg, rgba(2, 8, 23, .92) 0%, rgba(2, 8, 23, .77) 34%, rgba(2, 8, 23, .3) 68%, rgba(2, 8, 23, .07) 100%),
    linear-gradient(0deg, rgba(2, 8, 23, .86) 0%, transparent 58%);
}

.institutional-page .institutional-solutions .scene-shade {
  background:
    linear-gradient(90deg, rgba(2, 8, 23, .92) 0%, rgba(2, 8, 23, .77) 38%, rgba(2, 8, 23, .3) 72%, rgba(2, 8, 23, .07) 100%),
    linear-gradient(0deg, rgba(2, 8, 23, .88) 0%, transparent 62%);
}

.institutional-page .institutional-process .scene-description,
.institutional-page .institutional-solutions .scene-description {
  color: rgba(255, 255, 255, .93);
}

.institutional-page .institutional-process .service-list li > span,
.institutional-page .institutional-solutions .service-list li > span {
  color: #d6dce8;
}

@media (max-width: 1000px) {
  .institutional-page .institutional-process .institutional-process-image {
    object-position: 35% center;
  }

  .institutional-page .institutional-solutions .institutional-solutions-image {
    object-position: 65% center;
  }

  .institutional-page .institutional-process .scene-shade,
  .institutional-page .institutional-solutions .scene-shade {
    background:
      linear-gradient(90deg, rgba(2, 8, 23, .86) 0%, rgba(2, 8, 23, .57) 65%, rgba(2, 8, 23, .35) 100%),
      linear-gradient(0deg, rgba(2, 8, 23, .93) 0%, transparent 82%);
  }
}

@media (max-width: 760px) {
  .institutional-page .institutional-process .institutional-process-image {
    object-position: 32% center;
  }

  .institutional-page .institutional-solutions .institutional-solutions-image {
    object-position: 68% center;
  }

  .institutional-page .institutional-process .scene-shade,
  .institutional-page .institutional-solutions .scene-shade {
    background:
      linear-gradient(90deg, rgba(2, 8, 23, .79) 0%, rgba(2, 8, 23, .58) 100%),
      linear-gradient(0deg, rgba(2, 8, 23, .96) 0%, rgba(2, 8, 23, .62) 65%, rgba(2, 8, 23, .28) 100%);
  }
}

.institutional-page .institutional-hero .institutional-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 48%;
  filter: none;
}

.institutional-page .institutional-hero .scene-shade {
  background:
    linear-gradient(90deg, rgba(2, 8, 23, .91) 0%, rgba(2, 8, 23, .76) 34%, rgba(2, 8, 23, .35) 65%, rgba(2, 8, 23, .08) 100%),
    linear-gradient(0deg, rgba(2, 8, 23, .86) 0%, transparent 58%),
    linear-gradient(180deg, rgba(2, 8, 23, .34) 0%, transparent 30%);
}

.institutional-page .institutional-hero .scene-description {
  color: rgba(255, 255, 255, .93);
}

.institutional-page .institutional-hero .service-tagline {
  color: #cbd8f7;
}

@media (max-width: 1000px) {
  .institutional-page .institutional-hero .institutional-image {
    object-position: 62% center;
  }

  .institutional-page .institutional-hero .scene-shade {
    background:
      linear-gradient(90deg, rgba(2, 8, 23, .89) 0%, rgba(2, 8, 23, .62) 58%, rgba(2, 8, 23, .3) 100%),
      linear-gradient(0deg, rgba(2, 8, 23, .91) 0%, transparent 78%);
  }
}

@media (max-width: 760px) {
  .institutional-page .institutional-hero .institutional-image {
    object-position: 68% center;
  }

  .institutional-page .institutional-hero .scene-shade {
    background:
      linear-gradient(90deg, rgba(2, 8, 23, .79) 0%, rgba(2, 8, 23, .58) 100%),
      linear-gradient(0deg, rgba(2, 8, 23, .95) 0%, rgba(2, 8, 23, .46) 75%, rgba(2, 8, 23, .22) 100%);
  }
}