/* Sobre nós (página 42 do original). */

@layer pages {
  .sobre-quem .numeros {
    max-width: 95%;
    margin-top: 24px;
  }

  /* Original a 390px: números na largura total, 39px abaixo do texto. */
  @media (max-width: 767px) {
    .sobre-quem .numeros {
      max-width: none;
      margin-top: 39px;
    }
  }

  /* ---------- Missão, visão e valores ---------- */
  .sobre-mvv {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .sobre-mvv__linha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .sobre-cartao {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-claro);
  }

  .sobre-cartao--verde {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
  }

  .sobre-cartao--verde h2 {
    color: var(--cor-branco);
  }

  .sobre-valores {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
    border-radius: var(--raio-lg);
    background: var(--cor-primaria);
    color: var(--cor-branco);
  }

  .sobre-valores h2 {
    color: var(--cor-branco);
  }

  .sobre-valores__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .valor {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .valor__icone {
    width: 32px;
    height: 32px;
  }

  .valor__titulo {
    margin-bottom: 12px;
    font-size: var(--h5);
    line-height: var(--h5-lh);
    color: var(--cor-branco);
  }

  @media (max-width: 767px) {
    .sobre-mvv__linha,
    .sobre-valores__lista {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Trajetória e imprensa ---------- */
  .sobre-historia {
    margin-block: 120px 100px;
  }

  .sobre-historia__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sobre-historia__texto {
    flex: 0 0 60%;
    padding-right: 48px;
  }

  /* Original: rótulo e parágrafos do editor com 0.9rem abaixo; parágrafos separados por uma linha (20px). */
  .sobre-historia__texto .secao__rotulo {
    margin-bottom: 0.9rem;
  }

  .sobre-historia__texto .texto-rico {
    margin-top: 20px;
  }

  .sobre-historia__texto .texto-rico > * + * {
    margin-top: 20px;
  }

  /* Linha do tempo: os cartões brancos ficam deslocados para baixo (largura no desktop: bloco abaixo). */
  .linha-do-tempo {
    --carrossel-por-vez: 1;
    --carrossel-gap: 10px;

    flex: 0 0 40%;
    min-width: 0;
  }

  .linha-do-tempo .carrossel__lista {
    align-items: flex-start;
  }

  /* Medidas do original: 20px entre ano e texto e o espaço de parágrafo do editor (0.9rem). */
  .marco {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 24px;
    border-radius: var(--raio-lg);
    background: var(--cor-primaria);
    color: var(--cor-branco);
  }

  .marco p {
    margin-bottom: 0.9rem;
  }

  .marco__ano {
    font-size: var(--h3);
    line-height: var(--h3-lh);
    color: var(--cor-branco);
  }

  .carrossel__item:nth-child(even) .marco {
    margin-top: 200px;
    background: var(--cor-branco);
    color: var(--cor-texto);
  }

  .carrossel__item:nth-child(even) .marco__ano {
    color: var(--cor-texto);
  }

  .sobre-imprensa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 48px;
  }

  .sobre-imprensa__texto {
    display: flex;
    flex: 0 1 50%;
    flex-direction: column;
    gap: 8px;
  }

  .imprensa {
    --carrossel-por-vez: 3;

    flex: 0 0 40%;
    min-width: 0;
  }

  .imprensa .carrossel__lista {
    align-items: center;
  }

  /* Como no original, o logo ocupa a largura do slide (125px a 1440px). */
  .imprensa img {
    width: 100%;
    height: auto;
    margin-inline: auto;
  }

  /* Setas da linha do tempo: chevron de 25px (padding 10/14 vem de carrossel.css), como no original. */
  .linha-do-tempo .carrossel__seta {
    font-size: 25px;
  }

  /* Seta da ponta desabilitada (linha do tempo sem loop), como o Swiper do original. */
  .linha-do-tempo .carrossel__seta[aria-disabled="true"],
  .linha-do-tempo .carrossel__seta[aria-disabled="true"]:hover {
    background: var(--cor-secundaria);
    opacity: 0.3;
    cursor: default;
  }

  /* Desktop, medido no original a 1440 e 1920px: caixa de 1260px (não 1280), conteúdo de 1180px
     a 80px da borda; texto com 60% e linha do tempo com 40% (696 + 20 + 464px). A linha do tempo
     mostra um cartão por vez e o seguinte aparece à direita, até a borda da tela. */
  @media (min-width: 1025px) {
    .sobre-historia__topo,
    .sobre-imprensa {
      --sobre-gap: 20px;

      max-width: 1180px;
      gap: var(--sobre-gap);
    }

    .sobre-historia__topo {
      align-items: flex-start;
    }

    /* Original: imprensa 78px abaixo da linha do tempo; texto ocupa o que sobra ao lado do carrossel. */
    .sobre-imprensa {
      margin-top: 78px;
    }

    .sobre-imprensa__texto {
      flex: 1 1 0;
    }

    .sobre-imprensa__texto p {
      margin-bottom: 0.9rem;
    }

    /* 696px de coluna com 48px à direita: o texto fica com 648px, como no original. */
    .sobre-historia__texto {
      flex: 0 0 calc((100% - var(--sobre-gap)) * 0.6);
    }

    .linha-do-tempo {
      /* Quanto a faixa avança além do conteúdo até a borda direita da tela. */
      --sobre-sangria: max(var(--container-padding), (100vw - 1260px) / 2);

      flex: 0 0 calc((100% - var(--sobre-gap)) * 0.4);
      margin-top: 10px;
      container-type: inline-size;
    }

    .linha-do-tempo .carrossel__trilho {
      margin-right: calc(-1 * var(--sobre-sangria));
    }

    /* Cartão com a largura da coluna (100cqw); o espaço no fim deixa o último cartão chegar ao início. */
    .linha-do-tempo .carrossel__lista {
      width: max-content;
      padding-right: var(--sobre-sangria);
    }

    .linha-do-tempo .carrossel__item {
      flex: 0 0 100cqw;
      width: 100cqw;
    }

    /* Setas do original: 20px para fora do cartão e a 172px do topo (base do primeiro cartão). */
    .linha-do-tempo .carrossel__seta {
      top: 172px;
      transform: none;
    }

    /* Imprensa: 3 logos na largura da coluna (125px a 1440px), mas a faixa segue visível até a
       borda direita da tela, como no original (os logos à direita da coluna também aparecem). */
    .imprensa {
      --carrossel-gap: 24px;
      --sobre-sangria: max(var(--container-padding), (100vw - 1260px) / 2);

      flex: 0 0 calc((100% - var(--sobre-gap)) * 0.364);
      container-type: inline-size;
    }

    .imprensa .carrossel__trilho {
      margin-right: calc(-1 * var(--sobre-sangria));
    }

    .imprensa .carrossel__lista {
      width: max-content;
    }

    .imprensa .carrossel__item {
      flex: 0 0 calc((100cqw - 2 * var(--carrossel-gap)) / 3);
      width: calc((100cqw - 2 * var(--carrossel-gap)) / 3);
    }
  }

  @media (min-width: 1281px) {
    .sobre-historia .faixa-clara__caixa {
      max-width: calc(1260px + (100vw - 1260px) / 2);
    }
  }

  @media (max-width: 1024px) {
    .sobre-historia__topo,
    .sobre-imprensa {
      flex-direction: column;
      align-items: flex-start;
    }

    .sobre-historia__texto {
      padding-right: 0;
    }

    .linha-do-tempo,
    .imprensa {
      flex-basis: auto;
      width: 100%;
      margin-top: 20px;
    }

    .linha-do-tempo {
      --carrossel-por-vez: 2;
    }

    .imprensa {
      --carrossel-por-vez: 4;
    }

    .carrossel__item:nth-child(even) .marco {
      margin-top: 0;
    }
  }

  @media (max-width: 767px) {
    .sobre-historia {
      margin-block: 80px 100px;
    }

    .linha-do-tempo {
      --carrossel-por-vez: 1;
    }

    .imprensa {
      --carrossel-por-vez: 3;
    }
  }
}