/* Section "Transparência e segurança" — Figma: "Frame 31" (desktop) e "Como funciona" (mobile).
   Desktop: cabeçalho centralizado + 3 cards empilhados. Mobile: pílula + 3 passos com imagem. */

.transparency {
  padding-block: 40px 48px;
}

.transparency__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Cabeçalho */
.transparency__header {
  display: flex;
  flex-direction: column;
}

/* Mobile: só a pílula aparece. Título e descrição são do desktop; o título continua no
   documento (invisível) para manter a ordem de títulos da página. */
.transparency__eyebrow {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--verde-30);
  border-radius: 999px;
  background: var(--verde-10);
  color: var(--verde-90);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.transparency__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.transparency__lead,
.transparency__cards {
  display: none;
}

/* Mobile: passos */
.steps {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 600px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step__image {
  position: relative;
  aspect-ratio: 335 / 200;
  overflow: hidden;
  border-radius: 20px;
}

/* Selo do passo (Figma: 44px, a 16px do canto). As imagens dos passos 1 e 2 vêm sem o selo;
   a do passo 3 ainda traz o selo "03" desenhado dentro da imagem. */
.step__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--neutra-10);
  color: var(--texto-destaque);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.step__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step__title {
  color: var(--texto-titulo);
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}

.step__title--large {
  font-size: 28px; /* Figma: o passo 03 usa Heading 2 (28/36) */
  line-height: 36px;
}

.step__body {
  color: var(--texto-hero-corpo);
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Mobile: os 3 passos se empilham pelo scroll com a mesma lógica do desktop (js/card-stack.js adiciona .is-pinned
   e --stack-h = altura do maior passo): cada passo gruda centralizado na janela e o seguinte sobe e passa por cima.
   O passo ganha fundo, cantos arredondados e uma sombra suave só no topo, para a borda de quem passa por cima
   aparecer; o conteúdo interno não muda. Sem a classe (sem JS, "reduzir movimento" ou tela baixa) tudo fica em fluxo. */
.steps.is-pinned .step {
  position: sticky;
  top: max(16px, calc((100vh - var(--stack-h)) / 2));
  min-height: var(--stack-h);
  border-radius: 20px;
  background: var(--fundo-superficie);
  box-shadow: 0 -10px 24px -10px rgb(27 46 81 / 0.16);
  transform-origin: 50% 0;
  will-change: transform;
}

@supports (height: 100svh) {
  .steps.is-pinned .step {
    top: max(16px, calc((100svh - var(--stack-h)) / 2));
  }
}

/* Desktop (≥ 1200px, o frame do Figma). Abaixo disso a section usa a composição mobile.
   Mesma unidade --u do Hero: 1 unidade = 1px no frame de 1200px do Figma. Os cards ocupam
   100% do container e nunca ficam menores que o Figma (fator ≥ 1). */
@media (min-width: 1200px) {
  .transparency {
    padding-block: 28px 119px; /* Figma: 28px após a faixa de logos, 119px até a próxima section */
  }

  .transparency__inner {
    container-type: inline-size;
    gap: 0;
  }

  .transparency__header,
  .transparency__cards {
    --u: 1px;
  }

  /* Escala só pela largura do container (sem o crescimento extra do Hero): os cards já ocupam
     100% do container, então qualquer fator acima disso faria o texto do card quebrar de outro jeito. */
  @supports (width: 1cqw) {
    .transparency__header {
      --u: calc(100cqw / 1104);
    }

    /* No Figma os cards têm 1124px, mas o container tem 1104px. Escalar o interior do card por
       1104/1124 mantém a composição e as quebras de linha do Figma dentro da largura do container. */
    .transparency__cards {
      --u: calc(100cqw / 1124);
    }
  }

  .transparency__header {
    align-items: center;
    gap: calc(14 * var(--u));
    margin-bottom: calc(32 * var(--u));
    text-align: center;
  }

  .transparency__eyebrow {
    align-self: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: calc(14 * var(--u));
  }

  .transparency__title {
    position: static;
    width: auto;
    max-width: calc(539 * var(--u));
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: var(--texto-hero-titulo);
    font-family: var(--fonte-titulo);
    font-size: calc(48 * var(--u));
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  .transparency__lead {
    display: block;
    max-width: calc(556 * var(--u));
    margin-top: calc(2 * var(--u)); /* título → descrição: 16u no Figma, 14u de gap + 2u */
    color: var(--texto-hero-corpo);
    font-size: calc(20 * var(--u));
    line-height: 1.5;
  }

  .steps {
    display: none;
  }

  .transparency__cards {
    --card-h: calc(620 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(64 * var(--u));
  }

  /* Cards empilhados pelo scroll (js/card-stack.js adiciona .is-pinned).
     Sem a classe (sem JS, "reduzir movimento" ou janela baixa demais) os 3 cards ficam em fluxo
     normal, exatamente como no Figma. Com ela, cada card gruda na mesma altura e o seguinte, que
     já está na posição do Figma logo abaixo, sobe com o scroll e passa por cima do anterior:
     posição = progresso do scroll, sem animação por tempo e sem cards duplicados.
     O card de trás encolhe um pouco (transform, feito no JS) para dar a ideia de "ficou para trás". */
  .transparency__cards.is-pinned .t-card {
    position: sticky;
    top: calc((100vh - var(--card-h)) / 2); /* card centralizado na janela (negativo se o card for mais alto) */
    transform-origin: 50% 0;
    will-change: transform;
  }
}

/* Card desktop */
.t-card {
  display: flex;
  align-items: center;
  gap: calc(56 * var(--u));
  height: var(--card-h);
  padding: calc(32 * var(--u) - 2px) calc(56 * var(--u) - 2px) calc(32 * var(--u) - 2px) calc(32 * var(--u) - 2px);
  border: 2px solid var(--borda-padrao); /* no Figma a borda é interna e não ocupa espaço */
  border-radius: calc(32 * var(--u));
  background: var(--fundo-pagina);
  box-shadow: var(--sombra-card);
  overflow: clip;
}

.t-card__visual {
  flex: none;
  width: calc(508 * var(--u));
  height: calc(556 * var(--u));
  overflow: hidden;
  border-radius: calc(24 * var(--u)); /* raio/grande */
}

.t-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.t-card__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 1px;
  height: calc(552 * var(--u));
  padding-top: calc(38 * var(--u)); /* espaçadores de 16u + 16u do Figma */
  overflow: clip;
}

.t-card__text {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  overflow-wrap: break-word;
}

.t-card__heading {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.t-card__eyebrow {
  color: var(--texto-destaque);
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: calc(20 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t-card__title {
  color: var(--texto-titulo);
  font-family: var(--fonte-titulo);
  font-size: calc(32 * var(--u));
  font-weight: 600;
  line-height: calc(40 * var(--u));
  letter-spacing: -0.005em;
}

.t-card__body {
  color: var(--texto-corpo);
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
}

.t-list {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.t-list__item {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--texto-titulo);
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: calc(26 * var(--u));
}

.t-list__icon {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.t-list__number {
  color: var(--texto-destaque);
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: calc(24 * var(--u));
}

.t-card__note {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--verde-30);
  border-radius: calc(12 * var(--u));
  background: var(--verde-10);
  color: var(--texto-corpo);
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
}

.t-card__note img {
  flex: none;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.t-card__note p {
  flex: 1 0 0;
  min-width: 1px;
  overflow-wrap: break-word;
}