/* DESKTOP */
@media (min-width: 772px) {
}

/* MOBILE */
@media (max-width: 772px) {
  /* --- CSS PARA O ROTATOR DE TELEFONE --- */

/* 1. O Container (Pai) */
.header-top .telefone {
  position: relative;
  overflow: hidden; 
  min-height: 1.5em; /* Ajuste conforme o tamanho da sua fonte */
  
  /* Garantir que a transição de largura seja suave */
  transition: width 0.3s ease; 
}

/* 3. Estado Padrão (Oculto) */
.header-top .telefone a {
  position: absolute;
  top: 0;
  left: 0;

  /* --- CORREÇÃO --- */
  /* O link deve ter 100% da largura do PAI (que vamos definir via JS) */
  width: 100%; 
  white-space: nowrap;
  /* --- FIM DA CORREÇÃO --- */

  opacity: 0;
  visibility: hidden;
  transform: translateY(100%); /* Começa abaixo */
  
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.4s ease,
              visibility 0s 0.4s;
}

/* 4. Estado ATIVO (Entrando) */
.header-top .telefone a.ativo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Move para o centro */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.4s ease,
              visibility 0s 0s;
}

/* 5. Estado SAINDO */
.header-top .telefone a.saindo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%); /* Sai para cima */
  transition: transform 0.4s ease,
              opacity 0.4s ease,
              visibility 0s 0.4s;
}

/* 6. Lógica para DESKTOP (Quando NÃO for mobile) */
.header-top .telefone.desktop-view {
  /* Reseta a largura do container */
  width: auto !important;
}
.header-top .telefone.desktop-view a {
  position: static; 
  transform: none;
  opacity: 1;
  visibility: visible;
  width: auto;
}

/* 7. Separador " | " no Desktop */
.header-top .telefone.desktop-view a:not(:last-child)::after {
  content: ' | ';
  margin: 0 0.5em;
  position: static;
  opacity: 1;
  visibility: visible;
}
}