/* The same state applies before, during and after hover. */
:root {
  --pangeia-header-background: transparent;
  --pangeia-header-text: #063C70;
  --pangeia-header-shadow: none;
  --pangeia-header-border: none;
  --pangeia-label-shadow: none;
}
:root[data-pangeia-hero-image="ready"]:not([data-pangeia-header="scrolled"]) {
  --pangeia-header-text: #fff;
  --pangeia-label-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  /* Faixa branca que separa o menu transparente da foto do banner. */
  --pangeia-header-border: 1px solid rgba(255, 255, 255, .35);
}
:root[data-pangeia-header="scrolled"] {
  --pangeia-header-background: #fff;
  --pangeia-header-text: #063C70;
  --pangeia-header-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  --pangeia-label-shadow: none;
}
/* Paginas internas (cursos, etc.): sem sobreposicao transparente sobre o banner -
   o menu fica sempre preenchido, do mesmo jeito parado ou rolado. !important porque a
   regra de hero visivel tem mais especificidade e senao ganha, deixando o texto branco
   sobre o fundo branco. */
:root[data-pangeia-page="interna"] {
  --pangeia-header-background: #fff !important;
  --pangeia-header-text: #063C70 !important;
  --pangeia-header-shadow: 0 2px 12px rgba(0, 0, 0, .08) !important;
  --pangeia-label-shadow: none !important;
  --pangeia-header-border: none !important;
}
/* Paginas internas: os textos que ficam por cima da foto do hero (titulo, subtitulo e
   a trilha de navegacao) saem do branco puro pra um cinza claro - fica no mesmo tom
   acinzentado do nome do curso que ja aparece na propria foto, e a Sarah achou mais
   premium. !important porque o modulo do Griddo aplica a cor via var(--textInverse)
   direto no elemento (inline style), que teria mais especificidade senao. */
:root[data-pangeia-page="interna"] .styles-module--flexWrapper--37263,
:root[data-pangeia-page="interna"] .styles-module--text--f76b0,
:root[data-pangeia-page="interna"] .styles-module--link--5b867 {
  color: #d9d9d9 !important;
}
/* O menu fixo nao ocupa espaco no fluxo normal, entao o que vem logo depois dele fica
   escondido por baixo. So nas paginas internas, onde o menu e solido (nao transparente
   por cima do banner), empurra esse conteudo pela altura real do menu. Usa margin-top, e
   nao padding-top: o banner tem uma imagem "position: absolute" la dentro que se ignora
   padding do pai (fica colada no topo), sobrando um vao vazio embaixo da imagem do
   tamanho do padding. Margin desloca a caixa inteira, imagem incluida. */
:root[data-pangeia-page="interna"] #navbar ~ div:first-of-type {
  margin-top: var(--pangeia-header-height, 106px);
}
#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  transform: none !important;
  background: transparent !important;
}
#navbar .styles-module--navbarFlexWrapper--71071 {
  display: none !important;
}
#navbar .styles-module--menuFullSize--9f408 {
  height: auto !important;
  min-height: 0;
  background: transparent !important;
}
#navbarFixed {
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}
#navbarFixed,
#navbar .mobileNav-module--mobileNavWrapper--7d098,
#navbar .mobileNav-module--mobileNavPrincipalWrapper--96b9f {
  background: var(--pangeia-header-background) !important;
  border-bottom: var(--pangeia-header-border) !important;
  box-shadow: var(--pangeia-header-shadow);
  transition: background-color .3s ease, box-shadow .3s ease, border-bottom .3s ease;
}
#navbarFixed,
#navbarFixed .styles-module--wrapperDesktopMenu--1212d,
#navbarFixed .desktop_menu_styles-module--menuDesktopList--5234f,
#navbarFixed .desktop_menu_styles-module--menuDesktopList--5234f > li,
#navbarFixed .desktop_menu_styles-module--menuDesktopList--5234f > li > .desktop_menu_styles-module--MenuLinkItem--7ca47 {
  opacity: 1 !important;
  visibility: visible !important;
}
#navbarFixed .desktop_menu_styles-module--menuDesktopList--5234f > li > .desktop_menu_styles-module--MenuLinkItem--7ca47,
#navbarFixed .desktop_menu_styles-module--menuDesktopList--5234f > li > .desktop_menu_styles-module--MenuLinkItem--7ca47 > span {
  color: var(--pangeia-header-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: var(--pangeia-label-shadow);
}
#navbarFixed .desktop_menu_styles-module--menuDesktopList--5234f > li > .desktop_menu_styles-module--MenuLinkItem--7ca47 > svg path,
#navbar .mobileNav-module--headerIcons--0cb36 > svg path {
  fill: var(--pangeia-header-text) !important;
}
@media (prefers-reduced-motion: reduce) {
  #navbarFixed,
  #navbar .mobileNav-module--mobileNavWrapper--7d098,
  #navbar .mobileNav-module--mobileNavPrincipalWrapper--96b9f {
    transition: none;
  }
}

/* O painel do menu mobile ja existe no DOM com display:none; era o Gatsby que o abria.
   Quem alterna o estado agora e o pangeia-header.js. */
:root[data-pangeia-menu="aberto"] [class*="mobileNav-module--mobileMenuContent"] {
  display: block !important;
}
:root[data-pangeia-menu="aberto"] {
  overflow: hidden;
}

/* Os submenus do menu mobile ficam com max-height:0; o pangeia-header.js marca o
   wrapper quando o utilizador toca na linha. */
[class*="mobile-module--menuLabelWrapper"][data-pangeia-sub="aberto"] [class*="mobile-module--menuMobileList"] {
  max-height: none !important;
  height: auto !important;
}

/* Os carrosséis nativos do Griddo (cards "Por que escolher" e passos de admissão)
   dependiam do React pra mover os slides ao clicar nas bolinhas - sem os bundles, as
   bolinhas ficam mortas e, no celular, os cards depois do primeiro somem (overflow:
   hidden). Troca pra scroll horizontal nativo por toque, sem precisar de JS. */
[class*="carousel-module--carousel--"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
[class*="carousel-module--carouselSlidersSlider--"] {
  scroll-snap-align: start;
}
/* As bolinhas nao respondem a clique (sem JS), entao viram so um indicador visual. */
[class*="carousel-module--dots--"] {
  pointer-events: none;
}