/* Credibilidade — 2 colunas acima de 900px, 1 coluna abaixo (breakpoint aprovado) */

.credibilidade-wrap {
  background: var(--bg-section);
}

.credibilidade {
  position: relative;
  background: var(--bg-section);
  /* Só os cantos superiores — suaviza a junção Manutenção → Credibilidade
     sem virar um shell completo. Mesmo token de raio dos grandes shells
     do site (Equipamentos, Manutenção). box-shadow segue automaticamente
     essa geometria assimétrica (raio só em cima, reto embaixo). */
  border-top-left-radius: var(--radius-shell);
  border-top-right-radius: var(--radius-shell);
  box-shadow: var(--shadow-shell-elevated);
}

.credibilidade__grid {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  /* padding = var(--gutter) nos 4 lados: alinha a borda externa esquerda da
     coluna visual e a borda externa direita do card verde exatamente às
     linhas estruturais globais (mesmo gutter usado no resto do site). */
  padding: var(--gutter);
  box-sizing: border-box;
  display: grid;
  /* ~52% coluna visual (foto/formulário) / ~48% card institucional */
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(32px, 3vw, 48px);
  align-items: stretch;
}

/*
  Acima de 900px (breakpoint aprovado, inalterado): inverte apenas a posição
  VISUAL das colunas via CSS order — a ordem do DOM continua
  [card verde, coluna visual], que é exatamente a ordem correta para mobile
  (abaixo de 900px, sem order, a pilha segue o DOM: verde → foto → form).
  Nenhum elemento focável existe dentro do card verde, então este order não
  afeta navegação por teclado/leitor de tela.
*/
@media (min-width: 900.02px) {
  .credibilidade__side {
    order: 1;
  }
  .credibilidade__card {
    order: 2;
  }
}

@media (max-width: 900px) {
  .credibilidade__grid {
    grid-template-columns: 1fr;
  }
}

.credibilidade__card {
  box-sizing: border-box;
  height: 100%;
  background: var(--green);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.credibilidade__card .section-eyebrow {
  margin-bottom: 22px;
}

.credibilidade__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: pretty;
}

.credibilidade__text {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 480px;
  text-wrap: pretty;
}

.credibilidade__card p.credibilidade__text:last-of-type {
  margin-bottom: 18px;
}

/* Credencial institucional curta — mesma linguagem mono/uppercase dos
   eyebrows, mas discreta (sem dot, sem competir com o eyebrow do topo). */
.credibilidade__credential {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* alpha ajustado de 0.72 -> 0.765 para contraste WCAG AA (axe-core,
     2026-09-29) — ajuste discreto, mantém o mesmo branco translúcido. */
  color: rgba(255, 255, 255, 0.765);
}

.credibilidade__side {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

.credibilidade__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 638 / 540;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.credibilidade__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}