/* Careers page in the language of ume.com.br, layered over hero.css. ASCII-only comments. */

@font-face {
  font-family: "Aeonik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/careers/fonts/aeonik-400.woff2") format("woff2");
}
@font-face {
  font-family: "Aeonik";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/careers/fonts/aeonik-500.woff2") format("woff2");
}
@font-face {
  font-family: "Aeonik Fono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/careers/fonts/aeonik-fono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Aeonik Fono";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/careers/fonts/aeonik-fono-500.woff2") format("woff2");
}

/* ---------- fixed top bar, as on the site ---------- */

.ume-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
}
.ume-nav * {
  box-sizing: border-box;
}

.ume-nav__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px clamp(20px, 8.9vw, 128px);
  background: linear-gradient(90deg, #abf4c4, #cec1f7);
  text-align: center;
}
.ume-nav__banner-text {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: #0e0e0e;
}

.ume-nav__bar {
  position: relative;
  isolation: isolate;
  padding-inline: clamp(20px, 8.9vw, 128px);
}
.ume-nav__bar::before,
.ume-nav__bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 110%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ume-nav__bar::before {
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-mask-image: linear-gradient(#000, #000 55%, transparent);
  mask-image: linear-gradient(#000, #000 55%, transparent);
}
.ume-nav__bar::after {
  background: linear-gradient(
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.3) 45%,
    rgba(0, 0, 0, 0.1) 72%,
    transparent
  );
}
.ume-nav.scrolled .ume-nav__bar::before,
.ume-nav.scrolled .ume-nav__bar::after {
  opacity: 1;
}

.ume-nav__wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 80px;
  max-width: 1480px;
  margin-inline: auto;
}
.ume-nav__logo {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
.ume-nav__logo img {
  display: block;
  height: 20px;
  width: auto;
}

.ume-nav__menu {
  flex: 0 0 auto;
  display: flex;
}
.ume-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  margin: 0;
  padding: 0 16px;
  list-style: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px #4f4f4f;
}
.ume-nav .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.25s,
    color 0.25s;
}
.ume-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.ume-nav__actions {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}
.ume-nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 12px;
  border-radius: 999px;
  background: #09cf7c;
  color: #fff;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.2s;
}
.ume-nav__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 25%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 75%
  );
  transform: translateX(-120%);
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ume-nav__cta:hover {
  background: #038c52;
}
.ume-nav__cta:hover::before {
  transform: translateX(120%);
}
.ume-nav__cta:active {
  transform: scale(0.985);
}
.ume-nav__cta-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.ume-nav__cta-chip {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  color: #09cf7c;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ume-nav__cta:hover .ume-nav__cta-chip {
  background: #0ebb6e;
  color: #fff;
  transform: scale(1.06);
}
.ume-nav__cta-chip svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* The header is fixed: the dark hero starts beneath it, and anchors land below it. */
.careers-hero__top {
  padding-top: 116px;
}
.careers-hero [id] {
  scroll-margin-top: 124px;
}

@media (max-width: 899px) {
  .ume-nav__menu {
    display: none;
  }
  .ume-nav__cta-label {
    font-size: 14px;
    padding: 4px 10px;
  }
}
/* On a phone the label stays on one line, beside its chip, and the actions take their own
   width while the logo gives way. */
.ume-nav__cta-label {
  white-space: nowrap;
}
.ume-nav__cta {
  flex-shrink: 0;
}
@media (max-width: 899px) {
  .ume-nav__actions {
    flex: 0 0 auto;
  }
}

/* ---------- opening text ---------- */

.careers-hero__intro-copy > p.ume-hero__lead {
  margin: 26px 0 0;
  max-width: 560px;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.careers-hero__intro-copy > p.ume-hero__lead + p.ume-hero__lead {
  margin-top: 12px;
}

/* ---------- figures, in the site type and colour ---------- */

.careers-hero__stat {
  padding: 30px 20px 34px;
}
.careers-hero__stat .ume-stat__value {
  display: block;
  margin: 0;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(20px, 1.65vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #fff;
}
.careers-hero__stat .ume-stat__rule {
  display: block;
  width: 60px;
  height: 1px;
  margin: 20px 0 12px;
  background: #d1d1d1;
}
.careers-hero__stat .ume-stat__label {
  display: block;
  margin: 0;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #b0b0b0;
}

/* Over the white sections the fading gradient is not enough, so once scrolled the pill
   carries its own dark glass and the links stay readable. */
.ume-nav .nav-list {
  transition:
    background 0.35s,
    box-shadow 0.35s;
}
.ume-nav.scrolled .nav-list {
  background: rgba(14, 14, 14, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

/* Over a light section the bar turns light: white glass, dark links. The hero reads the
   colour right under the bar and sets .on-light. */
.ume-nav .nav-link {
  transition:
    background 0.25s,
    color 0.35s;
}
.ume-nav__bar::after {
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s;
}
.ume-nav.on-light .ume-nav__bar::after {
  background: linear-gradient(
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.15) 72%,
    transparent
  );
}
.ume-nav.on-light .nav-list {
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.14);
}
.ume-nav.scrolled.on-light .nav-list {
  background: rgba(255, 255, 255, 0.9);
}
.ume-nav.on-light .nav-link {
  color: #0e0e0e;
}
.ume-nav.on-light .nav-link:hover {
  background: rgba(14, 14, 14, 0.06);
}

/* ---------- culture, in place of the principles ---------- */

/* Built on ume.com.br's "O que oferecemos" block: green overline, left-aligned Aeonik
   title and grey description, then a stat row under a full-width rule. */
.careers-hero__section.ume-cultura {
  padding-block: clamp(64px, 8vw, 128px);
  background: #fff;
}
.ume-cultura__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(56px, 6vw, 80px);
  max-width: 1736px;
  margin-inline: auto;
  padding-inline: clamp(24px, 8.9vw, 128px);
}
.ume-cultura__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 630px;
}
.ume-cultura__eyebrow {
  margin: 0;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: #038c52;
}
.ume-cultura__titulo {
  margin: 0;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #000;
}
.ume-cultura__desc {
  margin: 0;
  max-width: 580px;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #6d6d6d;
}
/* The site's own 3D animation, placed the way ume.com.br places it in this block: behind
   the text on the right, multiplied so its white ground disappears into the page. */
.careers-hero__section.ume-cultura {
  position: relative;
  overflow: hidden;
}
.ume-cultura__inner {
  position: relative;
  z-index: 2;
}
.ume-cultura__3d {
  position: absolute;
  top: 120px;
  right: calc(max(0px, (100% - 1736px) / 2) + 100px);
  z-index: 0;
  width: 74%;
  max-width: 1080px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.ume-cultura__3d video {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 1119px) {
  .ume-cultura__3d {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 560px;
    margin: 0 auto -40px;
  }
}

/* ---------- investors ---------- */

/* The same band as ume.com.br: full width on the light wash, a green overline, and the
   logos scrolling edge to edge with soft ends. */
.careers-hero__investors.ume-investidores {
  padding: 40px 0 8px;
  background: #fff;
  border: 0;
}
.ume-investidores__caixa {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.careers-hero__investors.ume-investidores .ume-investidores__caixa > p {
  margin: 0 0 8px;
  padding-inline: clamp(20px, 8.9vw, 128px);
  text-align: center;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #038c52;
}
.ume-investidores__janela {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ume-investidores .careers-hero__marquee {
  animation-duration: 60s;
}
.ume-investidores .careers-hero__marquee-group {
  gap: 32px;
  padding-right: 32px;
}
.ume-investidores__logo {
  display: block;
  flex-shrink: 0;
  height: 72px;
  width: auto;
  max-width: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  transition: opacity 0.25s;
}
.ume-investidores__logo:hover {
  opacity: 0.9;
}
.ume-cultura {
  padding-top: clamp(32px, 4vw, 56px);
}

/* ---------- one frame ---------- */

/* ume.com.br's frame for every block: content up to 1736px wide with 128px sides, 48px
   under 1120px and 24px on a phone. Every section and the bar use the same left edge. */
.careers-hero,
.ume-nav,
main {
  --ume-lado: 128px;
}
@media (max-width: 1119px) {
  .careers-hero,
  .ume-nav,
  main {
    --ume-lado: 48px;
  }
}
@media (max-width: 599px) {
  .careers-hero,
  .ume-nav,
  main {
    --ume-lado: 24px;
  }
}

.ume-nav__bar {
  padding-inline: max(var(--ume-lado), calc((100% - 1736px) / 2 + var(--ume-lado)));
}
.ume-nav__wrapper {
  max-width: none;
}
.careers-hero__inner,
.ume-cultura__inner,
.careers-hero__intro {
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--ume-lado), calc((100% - 1736px) / 2 + var(--ume-lado)));
}

/* ---------- site typography ---------- */

.careers-hero__section h2,
.ume-cultura__titulo {
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.careers-hero .careers-hero__eyebrow--on-light {
  padding: 0;
  border: 0;
  background: none;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #038c52;
}
.careers-hero .careers-hero__lead {
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #6d6d6d;
}
@media (max-width: 1119px) {
  .careers-hero__section h2,
  .ume-cultura__titulo {
    font-size: 40px;
  }
}
@media (max-width: 599px) {
  .careers-hero__section h2,
  .ume-cultura__titulo {
    font-size: 32px;
  }
}

/* ---------- opening as on the site ---------- */

.careers-hero__top {
  padding-bottom: 100px;
}
.careers-hero__intro {
  position: relative;
  display: block;
  padding-top: 72px;
  padding-bottom: 64px;
}
.careers-hero__intro-copy {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.careers-hero__intro-copy h1 {
  margin: 24px 0 0;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 64px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.06em;
  text-wrap: balance;
}
.careers-hero__intro-copy > p.ume-hero__lead {
  margin-top: 24px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.4;
  color: #b0b0b0;
}
.careers-hero__intro-copy > p.ume-hero__lead + p.ume-hero__lead {
  margin-top: 8px;
}
.careers-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 1119px) {
  .careers-hero__intro-copy h1 {
    font-size: 48px;
  }
}
@media (max-width: 599px) {
  .careers-hero__intro-copy h1 {
    font-size: 40px;
  }
}

/* The site's stat row: a rule, four columns split by thin lines. */
.careers-hero__stats {
  display: flex;
  gap: 24px;
  max-width: none;
  margin-inline: max(var(--ume-lado), calc((100% - 1736px) / 2 + var(--ume-lado)));
  padding: 41px 0 0;
  border-top: 1px solid #4f4f4f;
}
.careers-hero__stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 24px 0 0;
  border-right: 1px solid #6d6d6d;
}
.careers-hero__stat:not(:first-child) {
  border-left: 0;
}
.careers-hero__stat:last-child {
  padding-right: 0;
  border-right: 0;
}
.careers-hero__stat .ume-stat__value {
  font-size: 36px;
  letter-spacing: -0.02em;
}
.careers-hero__stat .ume-stat__rule {
  margin: 16px 0 12px;
}
@media (max-width: 1119px) {
  .careers-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    padding-top: 25px;
  }
  .careers-hero__stat {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid #6d6d6d;
  }
  .careers-hero__stat .ume-stat__value {
    font-size: 28px;
  }
}

/* ---------- opening 3D figure ---------- */

/* Ten translucent green tiles on a turning ring: Ume's colours and glass, not the site's
   own animation. */
.ume-orbita {
  position: absolute;
  top: 50%;
  right: max(var(--ume-lado), calc((100% - 1736px) / 2 + var(--ume-lado)));
  z-index: 1;
  width: 520px;
  height: 520px;
  perspective: 1400px;
  translate: 0 -50%;
  pointer-events: none;
}
.ume-orbita__brilho {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(9, 207, 124, 0.45),
    rgba(0, 145, 74, 0.18) 42%,
    transparent 70%
  );
  filter: blur(30px);
}
.ume-orbita__anel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: ume-orbita 26s linear infinite;
}
.ume-orbita__peca {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 132px;
  height: 176px;
  margin: -88px 0 0 -66px;
  border-radius: 36px;
  background: linear-gradient(
    160deg,
    rgba(171, 244, 196, 0.62),
    rgba(9, 207, 124, 0.38) 45%,
    rgba(1, 71, 81, 0.28)
  );
  box-shadow:
    inset 0 0 0 1px rgba(171, 244, 196, 0.55),
    inset 0 0 36px rgba(52, 244, 163, 0.35),
    0 0 40px rgba(9, 207, 124, 0.18);
  transform: rotateY(calc(var(--i) * 36deg)) translateZ(210px) rotateX(8deg);
}
@keyframes ume-orbita {
  from {
    transform: rotateX(-16deg) rotateZ(-8deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-16deg) rotateZ(-8deg) rotateY(360deg);
  }
}
@media (max-width: 1119px) {
  .ume-orbita {
    width: 360px;
    height: 360px;
    right: -60px;
    opacity: 0.35;
  }
  .ume-orbita__peca {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(150px) rotateX(8deg) scale(0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ume-orbita__anel {
    animation: none;
    transform: rotateX(-16deg) rotateZ(-8deg) rotateY(20deg);
  }
}

/* ---------- culture: the figure inside the block ---------- */

/* "2 em 3" sits beside its grey sentence, inside the same block as the culture text. */
.ume-cultura__stat {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  padding: 0;
  border: 0;
}
.ume-cultura__stat-rotulo {
  max-width: 300px;
  padding-left: 24px;
  border-left: 1px solid #d1d1d1;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #2d2d2d;
  opacity: 0.6;
}
@media (max-width: 599px) {
  .ume-cultura__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ume-cultura__stat-rotulo {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- mission on black, values on green cards ---------- */

/* ume.com.br's "Como construimos" block: black ground with a green glow, a centred
   heading and the green glass cards. */
.ume-missao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 128px;
  background: #000;
  color: #fff;
}
.ume-missao__brilho {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 85% 100%, rgba(0, 145, 74, 0.55), rgba(0, 72, 83, 0) 87%),
    radial-gradient(40% 40% at 0% 0%, rgba(0, 145, 74, 0.25), transparent 70%);
}
.ume-missao__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-inline: max(var(--ume-lado), calc((100% - 1736px) / 2 + var(--ume-lado)));
}
.ume-missao__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.ume-missao__eyebrow {
  margin: 0;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: #34f4a3;
}
.ume-missao__titulo {
  margin: 0;
  max-width: 890px;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.ume-missao__rotulo {
  margin-top: 24px;
}
.ume-missao__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ume-missao__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 360px;
  padding: 40px 32px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(9, 207, 124, 0.7), rgba(1, 45, 29, 0) 193.75%);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
}
.ume-missao__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-right: 2px solid transparent;
  background: linear-gradient(180deg, rgba(5, 105, 63, 0), #09cf7c 49.52%, rgba(5, 105, 63, 0))
    border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ume-missao__card-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ume-missao__card-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      #f0fdf4 10px 10.5px,
      transparent 10.5px 20px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 9.75px,
      #f0fdf4 9.75px 10.25px,
      transparent 10.25px 20px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), #fff);
  box-shadow: inset 0 0 0 1px #f0fdf4;
  color: #038c52;
}
.ume-missao__card-icone .careers-hero__icon {
  font-size: 18px;
  color: #038c52;
}
.ume-missao__card-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ume-missao__card-label {
  margin: 0;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #34f4a3;
}
.ume-missao__card h3 {
  margin: 0;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.ume-missao__card > p {
  margin: 0;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #e7e7e7;
}
@media (max-width: 1279px) {
  .ume-missao__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1119px) {
  .ume-missao {
    padding-block: 112px;
  }
  .ume-missao__head {
    align-items: flex-start;
    text-align: left;
  }
  .ume-missao__titulo {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .ume-missao__cards {
    grid-template-columns: 1fr;
  }
  .ume-missao__card {
    min-height: 0;
  }
}
@media (max-width: 599px) {
  .ume-missao {
    padding-block: 80px;
  }
  .ume-missao__titulo {
    font-size: 32px;
  }
}

/* The job list sits outside the hero wrapper, in the product's own narrower box; it joins
   the same frame. The product rule is a :has() selector, hence the weight here. */
body:has(.careers-hero) main > h1 ~ * {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: max(var(--ume-lado), calc((100% - 1736px) / 2 + var(--ume-lado))) !important;
}

/* The culture figure keeps the site's gradient stat type. */
.ume-cultura__stat-valor {
  flex-shrink: 0;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: clamp(48px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.06em;
  background-image: linear-gradient(277deg, #00d574 -0.01%, #000 147.71%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Four figures share a row narrower than the site's widest screen, so the type follows it. */
.careers-hero__stat .ume-stat__value {
  font-size: clamp(24px, 2.3vw, 36px);
}

/* A grey rule over the figure splits it from the text above. The gradient text is clipped
   to the glyph boxes, and the tight tracking pulls the last box inside the "3", so the
   value carries room on its right. */
.ume-cultura__stat {
  align-self: stretch;
  margin-top: 4px;
  padding-top: 28px;
  border-top: 1px solid #d1d1d1;
}
.ume-cultura__stat-valor {
  padding-right: 0.12em;
  margin-right: -0.12em;
}

/* ---------- team experience ---------- */

/* The investors band, repeated on top of "Como trabalhamos": the same green overline and
   grey logos scrolling edge to edge, here over that section's wash. */
.ume-experiencia {
  margin-bottom: clamp(64px, 7vw, 104px);
}
.ume-experiencia > p {
  margin: 0 0 24px;
  padding-inline: max(var(--ume-lado), calc((100% - 1736px) / 2 + var(--ume-lado)));
  text-align: center;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #038c52;
}
.ume-experiencia .careers-hero__marquee {
  animation-duration: 40s;
}
.ume-experiencia .careers-hero__marquee-group {
  gap: 88px;
  padding-right: 88px;
}
.ume-experiencia__logo {
  display: block;
  flex-shrink: 0;
  height: 28px;
  width: auto;
  max-width: none;
  filter: grayscale(1);
  opacity: 0.45;
  mix-blend-mode: multiply;
  transition:
    opacity 0.25s,
    filter 0.25s;
}
.ume-experiencia__logo:hover {
  filter: none;
  opacity: 1;
}
.ume-experiencia__logo[alt="BTG Pactual"] {
  height: 34px;
}
.ume-experiencia__logo[alt="McKinsey & Company"] {
  height: 24px;
}

/* The mission heads the block on its own; "Valores" labels the cards right above them,
   on a thin rule, instead of floating between the two. */
.ume-missao__titulo {
  text-wrap: balance;
}
.ume-missao__inner {
  gap: 80px;
}
.ume-missao__valores {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ume-missao__valores > .ume-missao__eyebrow {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Sized to read like the investors band: those tiles show their marks about 12-15px tall
   and 60-115px wide, so each file gets the height that lands it in that range. */
.ume-experiencia__logo {
  opacity: 0.5;
}
.ume-experiencia__logo[alt="Google"] {
  height: 22px;
}
.ume-experiencia__logo[alt="Nubank"] {
  height: 22px;
}
.ume-experiencia__logo[alt="Revolut"] {
  height: 16px;
}
.ume-experiencia__logo[alt="BTG Pactual"] {
  height: 26px;
}
.ume-experiencia__logo[alt="McKinsey & Company"] {
  height: 14px;
}
.ume-experiencia .careers-hero__marquee-group {
  gap: 96px;
  padding-right: 96px;
}

/* The value cards move: they rise in turn as the row enters the screen, a slow light
   passes over each one in turn, and a card lifts and glows under the pointer. */
.ume-missao__card {
  overflow: hidden;
  opacity: 0;
  translate: 0 48px;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s,
    background 0.4s;
  transition-delay: calc(var(--i) * 120ms), calc(var(--i) * 120ms), 0s, 0s;
}
.ume-missao__cards.visivel .ume-missao__card {
  opacity: 1;
  translate: 0 0;
}
.ume-missao__card::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg);
  animation: ume-reflexo 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.6s + 1.2s);
  pointer-events: none;
}
@keyframes ume-reflexo {
  0%,
  70% {
    left: -60%;
  }
  100% {
    left: 140%;
  }
}
.ume-missao__cards.visivel .ume-missao__card:hover {
  translate: 0 -8px;
  background: linear-gradient(180deg, rgba(9, 207, 124, 0.88), rgba(1, 45, 29, 0.1) 193.75%);
  box-shadow: 0 24px 60px rgba(9, 207, 124, 0.28);
  transition-delay: 0s;
}
.ume-missao__card:hover .ume-missao__card-icone {
  transform: rotate(-8deg) scale(1.08);
}
.ume-missao__card-icone {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ume-missao__card {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .ume-missao__card::after {
    animation: none;
    display: none;
  }
}

/* The rise runs as a keyframe animation that only fills its own delay, so once it ends the
   card's normal state takes over and the hover lift still applies. */
.ume-missao__card {
  opacity: 1;
  translate: 0 0;
  transition:
    translate 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s,
    background 0.4s;
  transition-delay: 0s;
}
.ume-missao__cards:not(.visivel) .ume-missao__card {
  opacity: 0;
  translate: 0 48px;
}
.ume-missao__cards.visivel .ume-missao__card {
  animation: ume-subir 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 120ms);
}
@keyframes ume-subir {
  from {
    opacity: 0;
    translate: 0 48px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ume-missao__cards:not(.visivel) .ume-missao__card {
    opacity: 1;
    translate: none;
  }
  .ume-missao__cards.visivel .ume-missao__card {
    animation: none;
  }
}

/* The experience band opens its section: only a short gap separates it from the black
   block above, the same gap the investors band keeps under the hero. */
.careers-hero__section--wash#ai {
  padding-top: 40px;
}

/* The job list opens with one sentence: the invitation in black, the rest in grey. */
.careers-hero__section h2.ume-chamada {
  max-width: 900px;
  color: #9a9a9a;
  text-wrap: balance;
}
.ume-chamada strong {
  font-weight: 500;
  color: #0e0e0e;
}
/* On the dark benefits block the lead keeps the light grey the site uses on black. */
.careers-hero .careers-hero__lead--on-dark {
  color: #b0b0b0;
}

/* Nine benefits in two columns: the last one takes the whole row instead of leaving an
   empty grey cell beside it. */
@media (min-width: 640px) {
  .careers-hero__benefit:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- benefits: heading above, cards below ---------- */

/* The heading over the cards, the way every other block opens, and nine benefits in three
   even columns, so neither side leaves a hole. */
.careers-hero__benefits {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.careers-hero__benefits > [data-ch-reveal] {
  max-width: 640px;
}
.careers-hero__benefits h2 {
  margin: 0 0 20px;
  color: #fff;
}
.careers-hero__benefit-grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.careers-hero__benefit:last-child:nth-child(odd) {
  grid-column: auto;
}
@media (max-width: 1023px) {
  .careers-hero__benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .careers-hero__benefit:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 639px) {
  .careers-hero__benefit-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- job area on its own ground ---------- */

/* The job area is its own place: a light grey ground from the invitation down to the last
   job, opened by a rule, and the invitation in one colour. */
.careers-hero__section--listings {
  padding-top: clamp(72px, 8vw, 112px);
  background: #f6f6f6;
  border-top: 1px solid #e3e3e3;
}
body:has(.careers-hero) main > h1 ~ * {
  padding-bottom: 0 !important;
  background: #f6f6f6 !important;
}
body:has(.careers-hero) main > h1 ~ :last-child {
  padding-bottom: clamp(72px, 8vw, 112px) !important;
}
body:has(.careers-hero) main {
  padding-bottom: 0;
}
.careers-hero__section h2.ume-chamada {
  color: #0e0e0e;
}
.ume-chamada strong {
  font-weight: 500;
  color: #0e0e0e;
}
.careers-hero__section h2.ume-chamada {
  font-weight: 400;
}
/* The product keeps a hidden heading between the invitation and the list; the page ground
   under it takes the same grey so no white seam shows. */
body:has(.careers-hero) main {
  background: #f6f6f6 !important;
}

/* The hero tag reads a size up from the product's 12px pill. */
.careers-hero .ume-etiqueta-topo {
  padding: 9px 18px;
  font-size: 14px;
}

/* ---------- site motion ---------- */

/* The hero takes over the product's own fade: each text block waits hidden and
   rises 32px out of an 8px blur over 1s when it scrolls into view, as on ume.com.br. */
.ume-movimento [data-ch-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.ume-movimento .ume-entra:not(.ume-visto) {
  opacity: 0;
}
.ume-movimento .ume-entra.ume-visto {
  animation: ume-entrar 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--ume-atraso, 0s) backwards;
}
@keyframes ume-entrar {
  from {
    opacity: 0;
    translate: 0 32px;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

/* The sections the menu reaches fill at least the screen under the fixed bar (36px banner
   plus 80px bar), content centred, so a menu jump frames one section and nothing of the
   next. Phones keep the natural heights. */
@media (min-width: 1024px) {
  #cultura,
  #ai,
  #time,
  #escritorios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - 116px);
  }
}

/* The opening screen holds the whole hero, title to figures, on a laptop screen: tighter
   gaps and a title wide enough to settle in two lines. */
.careers-hero__intro {
  padding-top: 40px;
  padding-bottom: 40px;
}
.careers-hero__intro-copy {
  max-width: 920px;
}
.careers-hero__intro-copy h1 {
  margin-top: 20px;
}
.careers-hero__ctas {
  margin-top: 32px;
}
.careers-hero__top {
  padding-bottom: 56px;
}
.careers-hero__stats {
  padding-top: 32px;
}

/* The job list's invitation sits closer to its filters. */
.careers-hero__section--listings {
  padding-bottom: 40px;
}
/* Short laptop screens keep the whole hero in view with a slightly smaller title. */
@media (min-width: 1120px) and (max-height: 820px) {
  .careers-hero__intro-copy h1 {
    font-size: 56px;
  }
  .careers-hero__intro {
    padding-top: 28px;
    padding-bottom: 32px;
  }
}
/* With the two-line title the ring moves to the right edge and shrinks a little, so the
   title never runs into it. */
@media (min-width: 1120px) {
  .ume-orbita {
    width: 420px;
    height: 420px;
    right: max(24px, calc((100% - 1736px) / 2 + 24px));
  }
  .ume-orbita__anel {
    scale: 0.8;
  }
}

/* The bar's "Ver vagas" stays out while the hero's own button is in view (set by the hero). */
.ume-nav__cta {
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.2s,
    opacity 0.35s,
    translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ume-nav.cta-oculto .ume-nav__cta {
  opacity: 0;
  translate: 0 -10px;
  pointer-events: none;
}

/* ---------- general pass ---------- */

/* One typeface across the page: the product's cards, lists and job list take Aeonik like
   every block around them, with the site's 500 weight for titles. */
.careers-hero,
body:has(.careers-hero) main > h1 ~ * {
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
}
.careers-hero strong,
.careers-hero h3,
.careers-hero__team-meta strong,
body:has(.careers-hero) main > h1 ~ * .font-semibold {
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
.careers-hero .ume-etiqueta-topo {
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

/* Every heading starts on the page's left edge, the mission's included. */
.ume-missao__head {
  align-items: flex-start;
  text-align: left;
}

/* One vertical rhythm, the site's: 128px around each block, 112px on tablets, 80px on
   phones. Bands that open a section (logos, the job list) keep their own short gaps. */
.careers-hero__section,
.careers-hero__section.ume-cultura,
.ume-missao {
  padding-top: 128px;
  padding-bottom: 128px;
}
.careers-hero__section--wash#ai {
  padding-top: 40px;
}
.careers-hero__section--listings {
  padding-top: 128px;
  padding-bottom: 40px;
}
@media (max-width: 1119px) {
  .careers-hero__section,
  .careers-hero__section.ume-cultura,
  .ume-missao {
    padding-top: 112px;
    padding-bottom: 112px;
  }
  .careers-hero__section--listings {
    padding-top: 112px;
  }
}
@media (max-width: 599px) {
  .careers-hero__section,
  .careers-hero__section.ume-cultura,
  .ume-missao {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .careers-hero__section--listings {
    padding-top: 80px;
  }
  .careers-hero__section--wash#ai {
    padding-top: 32px;
  }
  /* Phone figures fit their half of the row. */
  .careers-hero__stat .ume-stat__value {
    font-size: 22px;
    white-space: normal;
  }
}
/* The job area closes on the same rhythm as the blocks above, and its invitation keeps
   its short gap to the filters on every width. */
body:has(.careers-hero) main > h1 ~ :last-child {
  padding-bottom: 128px !important;
}
@media (max-width: 1119px) {
  body:has(.careers-hero) main > h1 ~ :last-child {
    padding-bottom: 112px !important;
  }
}
@media (max-width: 599px) {
  body:has(.careers-hero) main > h1 ~ :last-child {
    padding-bottom: 80px !important;
  }
  .careers-hero__section--listings {
    padding-bottom: 32px;
  }
}
@media (min-width: 600px) {
  .careers-hero__section--listings {
    padding-bottom: 40px;
  }
}
/* On a phone the ring would sit behind the hero text; the text wins. */
@media (max-width: 767px) {
  .ume-orbita {
    display: none;
  }
}

/* Section tags read like the site's: small green Aeonik Fono over the title, 20px apart;
   on the dark benefits block the tag takes the site's light green. */
.careers-hero .careers-hero__eyebrow--on-light,
.careers-hero .ume-etiqueta-escura {
  display: block;
  margin: 0;
}
.careers-hero .ume-etiqueta-escura {
  padding: 0;
  border: 0;
  background: none;
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #34f4a3;
}
.careers-hero__section .careers-hero__eyebrow + h2,
.careers-hero__benefits .ume-etiqueta-escura + h2 {
  margin-top: 20px;
}

/* Content starts at the top of its block, as on ume.com.br, where the culture text lines
   up with its 3D animation; the sections still fill the screen for the menu's framing. */
@media (min-width: 1024px) {
  #cultura,
  #ai,
  #time,
  #escritorios {
    justify-content: flex-start;
  }
}

/* Sections keep their natural height, as on ume.com.br: no forced screen height, so no
   empty band under short content. */
@media (min-width: 1024px) {
  #cultura,
  #ai,
  #time,
  #escritorios {
    display: block;
    min-height: 0;
  }
}

/* Values: tall green cards in a row that slides, with the arrows beside the "Valores" tag,
   like the product's own values carousel. Three show on a desktop, one and a bit on a phone,
   and a finger can swipe the row too. */
.ume-missao__valores-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.ume-missao__valores-topo .ume-missao__eyebrow {
  margin: 0;
}
.ume-missao__setas {
  display: flex;
  gap: 8px;
}
.ume-missao__setas button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    opacity 0.25s;
}
.ume-missao__setas button:hover:not(:disabled) {
  background: #09cf7c;
  border-color: #09cf7c;
  color: #000;
}
.ume-missao__setas button:disabled {
  opacity: 0.3;
  cursor: default;
}
.ume-missao__setas .careers-hero__icon {
  font-size: 20px;
}
.ume-missao__cards {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ume-missao__cards::-webkit-scrollbar {
  display: none;
}
.ume-missao__card {
  flex: 0 0 calc((100% - 32px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  min-height: 520px;
  padding: 40px 32px;
  scroll-snap-align: start;
}
.ume-missao__card-label {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ume-missao__card h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ume-missao__card-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ume-missao__card-lista li {
  position: relative;
  padding-left: 20px;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #e7e7e7;
}
.ume-missao__card-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #34f4a3;
}
@media (max-width: 1119px) {
  .ume-missao__card {
    flex-basis: calc((100% - 16px) / 2);
  }
}
@media (max-width: 767px) {
  .ume-missao__card {
    flex-basis: 85%;
    min-height: 0;
    padding: 32px 24px;
  }
}

/* Opening screen: the design review's gradient behind it and everything centred, in place of
   the 3D ring. The stats keep the site's row along the bottom. */
.careers-hero__top {
  background: #121212 url("/careers/hero-bg.webp") center / cover no-repeat;
}
.careers-hero__intro-copy {
  margin-inline: auto;
  max-width: 920px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.careers-hero__intro-copy > p.ume-hero__lead {
  margin-inline: auto;
  max-width: 600px;
  color: #d0d0d0;
}
.careers-hero__ctas {
  justify-content: center;
}
.careers-hero__intro {
  padding-top: 88px;
  padding-bottom: 72px;
}
@media (max-height: 820px) and (min-width: 1120px) {
  .careers-hero__intro {
    padding-top: 56px;
    padding-bottom: 48px;
  }
}
.careers-hero__stats {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.careers-hero__orb {
  display: none;
}
.careers-hero__intro-copy > p.ume-hero__lead {
  max-width: 640px;
  text-wrap: balance;
}
/* Without the numbers row the opening fills the first screen, its text centred in it. */
.careers-hero__top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-bottom: 0;
}
.careers-hero__intro {
  padding-bottom: 88px;
}

/* The opening, as the design review's print: capital title, white text, and two plain pill
   buttons (green with a briefcase, dark grey). */
.careers-hero__intro-copy h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: initial;
}
.careers-hero__intro-copy > p.ume-hero__lead {
  max-width: none;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
  text-wrap: initial;
}
.careers-hero__intro-copy > p.ume-hero__lead + p.ume-hero__lead {
  margin-top: 24px;
}
.careers-hero__ctas {
  gap: 12px;
  margin-top: 48px;
}
.ume-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family:
    Aeonik,
    "Helvetica Neue",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.25s;
}
.ume-hero-btn .careers-hero__icon {
  font-size: 18px;
}
.careers-hero a.ume-hero-btn--verde {
  background: #09cf7c;
  color: #0e0e0e;
}
.careers-hero a.ume-hero-btn--verde:hover {
  background: #0ebb6e;
}
.careers-hero a.ume-hero-btn--cinza {
  background: #2a2a2a;
  color: #fff;
}
.careers-hero a.ume-hero-btn--cinza:hover {
  background: #3a3a3a;
}
@media (max-width: 1119px) {
  .careers-hero__intro-copy h1 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .ume-quebra {
    display: none;
  }
  .careers-hero__intro-copy h1 {
    font-size: 32px;
  }
  .careers-hero__intro-copy > p.ume-hero__lead {
    font-size: 16px;
  }
}
.careers-hero__intro-copy {
  max-width: 1200px;
}
.ume-cultura__titulo-linha {
  display: block;
  margin-top: 16px;
}
.ume-cultura__desc + .ume-cultura__desc {
  margin-top: 16px;
}

.ume-missao__card {
  min-height: 360px;
}
@media (max-width: 767px) {
  .ume-missao__card {
    min-height: 0;
  }
}
/* A team card whose portrait has not arrived yet: the photo area stays, empty. */
.ume-time__sem-foto {
  width: 100%;
  height: 312px;
  background: linear-gradient(180deg, #ececec, #dedede);
}

/* ---------- language EN | PT ---------- */

/* The same capsule as the menu (thin grey ring, mono uppercase labels), so the language
   switch reads as part of the bar; the language in use is the white pill. */
.ume-nav__actions {
  align-items: center;
  gap: 12px;
}
.ume-idioma {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 6px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #4f4f4f;
  transition:
    background 0.35s,
    box-shadow 0.35s;
}
.ume-idioma__opcao {
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Aeonik Fono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}
.ume-idioma__opcao:hover {
  color: #fff;
}
.ume-idioma__opcao[aria-pressed="true"] {
  background: #fff;
  color: #0e0e0e;
}
.ume-nav.scrolled .ume-idioma {
  background: rgba(14, 14, 14, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.ume-nav.on-light .ume-idioma {
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.14);
}
.ume-nav.scrolled.on-light .ume-idioma {
  background: rgba(255, 255, 255, 0.9);
}
.ume-nav.on-light .ume-idioma__opcao {
  color: rgba(14, 14, 14, 0.55);
}
.ume-nav.on-light .ume-idioma__opcao:hover {
  color: #0e0e0e;
}
.ume-nav.on-light .ume-idioma__opcao[aria-pressed="true"] {
  background: #0e0e0e;
  color: #fff;
}
@media (max-width: 809px) {
  .ume-idioma {
    height: 40px;
    padding: 0 4px;
  }
  .ume-idioma__opcao {
    padding: 6px 9px;
    font-size: 11px;
  }
}

/* ---------- value icons ---------- */

/* Each value's own line drawing, white straight on the green card: no white disc behind it,
   which would hide a white drawing. The icon-font fallback takes the same colour and size. */
.ume-missao__card-icone {
  width: 72px;
  height: 72px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  justify-content: flex-start;
  color: #fff;
}
.ume-missao__card-icone img {
  display: block;
  max-width: 72px;
  max-height: 72px;
  width: auto;
  height: auto;
}
.ume-missao__card-icone .careers-hero__icon {
  font-size: 56px;
  color: #fff;
}

/* ---------- site footer ---------- */

/* On the listing the footer sits right after <main>; its rounded corners show the job
   area's grey, not the page's white. */
.ume-footer-host {
  background: #f6f6f6;
}

.ume-footer {
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  color: #fff;
  margin-bottom: 0;
  overflow: hidden;
}
.ume-footer__inner {
  background-color: #000;
  background-image:
    radial-gradient(82% 78% at 78% 125%, rgba(0, 145, 74, 0.7) 0, rgba(0, 72, 83, 0) 100%),
    radial-gradient(
      45% 150% at -8% 168%,
      rgba(0, 213, 116, 0.9) 0,
      rgba(0, 143, 100, 0.45) 50%,
      rgba(0, 72, 83, 0) 100%
    ),
    linear-gradient(180deg, rgba(0, 72, 83, 0) 40%, rgba(0, 72, 83, 0.32)),
    linear-gradient(247.78deg, #000 53.658%, transparent 106.99%), linear-gradient(#004853, #004853);
  padding: 96px 128px;
  position: relative;
}
@media (max-width: 1119px) {
  .ume-footer__inner {
    padding: 96px 48px;
  }
}
@media (max-width: 599px) {
  .ume-footer__inner {
    padding: 48px 24px;
  }
}
.ume-footer__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-inline: auto;
  max-width: 1480px;
  width: 100%;
}
@media (max-width: 1119px) {
  .ume-footer__container {
    gap: 64px;
  }
}
.ume-footer__label,
.ume-footer__label-link {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-family:
    Aeonik Fono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  min-height: 16px;
  padding-bottom: 6px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.ume-footer__label-link {
  transition: color 0.3s ease;
}
.ume-footer__label-link:focus-visible,
.ume-footer__label-link:hover {
  color: #09cf7c;
}
.ume-footer__link {
  align-items: center;
  color: #d1d1d1;
  display: inline-flex;
  font-family:
    Aeonik,
    Helvetica Neue,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  min-height: 16px;
  padding-block: 6px;
  text-decoration: none;
  transition: color 0.3s ease;
}
.ume-footer__link:focus-visible,
.ume-footer__link:hover {
  color: #fff;
}
.ume-footer a:focus-visible,
.ume-footer button:focus-visible {
  border-radius: 2px;
  outline: 2px solid #09cf7c;
  outline-offset: 3px;
}
.ume-footer__top {
  align-items: start;
  column-gap: 62px;
  display: grid;
  grid-template-areas: "brand nav" "apps  nav";
  grid-template-columns: 340px 1fr;
  row-gap: 20px;
}
@media (max-width: 1119px) {
  .ume-footer__top {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}
.ume-footer__brand {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-area: brand;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  width: 340px;
}
@media (max-width: 1119px) {
  .ume-footer__brand {
    gap: 16px;
    width: 100%;
  }
}
.ume-footer__logo {
  display: block;
  line-height: 0;
}
.ume-footer__logo img {
  display: block;
  height: 20px;
  width: 72px;
}
.ume-footer__desc {
  font-family:
    Aeonik,
    Helvetica Neue,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}
@media (max-width: 1119px) {
  .ume-footer__desc {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media (max-width: 599px) {
  .ume-footer__desc {
    font-size: 16px;
    line-height: 1.4;
  }
}
.ume-footer__desc {
  color: #b0b0b0;
  margin: 0;
}
@media (max-width: 599px) {
  .ume-footer__desc {
    font-size: 14px;
  }
}
.ume-footer__social {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1119px) {
  .ume-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 52px;
    margin-top: 64px;
  }
}
.ume-footer__social--bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  justify-content: flex-end;
  margin-top: 0;
}
@media (max-width: 1119px) {
  .ume-footer__social--bottom {
    display: none;
  }
}
.ume-footer__apps {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-area: apps;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  padding-top: 12px;
  width: 100%;
}
@media (max-width: 1119px) {
  .ume-footer__apps {
    align-items: center;
    border-top: 1px solid #3d3d3d;
    padding-top: 40px;
  }
}
.ume-footer__badges {
  display: flex;
  gap: 16px;
  width: 100%;
}
@media (max-width: 1119px) {
  .ume-footer__badges {
    gap: 16px;
  }
}
@media (max-width: 599px) {
  .ume-footer__badges {
    flex-direction: column;
  }
}
.ume-footer__badge {
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  height: 45px;
  justify-content: center;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  width: 127px;
}
.ume-footer__badge img {
  display: block;
}
@media (max-width: 1119px) {
  .ume-footer__badge {
    flex: 1 1 0;
    width: auto;
  }
}
@media (max-width: 599px) {
  .ume-footer__badge {
    flex: none;
    width: 100%;
  }
}
a.ume-footer__badge:focus-visible,
a.ume-footer__badge:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}
.ume-footer__nav {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  display: flex;
  gap: 12px;
  grid-area: nav;
  -ms-grid-column: 3;
  justify-content: flex-end;
  max-width: 782px;
  min-width: 0;
}
@media (max-width: 1119px) {
  .ume-footer__nav {
    flex-direction: column;
    gap: 0;
    margin-top: 48px;
    max-width: none;
    width: 100%;
  }
}
.ume-footer__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  max-width: 220px;
  min-width: 0;
}
.ume-footer__col:last-child {
  flex: none;
  max-width: 210px;
}
@media (max-width: 1119px) {
  .ume-footer__col {
    border-top: 1px solid #3d3d3d;
    flex: none;
    max-width: none;
    padding-block: 20px;
  }
  .ume-footer__col:last-child {
    max-width: none;
  }
}
.ume-footer__col-title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
.ume-footer__col-toggle {
  align-items: center;
  background: none;
  border: 0;
  cursor: default;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 0;
  text-align: left;
  width: 100%;
}
@media (max-width: 1119px) {
  .ume-footer__col-toggle {
    cursor: pointer;
  }
}
.ume-footer__chevron-box {
  align-items: center;
  color: #fff;
  display: none;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  width: 20px;
}
@media (max-width: 1119px) {
  .ume-footer__chevron-box {
    display: inline-flex;
  }
}
.ume-footer__chevron {
  display: block;
}
.ume-footer__col-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ume-footer__col-list li,
.ume-footer__legal li,
.ume-footer__social li {
  display: flex;
}
@media (max-width: 1119px) {
  .ume-footer__col-panel {
    overflow: hidden;
  }
  .ume-footer__col[data-open="false"] .ume-footer__col-panel {
    display: none;
  }
  .ume-footer__col[data-open="false"] .ume-footer__chevron-box {
    transform: rotate(180deg);
  }
}
.ume-footer__bottom {
  display: flex;
  flex-direction: column;
}
.ume-footer__bottom-row {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  padding-block: 32px;
}
@media (max-width: 1119px) {
  .ume-footer__bottom-row {
    align-items: flex-start;
    border-top: 1px solid #3d3d3d;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 0;
    padding-top: 32px;
  }
}
.ume-footer__legal {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  gap: 32px;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}
@media (max-width: 1119px) {
  .ume-footer__legal {
    align-items: flex-start;
    flex: none;
    flex-direction: column;
    gap: 32px;
  }
}
.ume-footer__fine {
  align-items: center;
  border-top: 1px solid #3d3d3d;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  padding-top: 32px;
}
@media (max-width: 1119px) {
  .ume-footer__fine {
    align-items: flex-start;
    border-top: 0;
    flex-direction: column;
    gap: 40px;
    margin-top: 32px;
    padding-bottom: 32px;
    padding-top: 0;
  }
}
.ume-footer__fine-text {
  color: #fff;
  font-family:
    Aeonik Fono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}
.ume-footer__fine-text a {
  color: #09cf7c;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: opacity 0.3s ease;
}
.ume-footer__fine-text a:focus-visible,
.ume-footer__fine-text a:hover {
  opacity: 0.8;
}
.ume-footer__credit {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.ume-footer__credit:focus-visible,
.ume-footer__credit:hover {
  opacity: 0.75;
}
.ume-footer__credit-label {
  color: #fff;
  font-family:
    Aeonik,
    Helvetica Neue,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 10px;
  line-height: 20px;
  white-space: nowrap;
}
.ume-footer__credit-logo {
  display: block;
  height: 9.28px;
  margin-inline: 6.5px;
  width: 28.63px;
}
@media (prefers-reduced-motion: reduce) {
  .ume-footer__badge,
  .ume-footer__chevron-box,
  .ume-footer__credit {
    transition: none;
  }
  a.ume-footer__badge:hover {
    transform: none;
  }
}