html {
  scroll-behavior: smooth;
}

p {
  hyphens: auto;
}

::selection {
  background: #ff6b4a;
  color: #fff;
}

/* Cabecalho fixo: transparente sobre o hero, solido ao rolar (classe .is-scrolled
   alternada via scroll listener em js/script.js) */
#siteHeader .main-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
#siteHeader.is-scrolled .main-header {
  background-color: #fff;
  border-bottom-color: var(--color-steel-200);
}

#siteHeader .header-brand-text,
#siteHeader .header-nav-links,
#siteHeader .header-icon-btn {
  color: #fff;
}
#siteHeader.is-scrolled .header-brand-text,
#siteHeader.is-scrolled .header-nav-links,
#siteHeader.is-scrolled .header-icon-btn {
  color: var(--color-ocean-950);
}

/* Botao "Agendar aula" do cabecalho: escondido no mobile e no tablet; em
   telas desktop o espaco fica sempre reservado (evita o menu "pular" de
   posicao) e so a visibilidade alterna quando o cabecalho fica solido */
.header-cta {
  display: none;
}
@media (min-width: 1024px) {
  .header-cta {
    display: inline-flex;
    visibility: hidden;
  }
  #siteHeader.is-scrolled .header-cta {
    visibility: visible;
  }
}

/* Foto do Hero: no mobile/tablet a altura do quadro sempre define a escala
   (background-size:cover fica height-bound), entao so o eixo X desloca o
   enquadramento. No mobile a faixa de texto ocupa quase toda a largura, entao
   so deslocar no X nao basta - aplica um leve zoom (background-size maior que
   cover) para dar mais folga e afastar o Danilo do texto. No tablet a faixa
   de texto e proporcionalmente menor, entao so o deslocamento em X resolve.
   No desktop o quadro e bem mais largo e o problema nao existe. */
.hero-bg {
  background-position: 10% 18%;
  background-size: 140% auto;
}
@media (min-width: 768px) {
  .hero-bg {
    background-position: 0% 32%;
    background-size: cover;
  }
}
@media (min-width: 1024px) {
  .hero-bg {
    background-position: 58% 32%;
  }
}