@media (hover: hover) and (pointer: fine) {
  /* * en vez de solo body: muchos elementos (a, button, inputs, etc.)
     traen su propio cursor:pointer explícito con más especificidad que
     el heredado de body, así que sin esto el ícono nativo de "manito"
     seguía apareciendo sobre botones y links. */
  *, *::before, *::after { cursor: none !important; }

  .custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #efb036;
    pointer-events: none;
    /* Más alto que cualquier otro z-index del sitio (el más alto en uso
       real es el 9999 del overlay del lightbox en css/lightbox.css) —
       si no, al abrir un carrusel/lightbox el círculo quedaba tapado
       por el overlay en vez de encima. */
    z-index: 2147483647;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .15s ease, background-color .15s ease, width .15s ease, height .15s ease;
    will-change: transform;
  }
  .custom-cursor.is-visible { opacity: 1; }
  /* Sobre elementos clickeables, el círculo cambia de color (y crece un
     poco) en vez de mostrar el cursor nativo — compensa la señal de
     "esto es clickeable" que se perdió al ocultar el cursor del sistema.
     Cambia width/height (no transform: scale) porque el translate(-50%,
     -50%) de centrado ya usa transform, y ese lo controla el JS en cada
     mousemove — si el scale también fuera vía transform, uno de los dos
     pisaría al otro. Como translate(-50%,-50%) es relativo al tamaño
     propio del elemento, sigue centrando bien aunque cambie el tamaño. */
  .custom-cursor.is-hover {
    width: 26px;
    height: 26px;
    background: #1c2f40;
  }
}