/* ========================================
   CURSOR do site — bolinha + aro
   25/08/2026 · vale em TODAS as páginas

   Discreto de propósito: um ponto que gruda no ponteiro e um aro que chega
   ATRASADO. É o atraso que dá a suavidade — e ele é feito quadro a quadro no JS
   (js/cursor.js), não com transição de CSS: transição brigaria com o movimento
   contínuo do mouse e ficaria elástico.

   A classe `tem-cursor-proprio` vem do JS. Sem script, ou em tela de toque, o
   ponteiro do sistema continua normal — nada aqui se aplica.
   ======================================== */

html.tem-cursor-proprio,
html.tem-cursor-proprio body,
html.tem-cursor-proprio a,
html.tem-cursor-proprio button,
html.tem-cursor-proprio label,
html.tem-cursor-proprio summary,
html.tem-cursor-proprio [role="button"],
html.tem-cursor-proprio img,
html.tem-cursor-proprio .galeria-unidade__foto {
  cursor: none;
}

/* EXCEÇÃO que não pode sumir: em campo de texto o cursor precisa virar barra,
   senão a pessoa não enxerga onde vai digitar. Aqui o ponteiro do sistema volta. */
html.tem-cursor-proprio input,
html.tem-cursor-proprio textarea,
html.tem-cursor-proprio select,
html.tem-cursor-proprio [contenteditable="true"] {
  cursor: auto;
}

.cur {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100000;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}

.cur.esta-visivel {
  opacity: 1;
}

/* o ponto: gruda no ponteiro */
.cur__ponto {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #aa7e32;
  /* sem contorno: só a bolinha cheia. O anel de fora é que faz o desenho. */
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              background-color .25s ease;
}

/* o aro: chega depois. 32px contra 10px do ponto deixa ~11px de folga de cada
   lado — antes eram 38/7 (~15px) e ficou solto demais. */
.cur__aro {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1px solid rgba(170, 126, 50, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1), border-color .25s ease;
}

/* em cima do que dá pra clicar, o aro fecha um pouco e escurece */
.cur.esta-em-link .cur__aro {
  border-color: rgba(170, 126, 50, .95);
}

.cur.esta-pressionado .cur__aro {
  border-color: rgba(170, 126, 50, .95);
}

/* CONTRASTE: sobre fundo escuro o dourado fechado some. O JS lê a cor atrás do
   ponteiro (js/cursor.js) e liga esta classe, trocando para o dourado claro. */
.cur.esta-no-escuro .cur__ponto {
  background: #ebc65e;
}

.cur.esta-no-escuro .cur__aro {
  border-color: rgba(235, 198, 94, .85);
}

.cur.esta-no-escuro.esta-em-link .cur__aro,
.cur.esta-no-escuro.esta-pressionado .cur__aro {
  border-color: #f4dfa4;
}

@media (prefers-reduced-motion: reduce) {
  .cur__ponto,
  .cur__aro { transition: none; }
}