/* Quem somos calibrated against Zeplin screen 6a9ef4e4dd72207673fabbf9 (1440 × 7398 CSS px). */
body.air-page-about {
  --air-navy: #202f38;
  --air-teal: #0f8080;
  --air-mint: #c3d3ce;
  --air-orange: #ed7317;
  --container: 1204px;
  color: #202f38;
  font-family: 'area-normal', Arial, sans-serif;
}
body.air-page-about .air-container { width: min(calc(100% - 48px), 1204px); }
body.air-page-about .air-designed { overflow: hidden; }

body.air-page-about .air-nav__menu > li > a { font-family: 'area-normal', Arial, sans-serif; font-size: 10px; font-weight: 500; padding: 10px 12px; }

body.air-page-about :where(h1, h2, h3, p) { margin: 0; }
body.air-page-about :where(h1, h2, h3) { font-family: 'area-normal', Arial, sans-serif; }
.about-head h1 {
  display: block;
  width: 86.21%;
  transform: scaleX(1.16);
  transform-origin: left top;
}
.about-partners h2 {
  display: block;
  width: 71.84%;
  transform: scaleX(1.392);
  transform-origin: left top;
}
.about-head { height: 348px; padding-top: 24px; color: #fff; background: #202f38; }
/* Mesmo padrao de breadcrumb das demais paginas internas (shared-zeplin.css):
   area-normal 10px italico em #c3d3ce, com a pagina atual em 900. */
.about-breadcrumb { margin-bottom: 79px; font-family: 'area-normal', Arial, sans-serif; font-size: 10px; font-weight: 400; font-style: italic; line-height: normal; color: #c3d3ce; }
.about-breadcrumb strong { font-weight: 900; }
.about-head span { display: block; margin-bottom: 27px; font-size: 12px; font-weight: 700; letter-spacing: 2.7px; }
.about-head h1 { color: #0f8080; font-family: 'area-extended', Arial, sans-serif; font-size: 40px; font-weight: 900; line-height: 1.12; }
.about-hero { display: block; width: 100%; height: 633px; object-fit: cover; }

.about-intro { position: relative; height: 604px; padding-top: 81px; background: #fff url('../images/about/wave-teal.png') center bottom / 100% 222px no-repeat; }
.about-intro__grid { display: grid; grid-template-columns: 545px 564px; gap: 95px; align-items: start; }
.about-intro h2 { font-family: 'area-extended', Arial, sans-serif; font-size: 30px; font-weight: 400; line-height: 1.33; color: #202f38; }
.about-intro h2 strong { font-weight: 900; }
.about-intro blockquote { width: 545px; margin: 61px 0 0; font-family: 'area-normal', Arial, sans-serif; font-size: 21px; font-weight: 400; font-style: italic; line-height: 1.57; color: #0f8080; }
.about-intro blockquote small { display: block; margin-top: 33px; font-family: 'area-normal', Arial, sans-serif; font-size: 14px; font-weight: 400; font-style: italic; line-height: 1.29; color: #202f38; }
.about-intro blockquote small strong { font-weight: 700; }
.about-intro__copy { padding-top: 1px; }
.about-intro__copy p { margin-bottom: 24px; font-family: 'area-normal', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: #202f38; }

.about-history { position: relative; height: 728px; padding-top: 81px; color: #fff; background: #202f38; }
.about-history__wave { position: absolute; left: 0; top: 286px; width: 100%; height: 222px; object-fit: fill; opacity: 1; }
.about-history .air-container { position: relative; z-index: 1; }
.about-history h2 { font-family: 'area-extended', Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.5; color: #0f8080; }
.about-history > div > p { margin-top: 12px; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.56; color: #fff; }
.about-years__viewport { position: relative; margin-top: 51px; }
/* Goteiras de 80px dos dois lados: 3 cards visiveis (3x328 + 2x30 = 1044) e as
   setas centradas nas goteiras, fora dos cards. */
.about-years { display: flex; gap: 30px; margin: 0 80px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.about-years::-webkit-scrollbar { display: none; }
.about-years article { flex: 0 0 328px; height: 415px; padding: 60px 45px 37px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(15,128,128,.35); border-radius: 12px; background: #202f38; box-shadow: 0 7px 18px rgba(0,0,0,.2); transition: border-color var(--transition), box-shadow var(--transition); }
.about-years small { font-family: 'area-normal', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.75; color: #fff; }
/* Zeplin manda `line-height: normal` com H: 81px; a area-extended rende `normal`
   bem mais alto no navegador, entao fixamos 1.2 (67 x 1.2 = 80.4px do design). */
.about-years b { font-family: 'area-extended', Arial, sans-serif; font-size: 67px; font-weight: 700; line-height: 1.2; color: #384248; }
/* Estados do Zeplin: inativo = ano em cinza; ativo = ano em laranja + borda teal. */
.about-years article.is-active { border-color: #0f8080; box-shadow: 0 7px 18px rgba(0,0,0,.3); }
.about-years article.is-active b { color: #ed7317; }

/* Setas do carrossel, sobrepostas ao trilho e alinhadas as bordas do container. */
.about-years__controls { position: absolute; inset: 0 26px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.about-years__controls strong { display: none; }
/* A seta e um SVG com o traco centrado no viewBox (x e y de 6 a 10 em 16), em vez
   do glifo tipografico < >, cuja tinta subia em relacao a caixa da fonte e ficava
   descentralizada no circulo. */
.about-years__controls button { pointer-events: auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #ed7317; border-radius: 50%; background: transparent; color: #ed7317; font-size: 0; line-height: 0; cursor: pointer; transition: background var(--transition), color var(--transition); }
.about-years__controls button svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.about-years__controls button:hover { background: #ed7317; color: #202f38; }

.about-solutions { height: 790px; padding-top: 118px; background: #fff; }
.about-solutions h2 { font-family: 'area-extended', Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.5; color: #0f8080; }
.about-solutions > div > p { margin-top: 12px; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.56; color: #202f38; }
.about-solutions__grid { display: grid; grid-template-columns: repeat(3, 380px); gap: 32px; margin-top: 36px; }
/* Card do Zeplin: 416x482 com a imagem de 380 recuada 18px. A margem negativa
   devolve a largura externa a 380px, entao o ritmo do grid nao muda e o painel
   de hover sobra 18px para fora do conteudo. */
.about-solutions__grid article { position: relative; width: 416px; padding: 18px; margin: -18px; border-radius: 20px; transition: background var(--transition); }
.about-solutions__grid article:hover { background: #e8ecea; }
.about-solutions__grid img { display: block; width: 380px; height: 300px; object-fit: cover; border-radius: 20px; }
.about-solutions__grid h3 { margin-top: 20px; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 900; line-height: 1.56; color: #202f38; }
.about-solutions__grid p { width: 309px; margin-top: 12px; font-family: 'area-normal', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: #202f38; }
.about-solutions__grid a { display: inline-block; margin-top: 20px; font-family: 'area-normal', Arial, sans-serif; font-size: 10px; font-weight: 900; line-height: 1.2; color: #ed7317; opacity: .46; transition: opacity var(--transition); }
.about-solutions__grid article:hover a { opacity: 1; }
/* O link do CTA cobre o card inteiro (imagem, texto e o proprio CTA), entao o
   clique vale em qualquer ponto sem precisar de um segundo <a> aninhado. */
.about-solutions__grid a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }

.about-global { height: 760px; padding-top: 48px; background-position: center; background-size: cover; }
/* Zeplin Rectangle 1151: 614x653, padding 37/46/38, raio 17, borda 2px #c3d3ce,
   fundo #0f1d26 a 95% e sombra 0 3px 6px rgba(0,0,0,.16). */
.about-global article { width: 614px; min-height: 653px; margin-left: 344px; padding: 35px 44px 36px; color: #fff; border: 2px solid #c3d3ce; border-radius: 17px; background: rgba(15,29,38,.95); box-shadow: 0 3px 6px rgba(0,0,0,.16); }
.about-global article > span { display: block; margin-bottom: 25px; font-family: 'area-normal', Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 2; letter-spacing: 2.8px; color: #fff; }
.about-global h2 { margin: 0 0 26px; font-family: 'area-extended', Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.5; color: #0f8080; }
.about-global article > p { margin: 0 0 24px; font-family: 'area-normal', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: #fff; }
.about-global article > p:last-of-type { margin-bottom: 28px; }
.about-countries { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 0; }
.about-countries b { display: block; margin-bottom: 16px; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 900; line-height: 1.56; color: #c3d3ce; }
.about-countries p { margin-top: 0; font-family: 'area-normal', Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; color: #fff; }
.about-countries strong { font-weight: 900; }

.about-china { height: 788px; padding-top: 76px; background: #c3d3ce; }
.about-china__grid { display: grid; grid-template-columns: 530px 515px; gap: 88px; }
.about-china__grid > div:first-child { padding-top: 0; }
.about-china h2 { margin: 18px 0 20px; font-family: 'area-extended', Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.5; color: #0f8080; }
.about-china p { margin: 0 0 48px; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 900; line-height: 1.56; color: #202f38; }
.about-china ul { margin: 0; padding: 0; list-style: none; }
.about-china li { margin: 0; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 2; color: #202f38; }
.about-china li::before { content: '• '; }
.about-china__photos { display: grid; width: 515px; gap: 33px; margin-top: 0; }
/* Os PNGs do Zeplin ja trazem a sombra e os cantos arredondados embutidos:
   sao 569px de arquivo para 515px de foto, com 24px de folga em cima/esquerda
   e 30px embaixo/direita. Exibir a 515px encolhia tudo e o halo da sombra
   virava uma "borda". Aqui a imagem vai no tamanho natural e a margem negativa
   devolve a foto ao slot de 515px - sem radius e sem box-shadow no CSS. */
.about-china__photos img { display: block; width: auto; max-width: none; height: auto; margin: -24px -30px -30px -24px; border-radius: 0; box-shadow: none; }

.about-partners { height: 590px; padding-top: 82px; background: #0f8080; }
.about-partners h2 { font-family: 'area-extended', Arial, sans-serif; font-size: 20px; font-weight: 900; line-height: 1.25; color: #202f38; }
.about-partners__grid { display: grid; grid-template-columns: repeat(2, 586px); gap: 32px; margin-top: 76px; }
.about-partners article { display: grid; grid-template-columns: 293px 293px; height: 293px; overflow: hidden; border-radius: 13px; box-shadow: 0 5px 12px rgba(0,0,0,.15); }
.about-partners article > div { display: grid; place-items: center; background: #fff; }
.about-partners article img { display: block; width: 293px; height: 128px; object-fit: contain; }
.about-partners article p { display: flex; align-items: center; padding: 39px; background: #c3d3ce; font-size: 12px; font-weight: 600; line-height: 1.5; }

.about-clients { height: 1575px; padding-top: 76px; background: #fff; scroll-margin-top: 100px; }
.about-clients h2 { font-family: 'area-extended', Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.5; color: #0f8080; }
/* Component 69-59 do Zeplin: titulo + subtitulo somam 65px, sem folga entre eles. */
.about-clients > div > p { margin-top: 0; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.56; color: #202f38; }
.about-clients h3 { width: auto; margin: 42px 0; font-family: 'area-normal', Arial, sans-serif; font-size: 18px; font-weight: 900; line-height: 1.56; color: #202f38; transform: none; }
.about-logo-grid { display: grid; grid-template-columns: repeat(4, 277px); grid-auto-rows: 120px; column-gap: 32px; row-gap: 18px; margin-top: 0; }
.about-logo-grid img { display: block; width: 277px; height: 120px; object-fit: contain; }
.about-client-divider { height: 1px; margin: 79px 0 0; background: #a9b5b7; }
.about-client-divider + h3 { margin-top: 42px; }
.about-logo-grid--international { margin-top: 10px; row-gap: 26px; }
.about-logo-grid--international img {
  width: auto;
  height: auto;
  max-width: 277px;
  max-height: 120px;
  place-self: center;
}

/* Keep the 1440px Zeplin composition proportional on narrower desktop windows. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about-years {
    margin: 0;
  }
  .about-years article { flex: 0 0 calc((100% - 60px) / 3); }
  .about-years__controls { inset: 0 -4px; }
  .about-solutions__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .about-solutions__grid article { width: auto; margin: 0; padding: 12px; }
  .about-solutions__grid img { width: 100%; }
  .about-solutions__grid img { height: auto; aspect-ratio: 380 / 300; }
  .about-global article { width: 100%; max-width: 614px; margin-inline: auto; }
  .about-china__grid {
    grid-template-columns: minmax(0, .91fr) minmax(0, 1fr);
    gap: 40px;
  }
  .about-china__photos img { width: 100%; margin: 0; }
  .about-partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .about-partners article {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-partners article img { width: 100%; height: auto; max-width: 293px; }
  .about-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
  }
  .about-logo-grid:not(.about-logo-grid--international) img {
    width: 100%;
    height: auto;
    max-height: 120px;
    place-self: center;
  }
}

@media (max-width: 1023px) {
  .about-head,.about-intro,.about-history,.about-solutions,.about-global,.about-china,.about-partners,.about-clients { height: auto; min-height: 0; }
  .about-intro,.about-history,.about-solutions,.about-china,.about-partners,.about-clients { padding: 70px 0; }
  .about-intro__grid,.about-china__grid { grid-template-columns: 1fr 1fr; gap: 45px; }
  .about-intro blockquote,.about-intro__grid > div,.about-china__grid > div { width: auto; }
  .about-years { margin: 0; }
  .about-years article { flex: 0 0 calc((100% - 60px) / 3); }
  .about-solutions__grid { grid-template-columns: repeat(3,1fr); gap: 20px; }
  .about-solutions__grid article { width: auto; margin: 0; padding: 12px; }
  .about-solutions__grid img { width: 100%; height: auto; }
  .about-global { padding: 48px 0; }
  .about-global article { margin: 0 auto; }
  .about-china__photos { width: 100%; margin-top: 0; }
  .about-china__photos img { width: 100%; margin: 0; }
  .about-partners__grid { grid-template-columns: 1fr; }
  .about-partners article { width: 100%; grid-template-columns: 1fr 1fr; }
  .about-logo-grid { grid-template-columns: repeat(4,1fr); }
  .about-logo-grid img { width: 100%; }
  .about-logo-grid--international img { width: auto; max-width: 100%; }
}

@media (max-width: 767px) {
  body.air-page-about .air-designed .air-container { width: calc(100% - 32px); }
  body.air-page-about .air-header .air-container { width: calc(100% - 32px); }
  body.air-page-about .air-mobile-nav { top: 50px; }
  .about-head { height: 322px; min-height: 322px; padding: 20px 0 0; }
  .about-breadcrumb { margin-bottom: 48px; }
  .about-head h1 { font-size: 30px; }
  .about-hero { height: 471px; object-fit: fill; object-position: center; }

  .about-intro { height: 1245px; min-height: 1245px; padding: 42px 0 0; background-size: auto 111px; }
  .about-intro__grid { display: flex; flex-direction: column; gap: 0; }
  .about-intro__grid > div:first-child { display: contents; }
  .about-intro h2 { font-size: 26px; }
  .about-intro__copy { order: 2; margin-top: 42px; padding: 0; }
  .about-intro__copy p { margin-bottom: 24px; }
  .about-intro blockquote { order: 3; width: 100%; margin: 38px 0 0; }

  .about-history { height: 722px; min-height: 722px; padding: 42px 0 0; overflow: hidden; }
  .about-history__wave { top: 380px; height: 111px; }
  .about-history > div > p { margin-top: 12px; }
  .about-years__viewport { width: calc(100% - 30px); margin: 51px 0 0 15px; }
  .about-years { gap: 20px; margin: 0; }
  .about-years article { flex: 0 0 100%; min-width: 100%; height: 415px; }
  /* Controles voltam ao fluxo, abaixo do trilho, com o contador visivel. */
  .about-years__controls { position: static; inset: auto; width: 220px; margin: 30px auto 0; pointer-events: auto; }
  .about-years__controls strong { display: block; color: #fff; font-size: 16px; line-height: 1; }

  .about-solutions { height: 1604px; min-height: 1604px; padding: 52px 0 0; }
  .about-solutions__grid { grid-template-columns: 1fr; gap: 65px; margin-top: 51px; }
  .about-solutions__grid img { width: 100%; height: auto; aspect-ratio: 380 / 300; object-fit: cover; }

  .about-global { height: 1236px; min-height: 1236px; padding: 100px 0 0; background-color: #202f38; background-position: center top; background-size: 100% auto; background-repeat: no-repeat; }
  .about-global article { width: 100%; min-height: 1078px; margin: 0; padding: 36px 25px 32px; }
  .about-global h2 { font-size: 20px; }
  .about-countries { grid-template-columns: 1fr; }

  .about-china { display: none; }

  .about-partners { height: 682px; min-height: 682px; padding: 50px 0 0; }
  .about-partners__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 47px; }
  .about-partners article { grid-template-columns: 1fr 1fr; height: 199px; }
  .about-partners article img { width: 100%; height: 128px; }
  .about-partners article p { min-height: 0; padding: 19px; }

  .about-clients { height: 2694px; min-height: 2694px; padding: 53px 0 0; }
  .about-clients h3 { width: 100%; margin-top: 36px; transform: none; }
  .about-logo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 120px; column-gap: 20px; row-gap: 30px; margin-top: 30px; }
  .about-logo-grid img { width: 100%; height: 120px; object-fit: contain; }
  .about-client-divider { margin-top: 50px; }
  .about-client-divider + h3 { margin-top: 42px; }
  .about-logo-grid--international { margin-top: 30px; row-gap: 30px; }
  .about-logo-grid--international img { width: 100%; height: 120px; max-width: 100%; max-height: 120px; }

  body.air-page-about .air-footer { height: 1186px; min-height: 1186px; }
  body.air-page-about .air-footer > .air-container { height: 1141px; }
}

/* ============================================================
   Sobre — mobile (<= 767px)

   1. Alturas fixas do Zeplin viram piso. `.about-solutions` tinha
      1604px para 1673px de conteudo: as 69px que sobravam vazavam
      para dentro da secao seguinte, e era o texto de "Manutencao
      Embarcada" aparecendo por cima do mapa. Com `min-height`, a
      secao cresce e nada invade a vizinha.

   2. O card de "Presenca Global" comecava a 100px do topo, mas o
      mapa renderiza 207px de altura em uma tela de 393px — ou
      seja, o Brasil ficava escondido atras do card. O padding
      passa a acompanhar a proporcao da imagem (760/1440 = 52.8%
      da largura), entao o mapa aparece inteiro em qualquer
      aparelho, com Brasil e China visiveis.

   3. `.about-clients` reservava 2694px para um conteudo que
      terminava 204px antes do fim. A altura passa a ser a do
      conteudo, com respiro no rodape da secao.
   ============================================================ */
@media (max-width: 767px) {
  .about-head,
  .about-intro,
  .about-history,
  .about-solutions,
  .about-global,
  .about-partners,
  .about-clients { height: auto; max-height: none; }

  .about-global {
    /* 760/1440 = altura do mapa como proporcao da largura */
    padding-top: 52.8%;
    min-height: 0;
  }
  .about-global article { min-height: 0; }

  .about-clients {
    min-height: 0;
    padding-bottom: 70px;
  }

  /* 4. O respiro no fim de cada secao vinha da altura fixa: o conteudo
        terminava antes do fim da caixa e a sobra virava o espaco ate a
        secao seguinte. Com a altura passando a acompanhar o conteudo,
        esse espaco precisa ser declarado — senao o card de "Presenca
        Global" encosta direto na faixa de "Parceiros".
        Enquanto o conteudo couber no `min-height` do Zeplin, o padding
        fica dentro da caixa e nada muda de altura (box-sizing: border-box).

        Vale so para as duas secoes que perderam o respiro por terem
        conteudo maior que o `min-height`. `.about-intro`, `.about-history`
        e `.about-partners` continuam cabendo na altura do Zeplin e
        mantem o espaco original — nao levam padding para nao mudarem
        de altura. */
  .about-solutions,
  .about-global { padding-bottom: 70px; }
}