.container {
  max-width: 86rem;
  margin: 0 auto;
  padding-inline: 2rem;
}

.mobile-hidden {
  display: none;
}

.btn {
  display: inline-flex;

  background-color: var(--orange-btn);
  color: var(--white);
  font-weight: 600;

  padding: 1rem 2rem;
  border: 0;
  border-radius: 0.625rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  gap: .5rem;

  /* cor do texto e da borda no hover: laranja original no fundo escuro;
     em fundo claro (.btn-claro) usa o laranja escuro para manter o contraste */
  --btn-hover-cor: var(--orange);

  /* a borda já existe com a cor do fundo: no hover o fundo some e ela fica.
     box-shadow em vez de border para o botão não mudar de tamanho */
  box-shadow: inset 0 0 0 2px var(--orange-btn);

  /* começa e termina devagar: a cor se mistura de forma gradual, sem "corte" no início */
  --btn-transicao: .5s cubic-bezier(.45, 0, .25, 1);
  transition:
    background-color var(--btn-transicao),
    color var(--btn-transicao),
    box-shadow var(--btn-transicao),
    transform var(--btn-transicao);

  &.btn-sm {
    padding: 0.625rem 1.5rem;
  }

  &:hover {
    background-color: transparent;
    color: var(--btn-hover-cor);
    box-shadow: inset 0 0 0 2px var(--btn-hover-cor);
    transform: translateY(-2px);
  }

  &.btn-claro {
    --btn-hover-cor: var(--orange-btn);
  }

  & svg {
    display: block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    line-height: 0;
  }

  &.secondary {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--white);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    }
  }
}

.section-label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  color: var(--orange-txt);
  margin-bottom: 0.875rem;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -1px;
  margin-bottom: 0.875rem;
  max-width: 35rem;
  margin-inline: auto;

  & span {
    color: var(--orange-lg);
    text-transform: uppercase;
  }

  & em {
    color: var(--orange-lg);
  }

  /* palavras separadas pelo animacoes.js: mantêm a cor e a caixa de onde estão
     (sem isso a regra "& span" acima deixaria o título todo laranja e maiúsculo) */
  & .palavra {
    color: inherit;
    text-transform: inherit;
  }
}

@media (width <= 40rem) {
  .container {
    padding-inline: 1.25rem;
  }

  .section-title {
    font-size: 2.1rem;
  }
}

.section-sub {
  color: var(--muted);
  font-size: 1rem;
  max-width: 35rem;
  line-height: 1.65;
  margin: 0 auto;
}

@media (width >= 62.5rem) {
  .mobile-hidden {
    display: block;
  }
}