/* AutomateK · esfera del encabezado. Se carga después de portada.css para
   poder sustituir el lienzo antiguo sin tocar esa hoja: quitando las dos
   líneas de index.html, la portada vuelve a como estaba. */
#esferaCv{position:relative;z-index:2;display:block;width:clamp(320px,44vw,640px);aspect-ratio:1/1;height:auto;margin:0 auto;cursor:auto;touch-action:auto}

/* En pantalla estrecha la esfera va entre el titular y el párrafo: es lo
   primero que se ve después de la frase. Hace falta !important porque
   portada.css declara #kTilt{order:2 !important} en este mismo ancho. */
@media(max-width:899px){
  #heroRow #kTilt{order:2 !important}
  #esferaCv{width:min(168px,44vw)}
}