/* Prova social BPG — "BPG no mundo" e "Da origem ao embarque".
   Só anima transform/opacity; respeita prefers-reduced-motion. */

.bpg-ps {
  --ps-gold: #f3b626;
  --ps-gold-2: #ffca08;
  --ps-ink: #050608;
  --ps-card: #111317;
  --ps-text: #f5f3ee;
  --ps-muted: #d9d9d9;
  --ps-line: rgb(255 255 255 / 0.1);
  --ps-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--ps-ink);
  color: var(--ps-text);
  font-family: "Inter Tight", sans-serif;
}
/* âncora #clientes/#operacao: fica acima da seção no celular para o título
   não ficar sob o cabeçalho fixo (o Elementor ignora scroll-margin) */
.bpg-ps__anchor {
  position: absolute;
  top: 0;
  left: 0;
}
.bpg-ps *,
.bpg-ps *::before,
.bpg-ps *::after,
.bpg-ps-lb,
.bpg-ps-lb *,
.bpg-ps-lb *::before,
.bpg-ps-lb *::after {
  box-sizing: border-box;
}
.bpg-ps-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* as duas partes da lista para leitor de tela são blocos: o Google traduz a frase e a lista de países
   (escrita pelo navegador no idioma escolhido) fica fora dele */
.bpg-ps-sr__bloco {
  display: block;
}
/* textura de "mapa pontilhado" só com CSS, sem imagem */
.bpg-ps::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 80% 0%, rgb(243 182 38 / 0.16), transparent 70%),
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.07) 1px, transparent 1.6px) 0 0 / 18px 18px;
  mask-image: linear-gradient(180deg, #000 40%, transparent);
  pointer-events: none;
}
.bpg-ps__wrap {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}
.bpg-ps__intro {
  text-align: center;
}
.bpg-ps__kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 20px;
  border-radius: 50px;
  background: var(--ps-gold);
  color: #000407;
  font: 600 16px/1 "Inter Tight", sans-serif;
  text-transform: uppercase;
}
.bpg-ps__title {
  margin: 0 auto;
  max-width: 28ch;
  font: 600 clamp(28px, 3vw, 38px) / 1.25 "Inter Tight", sans-serif;
  color: #fff;
  text-wrap: balance;
}
.bpg-ps__title em {
  font-style: normal;
  color: var(--ps-gold);
}
/* logo da BPG no fim do título, no lugar do nome (as letras BPG ficam na altura do texto) */
.bpg-ps .bpg-ps__title-logo { /* .bpg-ps na frente: vence o ".elementor img { height: auto }" */
  display: inline-block;
  width: auto;
  height: 1.7em;
  margin-left: 0.1em;
  vertical-align: -0.5em;
}
.bpg-ps__lead {
  margin: 18px auto 0;
  max-width: 62ch;
  font: 400 clamp(17px, 1.4vw, 19px) / 1.6 "Inter Tight", sans-serif;
  color: var(--ps-muted);
  text-wrap: pretty;
}

/* ---------- faixa de bandeiras ---------- */
.bpg-ps__ribbon {
  position: relative;
  margin: 40px 0 36px;
  overflow: hidden;
  border-block: 1px solid var(--ps-line);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 86%, transparent);
}
.bpg-ps__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  animation: bpg-ps-marquee 76s linear infinite;
}
.bpg-ps__ribbon:hover .bpg-ps__track,
.bpg-ps__ribbon:focus-within .bpg-ps__track,
.bpg-ps__ribbon[data-paused] .bpg-ps__track {
  animation-play-state: paused;
}
.bpg-ps__track li {
  display: flex;
  align-items: center;
  padding-inline: 8px;
  font: 600 15px/1 "Inter Tight", sans-serif;
  white-space: nowrap;
  color: var(--ps-text);
}
.bpg-ps .bpg-ps__track a,
.bpg-ps .bpg-ps__track span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 50px;
  color: inherit;
  text-decoration: none;
}
.bpg-ps .bpg-ps__track a {
  cursor: pointer;
  transition:
    background-color 0.3s var(--ps-ease),
    color 0.3s var(--ps-ease);
}
.bpg-ps .bpg-ps__track a:hover,
.bpg-ps .bpg-ps__track a:focus-visible {
  background: rgb(243 182 38 / 0.16);
  color: var(--ps-gold);
  outline: none;
}
.bpg-ps .bpg-ps__track a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ps-gold);
}
.bpg-ps__track img {
  width: 30px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15);
}
@keyframes bpg-ps-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- galeria internacional ---------- */
.bpg-ps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* altura proporcional à largura da coluna: cada card mantém o mesmo formato (1,35:1)
     em qualquer tela, então o enquadramento por rosto vale do tablet ao monitor grande */
  grid-auto-rows: calc((min(100vw - 32px, 1200px) - 28px) / 3 / 1.35);
  grid-auto-flow: dense;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bpg-ps__grid > .is-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.bpg-ps__grid > .is-wide {
  grid-column: span 2;
}
.bpg-ps__card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  background: var(--ps-card);
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  font: inherit;
  transition:
    transform 0.5s var(--ps-ease),
    border-color 0.5s var(--ps-ease);
}
.bpg-ps__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* enquadramento por foto, centrado nos rostos; o zoom do hover parte do mesmo ponto */
  object-position: var(--pos, 50% 50%);
  transform-origin: var(--pos, 50% 50%);
  transition: transform 0.8s var(--ps-ease);
}
.bpg-ps__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.86));
}
.bpg-ps__card:hover,
.bpg-ps__card:focus-visible {
  transform: translateY(-4px);
  border-color: rgb(243 182 38 / 0.6);
}
.bpg-ps__card:hover img,
.bpg-ps__card:focus-visible img {
  transform: scale(1.05);
}
.bpg-ps__card:focus-visible {
  outline: 2px solid var(--ps-gold);
  outline-offset: 3px;
}
.bpg-ps__grid > li.is-hit .bpg-ps__card {
  border-color: var(--ps-gold);
  box-shadow: 0 0 0 3px var(--ps-gold);
  animation: bpg-ps-hit 0.9s var(--ps-ease) 2;
}
@keyframes bpg-ps-hit {
  50% {
    box-shadow: 0 0 0 9px rgb(243 182 38 / 0.35);
  }
}
.bpg-ps__badge {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgb(5 6 8 / 0.72);
  backdrop-filter: blur(6px);
  font: 600 13px/1 "Inter Tight", sans-serif;
  color: #fff;
}
.bpg-ps__badge img {
  position: static;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  transform: none !important;
}
.bpg-ps__cap {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 14px;
  left: 14px;
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}
.bpg-ps__grid > .is-feature .bpg-ps__cap {
  font: 600 clamp(18px, 1.8vw, 24px) / 1.3 "Inter Tight", sans-serif;
}

/* ---------- chamada ---------- */
.bpg-ps__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding: 26px 28px;
  border: 1px solid rgb(243 182 38 / 0.35);
  border-radius: 20px;
  background: linear-gradient(120deg, rgb(243 182 38 / 0.14), rgb(243 182 38 / 0.02));
}
.bpg-ps__cta p {
  margin: 0;
  font: 600 clamp(19px, 2vw, 25px) / 1.3 "Inter Tight", sans-serif;
  color: var(--ps-text);
}
.bpg-ps__cta small {
  display: block;
  margin-top: 4px;
  font: 400 16px/1.5 "Inter Tight", sans-serif;
  color: var(--ps-muted);
}
.bpg-ps .bpg-ps__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 30px;
  border-radius: 12px;
  background: #ffca08;
  color: #000407 !important;
  font: 500 16px/1 Sora, sans-serif;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 20px 30px -6px rgb(255 202 8 / 0.46);
  transition: transform 0.3s var(--ps-ease);
}
.bpg-ps .bpg-ps__btn:hover {
  transform: translateY(-2px);
}
.bpg-ps .bpg-ps__btn svg {
  width: 20px;
  height: 20px;
}

/* ---------- Brasil: da origem ao embarque ---------- */
.bpg-ps--br {
  background: #0b0c0f;
}
.bpg-ps__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.bpg-ps__nav {
  display: flex;
  gap: 8px;
}
.bpg-ps__nav button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ps-line);
  border-radius: 50%;
  background: var(--ps-card);
  color: var(--ps-text);
  font-size: 20px;
  cursor: pointer;
  transition: border-color 0.3s var(--ps-ease);
}
.bpg-ps__nav button:hover {
  border-color: var(--ps-gold);
}
.bpg-ps__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 300px);
  gap: 14px;
  margin: 22px -8px 0;
  padding: 10px 8px 14px;
  scroll-padding-inline: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ps-gold) transparent;
  list-style: none;
}
.bpg-ps__rail > li {
  scroll-snap-align: start;
}
.bpg-ps__rail .bpg-ps__card {
  aspect-ratio: 4 / 5;
  min-height: 0;
}
.bpg-ps__tag {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  padding: 6px 14px;
  border-radius: 50px;
  background: var(--ps-gold);
  color: #000407;
  font: 600 13px/1 "Inter Tight", sans-serif;
  text-transform: uppercase;
}

/* ---------- lightbox ---------- */
.bpg-ps-lb {
  width: min(96vw, 1100px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.bpg-ps-lb::backdrop {
  background: rgb(0 0 0 / 0.82);
  backdrop-filter: blur(4px);
}
.bpg-ps-lb figure {
  margin: 0;
}
.bpg-ps-lb [hidden] {
  display: none !important;
}
.bpg-ps-lb figure > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(94vh - 76px);
  object-fit: contain;
  background: #000;
}
.bpg-ps-lb figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 16px 64px 16px 20px;
  font: 600 16px/1.35 "Inter Tight", sans-serif;
}
.bpg-ps-lb figcaption img {
  flex: none;
  width: 30px;
  height: 20px;
  border-radius: 3px;
}
.bpg-ps-lb__close,
.bpg-ps-lb__prev,
.bpg-ps-lb__next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.bpg-ps-lb__close {
  right: 14px;
  bottom: 15px;
}
.bpg-ps-lb__prev,
.bpg-ps-lb__next {
  top: calc(50% - 61px);
}
.bpg-ps-lb__prev {
  left: 12px;
}
.bpg-ps-lb__next {
  right: 12px;
}

/* ---------- entrada ao rolar (só com JS ativo) ---------- */
.bpg-ps-js .bpg-ps [data-ps-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.8s var(--ps-ease),
    transform 0.8s var(--ps-ease);
  transition-delay: var(--ps-d, 0ms);
}
.bpg-ps-js .bpg-ps [data-ps-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- responsivo ---------- */
@media (max-width: 720px) {
  .bpg-ps__anchor {
    top: -90px;
  }
  .bpg-ps__kicker {
    padding: 8px 16px;
    font-size: 13px;
  }
  .bpg-ps__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 46vw;
    gap: 10px;
  }
  .bpg-ps__card img {
    object-position: var(--pos-m, var(--pos, 50% 50%));
    transform-origin: var(--pos-m, var(--pos, 50% 50%));
  }
  /* fotos de grupo em paisagem ocupam a linha inteira no celular para ninguém ficar de fora */
  .bpg-ps__grid > .is-wide-m {
    grid-column: span 2;
  }
  .bpg-ps__card {
    min-height: 0;
    border-radius: 14px;
  }
  .bpg-ps__cap {
    font-size: 13px;
  }
  .bpg-ps__grid > li.is-hit .bpg-ps__card {
  border-color: var(--ps-gold);
  box-shadow: 0 0 0 3px var(--ps-gold);
  animation: bpg-ps-hit 0.9s var(--ps-ease) 2;
}
@keyframes bpg-ps-hit {
  50% {
    box-shadow: 0 0 0 9px rgb(243 182 38 / 0.35);
  }
}
.bpg-ps__badge {
    font-size: 12px;
  }
  .bpg-ps__nav {
    display: none;
  }
  .bpg-ps__rail {
    grid-auto-columns: 78%;
  }
  .bpg-ps-lb__close {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .bpg-ps-lb__prev,
  .bpg-ps-lb__next {
    top: calc(50% - 60px);
    width: 40px;
    height: 40px;
  }
  .bpg-ps-lb__prev {
    left: 8px;
  }
  .bpg-ps-lb__next {
    right: 8px;
  }
  .bpg-ps-lb figcaption {
    padding-right: 20px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bpg-ps__rail {
    scroll-behavior: auto;
  }
  .bpg-ps__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }
  .bpg-ps__track [aria-hidden="true"] {
    display: none;
  }
  .bpg-ps__card,
  .bpg-ps__card img,
  .bpg-ps .bpg-ps__btn {
    transition: none;
  }
  .bpg-ps-js .bpg-ps [data-ps-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bpg-ps__grid > li.is-hit .bpg-ps__card {
    animation: none;
  }
}

/* ---------- "Nossa História": foto real no quadrado da imagem original (enquadramento em fotos.json) ---------- */
.bpg-historia-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 58%;
}

/* ---------- foto inteira quando o recorte cortaria alguém: fundo com a mesma foto desfocada ---------- */
.bpg-ps__card.is-contain::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--bg) center / cover no-repeat;
  filter: blur(18px) brightness(0.55);
}
.bpg-ps__card.is-contain img {
  object-fit: contain;
}
@media (min-width: 721px) {
  .bpg-ps__card.is-contain-d::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--bg) center / cover no-repeat;
    filter: blur(18px) brightness(0.55);
  }
  .bpg-ps__card.is-contain-d img {
    object-fit: contain;
  }
}
@media (max-width: 720px) {
  .bpg-ps__card.is-contain-m::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--bg) center / cover no-repeat;
    filter: blur(18px) brightness(0.55);
  }
  .bpg-ps__card.is-contain-m img {
    object-fit: contain;
  }
}

/* ---------- Soluções: no celular a foto da Logística fica em cima, como no card ao lado ---------- */
@media (max-width: 767px) {
  .elementor-4029 .elementor-element.elementor-element-3ace49c > .elementor-element-f7e82bd {
    order: -1;
  }
}

/* ---------- topo (hero): logo, título e texto alinhados à esquerda ---------- */
.elementor-4029 .elementor-element.elementor-element-bc2885f.e-con {
  --align-items: flex-start;
}
.elementor-4029 .elementor-element.elementor-element-ada7863.elementor-element,
.elementor-4029 .elementor-element.elementor-element-0023bd5.elementor-element {
  --align-self: flex-start;
  align-self: flex-start;
}
.elementor-4029 .elementor-element.elementor-element-ada7863,
.elementor-4029 .elementor-element.elementor-element-ada7863 > .elementor-widget-container {
  text-align: left;
}
.elementor-4029 .elementor-element.elementor-element-0023bd5 .elementor-icon-box-wrapper,
.elementor-4029 .elementor-element.elementor-element-0023bd5 .elementor-icon-box-content {
  text-align: left;
}
@media (max-width: 767px) {
  .elementor-4029 .elementor-element.elementor-element-ada7863 img {
    width: 72%;
  }
}

/* ---------- topo: globo com os países onde a BPG tem clientes (globo.js) ---------- */
.bpg-globo {
  --g-gold: #f3b626;
  --g-gold-2: #ffca08;
  --g-text: #f5f3ee;
  --g-muted: #cfcac0;
  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  color: var(--g-text);
  font-family: "Inter Tight", sans-serif;
}
.bpg-globo *,
.bpg-globo *::before,
.bpg-globo *::after {
  box-sizing: border-box;
}
.bpg-globo__palco {
  position: relative;
  flex: none;
  aspect-ratio: 1 / 1;
}
/* navegador sem aspect-ratio (Safari até o 14): o palco ficava com altura 0 e o globo sumia.
   Nesses navegadores o inset também pode faltar, então as camadas recebem top/left */
@supports not (aspect-ratio: 1 / 1) {
  .bpg-globo__palco::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .bpg-globo__palco canvas,
  .bpg-globo__rotulos {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.bpg-globo__palco canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y pinch-zoom; /* no celular o dedo na vertical rola a página e a pinça dá zoom */
}
.bpg-globo.is-drag canvas {
  cursor: grabbing;
}
.bpg-globo__rotulos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* nome do país no globo; a posição (transform) vem do globo.js, que evita sobreposição.
   will-change: cada nome numa camada própria, que anda a cada quadro sem repintar a página
   (o globo.js alinha a posição ao pixel da tela, então o texto continua nítido) */
.bpg-globo__rotulo {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 5px;
  border: 1px solid rgb(243 182 38 / 0.5);
  border-radius: 999px;
  background: rgb(10 10 8 / 0.86);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.5);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  opacity: 0;
}
/* aparece suave e some na hora: dois nomes nunca ficam um por cima do outro */
.bpg-globo__rotulo.is-on {
  opacity: 1;
  transition: opacity 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}
.bpg-globo__rotulo.is-new {
  border-color: var(--g-gold-2);
  background: var(--g-gold-2);
  color: #111;
}
.bpg-globo__rotulo img {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  object-fit: cover;
}
.bpg-globo__check {
  flex: none;
  width: 15px;
  height: 15px;
}
/* com o JavaScript, o check verde só aparece quando o acordo fecha (depois do "carregando") */
.bpg-globo.is-js .bpg-globo__rotulo:not(.is-ok) .bpg-globo__check {
  opacity: 0;
  transform: scale(0.2);
}
/* tempos no ritmo do globo (VELOCIDADE 1,25 no globo.js: 0,25 s e 0,45 s divididos por 1,25) */
.bpg-globo.is-js .bpg-globo__rotulo .bpg-globo__check {
  transition: opacity 0.2s ease, transform 0.36s cubic-bezier(0.34, 1.8, 0.64, 1);
}
/* Brasil: selo redondo com o símbolo da BPG (fundo claro, como no cabeçalho, porque o símbolo tem partes pretas) */
.bpg-globo__rotulo.is-origem {
  padding: 3px;
  border: 2px solid var(--g-gold-2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(243 182 38 / 0.18), 0 8px 20px rgb(0 0 0 / 0.55);
}
.bpg-globo__rotulo.is-origem img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: contain;
}
/* dica de interação no alto do globo */
.bpg-globo__dica {
  position: absolute;
  top: 2px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgb(243 182 38 / 0.4);
  border-radius: 999px;
  background: rgb(10 10 8 / 0.8);
  color: var(--g-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 0.4s ease, transform 0.4s var(--g-ease);
}
.bpg-globo.is-dica .bpg-globo__dica {
  opacity: 1;
  transform: translate(-50%, 0);
}
.bpg-globo__dica svg {
  flex: none;
  color: var(--g-gold-2);
  animation: bpg-globo-vai-volta 1.4s ease-in-out 3;
}
.bpg-globo__dica-toque {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .bpg-globo__dica-mouse {
    display: none;
  }
  .bpg-globo__dica-toque {
    display: inline;
  }
}
@keyframes bpg-globo-vai-volta {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-3px);
  }
  70% {
    transform: translateX(3px);
  }
}
/* "Clientes ativos em 14 países" embaixo do globo */
.bpg-globo__clientes {
  text-align: center;
}
.bpg-globo__titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}
.bpg-globo__titulo strong {
  color: var(--g-gold-2);
  font-weight: 800;
}
.bpg-globo__titulo b {
  font-variant-numeric: tabular-nums;
}
html:not(.bpg-ps-js) .bpg-globo__palco {
  display: none;
}
.bpg-globo__nomes {
  display: none;
  max-width: 34em;
  margin: 8px auto 0;
  color: var(--g-muted);
  font-size: 13px;
  line-height: 1.5;
}
html:not(.bpg-ps-js) .bpg-globo__nomes {
  display: block;
}
@media (min-width: 1280px) {
  /* globo e clientes à direita do texto (o texto termina 572px depois do início do conteúdo) */
  .elementor-4029 .elementor-element.elementor-element-bc2885f > .e-con-inner {
    position: static;
  }
  .elementor-4029 .elementor-element.elementor-element-bc2885f > .e-con-inner > .elementor-element-ada7863,
  .elementor-4029 .elementor-element.elementor-element-bc2885f > .e-con-inner > .elementor-element-0023bd5,
  .elementor-4029 .elementor-element.elementor-element-bc2885f > .e-con-inner > .elementor-element-8c2d917 {
    position: relative;
    z-index: 1;
  }
  .bpg-globo {
    position: absolute;
    z-index: 2; /* acima da caixa do logo (1024px de largura, imagem de 502px), que cobria o globo */
    /* no alto do topo, centralizado na parte que aparece na tela (abaixo do cabeçalho) */
    top: clamp(24px, calc(50vh - 360px), 100px);
    right: max(24px, calc((100% - 1440px) / 2));
    left: calc(max(20px, (100% - 1140px) / 2) + 580px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bpg-globo__palco {
    /* em telas baixas o globo encolhe para caber com o título acima do botão fixo de cotação */
    width: min(540px, 100%, max(300px, 100vh - 280px));
  }
  .bpg-globo__clientes {
    margin-top: -34px;
  }
}
@media (max-width: 1279px) {
  /* abaixo do texto, centralizado */
  .bpg-globo {
    order: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 34px; /* embaixo: a faixa inclinada do Elementor no pé do topo não cobre o título */
  }
  .bpg-globo__palco {
    width: min(90vw, 480px);
  }
  .bpg-globo__clientes {
    margin-top: -26px;
  }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .bpg-globo {
    margin-bottom: 48px; /* nessa faixa a inclinação é mais alta */
  }
}
@media (max-width: 767px) {
  .bpg-globo__palco {
    width: min(94vw, 390px);
  }
  .bpg-globo__clientes {
    margin-top: -20px;
  }
  .bpg-globo__titulo {
    font-size: 19px;
  }
  .bpg-globo__rotulo {
    font-size: 10.5px;
  }
  .bpg-globo__rotulo.is-origem img {
    width: 28px;
    height: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bpg-globo__nomes {
    display: block;
  }
  .bpg-globo__rotulo,
  .bpg-globo__dica,
  .bpg-globo.is-js .bpg-globo__rotulo .bpg-globo__check {
    transition: none;
  }
  .bpg-globo__dica svg {
    animation: none;
  }
}

/* "Motivos": a fachada da BPG inteira, na proporção da foto (16:9, sem corte), com cantos arredondados;
   as colunas da seção (foto e lista) ficam no global.css, junto com as do /sobre-nos/ */
.elementor-4029 .elementor-element.elementor-element-8b20ebd img.bpg-motivos-foto {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 16px;
}

/* setas do carrossel "Da origem ao embarque": somem quando as fotos cabem na tela e apagam nas pontas */
.bpg-ps [data-ps-rail][hidden] {
  display: none;
}
.bpg-ps [data-ps-rail] button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* "Logística Internacional" sozinha na fileira de baixo: ocupa a largura toda no computador */
@media (min-width: 1025px) {
  .elementor-4029 .elementor-element.elementor-element-22382a2 > .elementor-element.elementor-element-3ace49c {
    --width: 100%;
    width: 100%;
  }
  /* texto, título e botão juntos no meio do card largo (antes o botão ia para o pé e sobrava um vão) */
  .elementor-4029 .elementor-element.elementor-element-22382a2 .elementor-element.elementor-element-2817afc {
    --justify-content: center;
    --align-items: center;
    --gap: 14px;
    --row-gap: 14px;
    --padding-left: 48px;
    --padding-right: 48px;
  }
  .elementor-4029 .elementor-element.elementor-element-22382a2 .elementor-element.elementor-element-7dd3c94 > .elementor-widget-container {
    padding-bottom: 0;
  }
  .elementor-4029 .elementor-element.elementor-element-22382a2 .elementor-element.elementor-element-01a42f3 {
    margin-top: 10px;
  }
  .elementor-4029 .elementor-element.elementor-element-22382a2 .elementor-element.elementor-element-5260da3 {
    --flex-grow: 0; /* o Elementor faz o texto crescer e empurrar o botão para o pé do card */
    flex-grow: 0;
    max-width: 560px;
    text-align: center;
  }
}
/* "Exportação de Açúcar" e "Expertise Técnica" do mesmo tamanho da "Logística Internacional":
   no computador, um card por linha com a foto inteira de um lado e o texto do outro, e as fotos alternando de lado
   (Exportação com a foto à direita, Expertise à esquerda, Logística à direita) */
@media (min-width: 1025px) {
  .elementor-4029 .elementor-element.elementor-element-253abe5 {
    --flex-direction: column;
    --gap: 20px;
    --row-gap: 20px;
  }
  .elementor-4029 .elementor-element.elementor-element-253abe5 > .elementor-element:is(.elementor-element-02dce86, .elementor-element-e17bce9) {
    --width: 100%;
    width: 100%;
  }
  .elementor-4029 .elementor-element.elementor-element-253abe5 > .elementor-element.elementor-element-02dce86 {
    --flex-direction: row-reverse;
  }
  .elementor-4029 .elementor-element.elementor-element-253abe5 > .elementor-element.elementor-element-e17bce9 {
    --flex-direction: row;
  }
  .elementor-4029 .elementor-element.elementor-element-253abe5 .elementor-element:is(.elementor-element-0dd3e3f, .elementor-element-f791f5b) {
    --justify-content: center;
    --align-items: center;
    --gap: 14px;
    --row-gap: 14px;
    --padding-left: 48px;
    --padding-right: 48px;
  }
  .elementor-4029 .elementor-element.elementor-element-253abe5 .elementor-element:is(.elementor-element-0c0159e, .elementor-element-c3fcabf) > .elementor-widget-container {
    padding-bottom: 0;
  }
  .elementor-4029 .elementor-element.elementor-element-253abe5 .elementor-element:is(.elementor-element-8835010, .elementor-element-d7f899b) {
    margin-top: 10px;
  }
  .elementor-4029 .elementor-element.elementor-element-253abe5 .elementor-element:is(.elementor-element-00d11a0, .elementor-element-c9deaff) {
    --flex-grow: 0;
    flex-grow: 0;
    max-width: 560px;
    text-align: center;
  }
  /* traduzido, o texto dos três cards fica no meio como em português (a regra "start" é do tablet) */
  html.translated-ltr .elementor-4029 .elementor-element:is(.elementor-element-00d11a0, .elementor-element-c9deaff, .elementor-element-5260da3) p {
    text-align: center;
  }
}
/* Soluções (Exportação, Expertise e Logística): as fotos aparecem inteiras, sem corte.
   Do tablet para cima, os três cards têm a mesma altura; cada foto fica com a largura que a proporção
   dela pede (a do Luis com a saca é 9:16, as outras duas 3:4) e o texto ocupa o resto do card.
   No celular, a foto vai em cima, na largura do card e na altura da proporção dela. */
.elementor-4029 :is(.elementor-element-253abe5, .elementor-element-22382a2) {
  --bpg-sol-foto-h: clamp(400px, 44vw, 460px);
}
@media (min-width: 1025px) {
  .elementor-4029 :is(.elementor-element-253abe5, .elementor-element-22382a2) {
    --bpg-sol-foto-h: clamp(480px, 40vw, 560px);
  }
}
@media (min-width: 768px) {
  .elementor-4029 .e-con > .elementor-element:is(.elementor-element-f007e1a, .elementor-element-cbd6ef5, .elementor-element-f7e82bd) {
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    /* se o texto ficar mais alto que a foto (tradução longa, tablet estreito), a foto fica no meio
       da coluna em vez de deixar um vão só embaixo */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* o Elementor põe height: 100% no .elementor-widget-container; sem isto ele ocupa a coluna toda e não há o que centralizar */
  .elementor-4029 .e-con > .elementor-element:is(.elementor-element-f007e1a, .elementor-element-cbd6ef5, .elementor-element-f7e82bd) > .elementor-widget-container {
    height: auto;
  }
  .elementor-4029 .e-con > .elementor-element:is(.elementor-element-f007e1a, .elementor-element-cbd6ef5, .elementor-element-f7e82bd) img {
    display: block;
    width: auto;
    max-width: none;
    height: var(--bpg-sol-foto-h);
    object-fit: contain;
  }
  .elementor-4029 .e-con > .elementor-element:is(.elementor-element-0dd3e3f, .elementor-element-f791f5b, .elementor-element-2817afc) {
    --width: auto;
    --flex-grow: 1;
    --flex-basis: 0;
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .elementor-4029 .e-con > .elementor-element:is(.elementor-element-f007e1a, .elementor-element-cbd6ef5, .elementor-element-f7e82bd) img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}