/*
 * HHCS — padrão global de indicadores de carrossel
 * Versão 1.4.22
 *
 * Referência visual: indicadores do bloco "Experiências compartilhadas"
 * (avaliações Google):
 * - área interativa de 24x24px;
 * - círculo visual de 11x11px;
 * - indicador inativo azul #0c609f;
 * - indicador ativo branco, contorno azul, leve escala e halo;
 * - centros espaçados uniformemente a cada 24px;
 * - transição de 0,3s.
 *
 * O arquivo é carregado depois dos CSS específicos das páginas para que
 * desktop e mobile usem exatamente o mesmo padrão visual sem alterar setas,
 * posição dos controles ou lógica dos carrosséis.
 */

/* Espaçamento uniforme somente entre grupos de bolinhas. */
.google-indicadores,
.bloco-sentido-indicadores,
.bloco-atendimentos-indicadores,
.bloco-como-iniciar-bolinhas,
.canais-contato-bolinhas,
#servicosPsicologicosAlternados .servicos-psicologicos-navegacao-mobile,
.bloco-modalidades-indicadores,
.modalidades-atendimento-bolinhas,
.bloco-trajetoria-cards-indicadores,
.bloco-temas-indicadores,
.encontro-clinico-branco .encontro-clinico-cards-indicadores {
  gap: 0 !important;
}

/* Área clicável comum. O círculo visual é desenhado em ::before. */
.google-bolinha,
.bloco-sentido-bolinha,
.bloco-atendimentos-bolinha,
.bloco-como-iniciar-indicador,
.canais-contato-bolinha,
#servicosPsicologicosAlternados .servicos-psicologicos-bolinha,
.bloco-modalidades-bolinha,
.modalidades-atendimento-bolinha,
.bloco-trajetoria-cards-bolinha,
.bloco-temas-bolinha,
.encontro-clinico-branco .encontro-clinico-cards-bolinha {
  position: relative !important;
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
  cursor: pointer !important;
}

/* Estado padrão: círculo azul. */
.google-bolinha::before,
.bloco-sentido-bolinha::before,
.bloco-atendimentos-bolinha::before,
.bloco-como-iniciar-indicador::before,
.canais-contato-bolinha::before,
#servicosPsicologicosAlternados .servicos-psicologicos-bolinha::before,
.bloco-modalidades-bolinha::before,
.modalidades-atendimento-bolinha::before,
.bloco-trajetoria-cards-bolinha::before,
.bloco-temas-bolinha::before,
.encontro-clinico-branco .encontro-clinico-cards-bolinha::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 11px !important;
  min-width: 11px !important;
  height: 11px !important;
  min-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #0c609f !important;
  border-radius: 50% !important;
  background: #0c609f !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(7, 59, 112, 0.16) !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
  pointer-events: none !important;
}

/* Remove enfeites antigos que algumas páginas desenhavam em ::after. */
.google-bolinha::after,
.bloco-sentido-bolinha::after,
.bloco-atendimentos-bolinha::after,
.bloco-como-iniciar-indicador::after,
.canais-contato-bolinha::after,
#servicosPsicologicosAlternados .servicos-psicologicos-bolinha::after,
.bloco-modalidades-bolinha::after,
.modalidades-atendimento-bolinha::after,
.bloco-trajetoria-cards-bolinha::after,
.bloco-temas-bolinha::after,
.encontro-clinico-branco .encontro-clinico-cards-bolinha::after {
  content: none !important;
  display: none !important;
}

/* Estado selecionado: branco com contorno/halo azul, igual às avaliações. */
.google-bolinha.ativa::before,
.google-bolinha.ativo::before,
.bloco-sentido-bolinha.ativa::before,
.bloco-sentido-bolinha.ativo::before,
.bloco-atendimentos-bolinha.ativa::before,
.bloco-atendimentos-bolinha.ativo::before,
.bloco-como-iniciar-indicador.ativa::before,
.bloco-como-iniciar-indicador.ativo::before,
.canais-contato-bolinha.ativa::before,
.canais-contato-bolinha.ativo::before,
#servicosPsicologicosAlternados .servicos-psicologicos-bolinha.ativa::before,
#servicosPsicologicosAlternados .servicos-psicologicos-bolinha.ativo::before,
.bloco-modalidades-bolinha.ativa::before,
.bloco-modalidades-bolinha.ativo::before,
.modalidades-atendimento-bolinha.ativa::before,
.modalidades-atendimento-bolinha.ativo::before,
.bloco-trajetoria-cards-bolinha.ativa::before,
.bloco-trajetoria-cards-bolinha.ativo::before,
.bloco-temas-bolinha.ativa::before,
.bloco-temas-bolinha.ativo::before,
.encontro-clinico-branco .encontro-clinico-cards-bolinha.ativa::before,
.encontro-clinico-branco .encontro-clinico-cards-bolinha.ativo::before {
  border-color: #0c609f !important;
  background: #ffffff !important;
  transform: translate(-50%, -50%) scale(1.28) !important;
  box-shadow:
    0 0 0 2px rgba(12, 96, 159, 0.20),
    0 3px 8px rgba(7, 59, 112, 0.20) !important;
}

/* Mesmo foco visual em todos os indicadores. */
.google-bolinha:focus-visible,
.bloco-sentido-bolinha:focus-visible,
.bloco-atendimentos-bolinha:focus-visible,
.bloco-como-iniciar-indicador:focus-visible,
.canais-contato-bolinha:focus-visible,
#servicosPsicologicosAlternados .servicos-psicologicos-bolinha:focus-visible,
.bloco-modalidades-bolinha:focus-visible,
.modalidades-atendimento-bolinha:focus-visible,
.bloco-trajetoria-cards-bolinha:focus-visible,
.bloco-temas-bolinha:focus-visible,
.encontro-clinico-branco .encontro-clinico-cards-bolinha:focus-visible {
  outline: 3px solid rgba(23, 139, 208, 0.28) !important;
  outline-offset: 0 !important;
}

/* -------------------------------------------------------------------------
 * v1.4.23 — reforço de especificidade do padrão global
 *
 * Alguns componentes possuíam seletores antigos mais específicos (sobretudo
 * as avaliações Google e o bloco ACP). Estes seletores finais garantem que o
 * mesmo desenho de "Experiências compartilhadas" vença também nesses casos.
 * ---------------------------------------------------------------------- */

/* Avaliações Google: mesma área, espaçamento e estados do padrão global. */
.google-indicadores {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  overflow: visible !important;
}

.google-indicadores .google-bolinha,
.google-indicadores .google-bolinha:hover,
.google-indicadores .google-bolinha:focus,
.google-indicadores .google-bolinha:active {
  position: relative !important;
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

.google-indicadores .google-bolinha::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 11px !important;
  height: 11px !important;
  border: 1px solid #0c609f !important;
  border-radius: 50% !important;
  background: #0c609f !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(7, 59, 112, 0.16) !important;
  transition: background-color .3s ease, border-color .3s ease,
              transform .3s ease, box-shadow .3s ease !important;
}

.google-indicadores .google-bolinha::after {
  content: none !important;
  display: none !important;
}

.google-indicadores .google-bolinha.ativa::before,
.google-indicadores .google-bolinha.ativo::before {
  border-color: #0c609f !important;
  background: #ffffff !important;
  transform: translate(-50%, -50%) scale(1.28) !important;
  box-shadow: 0 0 0 2px rgba(12, 96, 159, 0.20),
              0 3px 8px rgba(7, 59, 112, 0.20) !important;
}

/* Serviços — presencial / online. */
.bloco-modalidades-indicadores {
  gap: 0 !important;
}

.bloco-modalidades-indicadores .bloco-modalidades-bolinha,
.bloco-modalidades-indicadores .bloco-modalidades-bolinha:hover,
.bloco-modalidades-indicadores .bloco-modalidades-bolinha:focus,
.bloco-modalidades-indicadores .bloco-modalidades-bolinha:active {
  position: relative !important;
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.bloco-modalidades-indicadores .bloco-modalidades-bolinha::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 11px !important;
  height: 11px !important;
  border: 1px solid #0c609f !important;
  border-radius: 50% !important;
  background: #0c609f !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(7, 59, 112, 0.16) !important;
}

.bloco-modalidades-indicadores .bloco-modalidades-bolinha.ativa::before,
.bloco-modalidades-indicadores .bloco-modalidades-bolinha.ativo::before {
  border-color: #0c609f !important;
  background: #ffffff !important;
  transform: translate(-50%, -50%) scale(1.28) !important;
  box-shadow: 0 0 0 2px rgba(12, 96, 159, 0.20),
              0 3px 8px rgba(7, 59, 112, 0.20) !important;
}


/* -------------------------------------------------------------------------
 * v1.4.24 — correções direcionadas solicitadas
 * ---------------------------------------------------------------------- */

/*
 * Avaliações Google — mantém o padrão visual de Experiências compartilhadas
 * sem o retângulo/quadrado de foco que podia aparecer ao tocar/clicar.
 */
.google-indicadores {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  overflow: visible !important;
}

.google-indicadores .google-bolinha,
.google-indicadores .google-bolinha:hover,
.google-indicadores .google-bolinha:focus,
.google-indicadores .google-bolinha:active,
.google-indicadores .google-bolinha:focus-visible {
  position: relative !important;
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

.google-indicadores .google-bolinha::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 11px !important;
  min-width: 11px !important;
  height: 11px !important;
  min-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #0c609f !important;
  border-radius: 50% !important;
  background: #0c609f !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(7, 59, 112, 0.16) !important;
  transition: background-color .3s ease, border-color .3s ease,
              transform .3s ease, box-shadow .3s ease !important;
  pointer-events: none !important;
}

.google-indicadores .google-bolinha.ativa::before,
.google-indicadores .google-bolinha.ativo::before {
  border-color: #0c609f !important;
  background: #ffffff !important;
  transform: translate(-50%, -50%) scale(1.28) !important;
  box-shadow: 0 0 0 2px rgba(12, 96, 159, 0.20),
              0 3px 8px rgba(7, 59, 112, 0.20) !important;
}

.google-indicadores .google-bolinha:focus-visible::before {
  box-shadow: 0 0 0 3px rgba(23, 139, 208, 0.24),
              0 3px 8px rgba(7, 59, 112, 0.20) !important;
}

.google-indicadores .google-bolinha::after {
  content: none !important;
  display: none !important;
}

/* -------------------------------------------------------------------------
 * v1.4.29 — Avaliações Google = padrão visual de Serviços Psicológicos
 *
 * Aplicado globalmente (desktop e mobile) nas páginas Início e Quem Sou.
 * A referência é o carrossel "Serviços Psicológicos":
 * - área de toque 24x24px por indicador;
 * - círculo visual 11x11px;
 * - inativo azul sólido;
 * - ativo branco com contorno/halo azul;
 * - mesma escala e sombra do indicador ativo de Serviços;
 * - sem halo extra de foco sobre a bolinha, que fazia o indicador Google
 *   parecer maior do que os demais em navegadores mobile.
 * ---------------------------------------------------------------------- */
.google-indicadores {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  overflow: visible !important;
}

.google-indicadores .google-bolinha,
.google-indicadores .google-bolinha:hover,
.google-indicadores .google-bolinha:focus,
.google-indicadores .google-bolinha:active,
.google-indicadores .google-bolinha:focus-visible {
  position: relative !important;
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  transform: none !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.google-indicadores .google-bolinha::before,
.google-indicadores .google-bolinha:hover::before,
.google-indicadores .google-bolinha:focus::before,
.google-indicadores .google-bolinha:active::before,
.google-indicadores .google-bolinha:focus-visible::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 11px !important;
  min-width: 11px !important;
  max-width: 11px !important;
  height: 11px !important;
  min-height: 11px !important;
  max-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #0c609f !important;
  border-radius: 50% !important;
  background: #0c609f !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(7, 59, 112, 0.16) !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
  pointer-events: none !important;
}

.google-indicadores .google-bolinha.ativa::before,
.google-indicadores .google-bolinha.ativo::before,
.google-indicadores .google-bolinha.ativa:hover::before,
.google-indicadores .google-bolinha.ativo:hover::before,
.google-indicadores .google-bolinha.ativa:focus::before,
.google-indicadores .google-bolinha.ativo:focus::before,
.google-indicadores .google-bolinha.ativa:active::before,
.google-indicadores .google-bolinha.ativo:active::before,
.google-indicadores .google-bolinha.ativa:focus-visible::before,
.google-indicadores .google-bolinha.ativo:focus-visible::before {
  border-color: #0c609f !important;
  background: #ffffff !important;
  transform: translate(-50%, -50%) scale(1.28) !important;
  box-shadow:
    0 0 0 2px rgba(12, 96, 159, 0.20),
    0 3px 8px rgba(7, 59, 112, 0.20) !important;
}

.google-indicadores .google-bolinha::after,
.google-indicadores .google-bolinha:hover::after,
.google-indicadores .google-bolinha:focus::after,
.google-indicadores .google-bolinha:active::after,
.google-indicadores .google-bolinha:focus-visible::after {
  content: none !important;
  display: none !important;
}