/* diferenciais: tipografia como imagem. Números em navy, nunca coral.
   Dois números em diagonal, equipe como linha larga. */

.diferenciais { padding-block: var(--respiro); }

.diferenciais__moldura { padding-inline: var(--margem); }
.diferenciais__abertura .apoio { margin-top: 1rem; }

.numero { margin-top: 3rem; }

.numero__valor {
  font-family: var(--serif);
  /* Em 360px o "+14 anos" precisa caber na largura sem cortar */
  font-size: clamp(3.875rem, 19.6vw, 6.5rem);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--navy);
  white-space: nowrap;
}
.numero__rotulo {
  margin-top: .5rem;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--navy);
}
.numero__texto p + p { margin-top: .375rem; }

.numero--anos { text-align: right; }
.numero--anos .numero__texto { margin-left: auto; max-width: 21em; }

.diferenciais__equipe {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--fio);
}
.diferenciais__equipe-titulo {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--navy);
  text-wrap: balance;
}
.diferenciais__equipe p { margin-top: .75rem; max-width: 34em; }

@media (min-width: 1024px) {
  .diferenciais__moldura {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .diferenciais__abertura {
    grid-column: 1 / span 12;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
  }
  .diferenciais__abertura .titulo { grid-column: 1 / span 6; }
  .diferenciais__abertura .apoio { grid-column: 8 / -1; margin-top: 0; }

  .numero__valor { font-size: clamp(5rem, 14vw, calc(13rem + var(--folga) * .107)); line-height: .95; }

  /* Primeiro número à esquerda, texto no vazio à direita */
  .numero--avaliacoes {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
    margin-top: clamp(3rem, 6vw, 5.5rem);
  }
  .numero--avaliacoes .numero__valor { grid-column: 1 / span 5; }
  .numero--avaliacoes .numero__texto { grid-column: 6 / span 5; padding-bottom: 1.25rem; }

  /* Segundo número mais abaixo e à direita, em diagonal */
  .numero--anos {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    text-align: left;
  }
  .numero--anos .numero__valor { grid-column: 5 / -1; grid-row: 1; }
  .numero--anos .numero__texto { grid-column: 5 / -1; grid-row: 2; margin: .75rem 0 0; }

  .diferenciais__equipe {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
    margin-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-top: 2.25rem;
  }
  .diferenciais__equipe-titulo { grid-column: 1 / span 7; font-size: clamp(2rem, 3vw, 3rem); }
  .diferenciais__equipe p { grid-column: 8 / -1; margin-top: 0; }
}

/* Navegadores sem subgrid: mantém a leitura em coluna */
@supports not (grid-template-columns: subgrid) {
  @media (min-width: 1024px) {
    .diferenciais__moldura { display: block; }
    .numero--anos { text-align: right; display: block; }
    .numero--avaliacoes,
    .diferenciais__abertura,
    .diferenciais__equipe { display: block; }
  }
}